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.
Referencias
Optimizar imágenes desde la terminal en Linux
Optimize Images - PageSpeed Insights - Google Developers
Image optimization - Web Fundamentals - Google Developers