Independientemente de si las imágenes del sitio web son para un porfolio de un fotógrafo profesional o capturas de pantallas que acompañan a un tutorial, lo que tenemos que lograr, si queremos que nuestro sitio «vaya» rápido, es la mejor relación peso/calidad de las mismas. Para lograr esto podemos optimizar las imágenes con MozJPEG.

MozJPEG

MozJPEG es el proyecto de codificador JPEG de Mozilla y el objetivo es mejorar la eficiencia de la compresión JPEG logrando una mayor calidad visual y tamaños de archivo más pequeños al mismo tiempo. Es compatible con el estándar JPEG y con la gran mayoría de los decodificadores JPEG implementados en el mundo.

Actualmente esta en la versión 4.0.4 y el paquete viene con unas cuantas herramientas que te resumo a continuación :

• cjpeg: Comprime el archivo de imagen.
• djpeg: Descomprime el archivo de imagen, devolviendo por ej. un BMP.
• jpegtran: Realiza varias transformaciones útiles.
• rdjpgcom: Lee el bloque de comentario de un archivo y lo imprime por salida estándar.
• tjbench: Compara el rendimiento de libjpeg-turbo
• wrjpgcom: Escribe un comentario dentro del archivo de imagen.

cjpeg

Para comprimir una archivo solo tenemos que invocar a cjpeg con el nombre del archivo a comprimir y guardar la salida estándar.

$> cjpeg imagen-origen.jpg > [imagen-resultante.jpg]

Pero si queremos podemos agregar algunos modificadores.

• -outfile: Archivo de destino, en vez de utilizar la salida estándar.
• -quality: Este es un valor entre 0 y 100 e indica la calidad de la imagen resultante.

Para esta experiencia utilicé una hermosa foto que tomó Matias Capizzano en el GPL de Córdoba del 2018. La imagen original tiene una dimensión de 4200×2800, pesa 1939K (aprox. 2MB) y ya está optimizada con JPEGmini 3.11.4.3.

Calidad	Tamaño resultante	% del tamaño original
Original	1939K	100%
Default	854K	44%
75%	722K	37%
50%	419K	21%
25%	243K	15%
12%	137K	7%

A continuación podés ver una una serie de imágenes desde la original hasta una al 12% de calidad. Queda a criterio de cada uno eligir la mejor relación calidad/peso. Personalmente prefiero entre el 75% y el 50% de la calidad de la imagen pero con un peso de aproximadamente 1/4 de la imagen original.

Aquí debajo podés ver un recorte de la imagen original. Al igual que las imágenes anteriores se observa que las mismas empeoran significativamente a partir del 50% de calidad.

Observación: A partir de WordPress 5.3 por defecto las imágenes grandes son dimensionadas a 2560×1707 de forma automática, por lo que las adapté con Gimp antes de subirlas.