Optimización de imágenes: Archivos PNG

Archivos PNG

Un problema recurrente al manejar este formato de archivos puede ser el hecho de que ocupen una mayor cantidad de espacio en disco y al ser junto a los archivos JPEG uno de los dos formatos más usados en el entorno web esto se puede traducir en mayor tiempo de carga para nuestros sitios web.

Como tal vez ya sepamos, los PNG son un formato de imágenes que soportan compresión sin pérdidas¹. Para entender el como funciona la optimización de las imágenes en este formato, debemos tomar en cuenta al proceso de compresión.

Compresión:

A modo de resumen, el archivo png se comprime en dos fases:

1. Filtrado: Una serie de filtros son escogidos para facilitar la compresión en la siguiente fase. Se utiliza un método de filtrado para ayudar a la predicción del color del pixel en base a sus vecinos.

2. El algoritmo de compresión utilizado en la segunda fase se denomina deflate el cual es el mismo algoritmo utilizado por la libreria zlib.

Para mayor información, consulte la especificación de la norma ISO.

Optimización:

La optimización de los archivos png se puede realizar:

• Eliminando los bloques auxiliares de la cabecera, los cuales pueden corresponder a información de los valores gama, el color de fondo, entre otros².
• Utilizando una paleta de colores reducida (paleta indexada)
• Optimizando los filtros linea a linea
• Optimizando la compresión mediante el método deflate.

Herramientas de optimización

De las múltiples posibilidades, decidí probar 3: pngcrush, optipng y pngquant:

PNGCrush

Proyecto opensource que se ejecuta por medio de la línea de comandos. Itera sobre los filtros y los parámetros usados por el método de compresión deflate, realizando la compresión para cada combinación posible y de este modo escoger la mejor alternativa.

Site: pngcrush

Modo de Uso:

    pngcrush -rem allb origen.png pngcrush.png

OptiPNG

Inspirado en base a pngcrush. Diseñado para ser mucho más veloz. A diferencia de pngcrush, optipng realiza las pruebas en memoria y escribe solo el resultado óptimo en el disco.

Site: optipng

Modo de Uso:

    optipng -o 2 origen.png -out optipng.png

PNGQuant

A diferencia de pngcrush y optipng, pngquant reduce el número de colores a utilizar (a 256 o menos). Por lo que si bien podemos lograr un tamaño mucho menor, es posible que se produzca una pérdida en la calidad.

Sitio: pngquant

Modo de Uso:

    pngquant origen.png --ext -pngquant.png

Ejemplo: tinypng.org (optimizador online que usa pngquant)

Comparativa

Comparando resultados para dos capturas de pantalla en formato png (las capturas están alojadas en google drive):

• Captura de pantalla del juego need for speed:

• Captura de pantalla de la terminal:

Conclusiones

1. Aunque en la comparativa tan solo se aprecia el espacio en disco final, se debería de tomar en cuenta el tiempo de procesamiento de cada herramienta.

2. Si bien pngquant obtiene un tamaño considerablemente menor al original, se debe tener cuidado con su uso, ya que trabaja reduciendo la paleta de colores por lo que puede conllevar una pérdida en la calidad. (Para las dos imágenes mostradas el efecto es inapreciable)

3. Si mantener la calidad original es una prioridad, se recomienda el uso de optipng. Y en caso de que nos podamos permitir el reducir "levemente" la calidad³ podemos considerar el uso de pngquant.

Referencias

1. optipng: A guide to PNG optimization
2. debianfacil.wordpress.com: optimizando-y-reduciendo-imagenes-png
3. Portable Network Graphics
4. Manpages Ubuntu
5. manual optipng