Optimizando imágenes de directorios de una página web

English version of this post. 
Esta semana me dí cuenta que necesitaba optimizar las imágenes de mi página web, esto, debido a que había muchas imágenes muy grandes que por alguna razón no estaban optimizadas y que causaban algunos problemas como:

  • La página web se vuelve más lenta
  • Las imágenes ocupa mucho más espacio del necesario
  • Se consume mucho más ancho de banda de lo que debería
  • Los usuarios de la página tienen una mala experiencia visitando el sitio

Y como son un número considerable de imágenes a procesar me he dado a la tarea de crear una pequeña función para este propósito que inclusive se puede ejecutar con regularidad en el servidor. Para lograr los efectos deseados en esta función he utilizado las librerías imagemagick y jpegoptim. El primero de los paquetes lo utilizo para reducir imágenes de tamaño y a escala. El segundo lo utilizo para agregar compresión a la imagen y que se reduzca en tamaño, aunque estos paquetes traen mucha más funcionalidad disponible de la que utilizo en este caso.

Para instalar los paquetes ya que son pre-requisitos para que nuestra función de optimización funcione, se utilizan los siguientes comandos:

sudo apt-get install imagemagick jpegoptim

A continuación se muestra la función de optimización:

function optimize_web_images() {   
    declare -a search_dirs=(
        "/var/www/mypage.com/images" 
        "/var/www/anotherpage.com/images"
    )

    counter=1
    ## now loop through the dirs array
    for dir in "${search_dirs[@]}"
    do
        echo "Processing folder: ${dir} ..";
        find "$dir" -type f -exec file --mime-type {}  \; | awk '{if ($NF == "image/jpeg") print $0 }' | while read f
        do
            local image_file="${f::-12}";
            local image_width=$(identify -format '%w' "${image_file}");
            local max_width="1024";
            local max_optim="80";

            if [[ "${image_width}" -gt "${max_width}" ]]; then
                echo "Optimizing image ${image_file} .. old width: ${image_width}px, new width: ${max_width}px";
                convert "${image_file}" -resize "${max_width}"\> "${image_file}";
                jpegoptim --strip-all -q --max="${max_optim}" "${image_file}";
            fi
            
            # if processed images are 500, print progress
            if ! (( $counter % 500 )) ; then
                echo "Processed $counter images .."
            fi

            # count processed images
            ((counter++))
        done
    done
}

Básicamente lo que hace esta función es que busca todos los archivos de imagen en una lista de directorios predefinida. Para determinar que se trata de una imagen se utiliza el mime-type del archivo, esto para descartar problemas con la extensión de los archivos en caso de que quisiéramos hacer un filtrado de ‘*.jpg’ por ejemplo.

Una vez encontradas las imágenes se procede a determinar si la imagen es candidata para optimización, es decir, si es una imagen de tamaño mas grande al predeterminado, para esto usamos el comando identify que nos arroja el tamaño de la imagen a comparar. En caso de que la imagen sea candidata, se utiliza primero el comando convert para escalar la imagen al tamaño deseado y después el comando jpegoptim para reducir un poco el tamaño y la calidad de dicha imagen.

De esta forma se obtiene al final una lista de imágenes optimizadas que nos ayudan a que la página en cuestión sea más rápida, si tienes dudas sobre los comandos utilizados hay mucha información sobre los mismos en internet ya que cuentan con muchas opciones y son muy flexibles, espero te haya sido de utilidad.

¡Saludos!
-Yohan

Leave a Reply

Your email address will not be published. Required fields are marked *