Reducir el tamaño de las imágenes de un sitio Web desde línea de comandos

Detalles: 20 Mayo 2016

Leyendo un artículo del replicante descubrí un par de excelentes herramientas para optimizar imágenes JPEG y PNG sin pérdida. Optimizar el tamaño de las imágenes de un sitio Web es de vital importancia, pues éstas a menudo contabilizan la mayoría de los bytes descargados en una página. Por ende, optimizar las imágenes de un sitio Web puede resultar en la mayor mejora en cuanto a tamaño de transferencias y rendimiento.

De acuerdo a la guía de referencia de Google PageSpeed Tools, a menor cantidad de bytes que los navegadores tengan que descargar, menor competencia por el ancho de banda en los clientes y mayor velocidad para descargar y mostrar el contenido en pantalla. Por ello es uno de los aspectos clave al momento de determinar la velocidad de un sitio Web:

Encontrar el formato óptimo y la estrategia de optimización correcta requiere un análisis cuidadoso entre diferentes aspectos: el tipo de datos a ser codificados; las capacidades de cada formato de imagen; los requisitos de calidad y resolución; y más. Además se debe considerar cuándo algunas imágenes son mejor servidas utilizando formatos vectoriales como SVG, si algún efecto puede ser logrado a través de CSS, y cómo entregar los recursos escalados apropiadamente para cada tipo de dispositivo. Para responder estas preguntas Google ofrece una guía de optimización en su sitio Web Fundamentals.

Para el caso de este artículo, el objetivo es optimizar, sin pérdida, todas las imágenes JPEG y PNG de un sitio Web de forma rápida y automática desde línea de comandos (todo se hace más rápido desde línea de comandos), para así lograr un mejor score en PageSpeed Insights. Para lograrlo, se recurren a las herramientas jpegoptim y optipng respectivamente.

Manos a la obra

En Debian y derivados, instalar estas herramientas ejecutando el siguiente comando:

# apt-get install jpegoptim optipng

Luego cambiar a la raíz del sitio Web:

root@linuxito:~# cd /var/www/linuxito.com/

Inicialmente, el directorio donde se encuentran las imágenes (en este caso images/) ocupa 149 megabytes:

root@linuxito:/var/www/linuxito.com# du -hs images
149M    images

Se recomienda trabajar sobre una copia de las imágenes, para no perder datos en caso de error:

root@linuxito:/var/www/linuxito.com# cp -a images images-opti
root@linuxito:/var/www/linuxito.com# cd images-opti/
root@linuxito:/var/www/linuxito.com/images-opti# find . -type f | wc -l
1861

En el directorio se encuentran 1861 imágenes.

Para buscar de forma recursiva y optimizar al vuelo todas las imágenes dentro del directorio actual, utilizar find. Sin embargo se debe buscar cada formato de forma independiente, pues se deben ejecutar diferentes comandos (jpegoptim y optipng):

root@linuxito:/var/www/linuxito.com/images-opti# find . -type f -iname "*.jpg" -exec jpegoptim -p {} \;
root@linuxito:/var/www/linuxito.com/images-opti# find . -type f -iname "*.png" -exec optipng -preserve "{}" \;

Al utilizar los modos de preservación (-p con jpegoptim y -preserve con optipng), se indica que la optimización debe ser sin pérdida. De esta forma, no se producen cambios en una imagen si la compresión produce pérdida.

Además, al utilizar compresión sin pérdida, es posible correr estos comandos infinitas veces (por ejemplo cada vez que se agregan nuevas imágenes) sobre los mismos archivos sin inconveniente alguno.

Una vez finalizado, se puede comprobar que no sean perdido imágenes, y que ahora el directorio ocupa 10 megabytes menos:

root@linuxito:/var/www/linuxito.com/images-opti# find . -type f | wc -l
1861
root@linuxito:/var/www/linuxito.com# du -hs images-opti
139M    images-opti

Esto representa una reducción de aproximadamente un 7%. Tal vez parezca insignificante en cuanto a espacio en disco, pero si el sitio consume un ancho de banda de subida de unos 60 gigabytes mensuales (2 gigabytes diarios), esta reducción representa más de 40 GB de transferencia por mes.