Guía de compresión de imágenes PNG

Índice

Guía de compresión de imágenes PNG

Índice

Introducción

¿Cómo es esto posible?

Primera utilidad: OptiPNG

Compresión al máximo: PNGOUT

Proceso a seguir

Comparación de tamaños de fichero

Conclusiones

Introducción

Desde hace ya unos años, el formato PNG (Portable Network Graphics) se ha convertido en el estándar para publicar en web imágenes no fotorealistas (para imágenes fotorealistas es más apropiado el formato JPEG). El formato PNG vino a sustituir al más famoso GIF, que debido a ciertos problemas legales no podía ser usado libremente. Por tanto, se ideó el PNG como un formato libre que sustituyese al GIF, superando de paso algunas limitaciones de este último (como el nº máximo de colores, que es de 256 para el GIF), y aumentando la eficiencia de la compresión. Si bien la adopción del PNG como estándar fue algo lenta inicialmente, hoy en día ya es soportado por cualquier navegador que se precie de serlo, de modo que se podría decir que el GIF ya ha pasado a la historia.

Si bien ya he comentado que la compresión del formato PNG es sensiblemente superior a la del formato GIF, el PNG es un formato muy flexible en este sentido y por tanto el grado de compresión que se consiga depende en gran parte del programa que se use para comprimir la imagen. Por tanto, en este documento voy a explicar una serie de técnicas y utilidades que permiten reducir el tamaño de una imagen PNG hasta en un 40% o más, por supuesto sin reducir la calidad de imagen (el PNG es un formato de compresión sin pérdida).

¿Cómo es esto posible?

La verdad es que la primera vez que se ve, sorprende que una misma imagen, usando además el mismo algoritmo de compresión, pueda ocupar cerca de la mitad sin perder ni calidad, ni compatibilidad, ni nada. La explicación de cómo puede hacerse esto está en dos motivos principales.

Una primera forma de reducir el tamaño de una imagen es analizándola bien, mirando a ver si se está usando más espacio para los datos de la misma del que realmente se necesita. Por ejemplo, si tenemos una imagen en la que sólo se usan 256 colores, pero está guardada como una imagen de 16 millones de colores, cada píxel está usando 24 bits, cuando le bastaría con 8. Esto implica que la imagen está ocupando el triple de espacio del que realmente necesita. Aún es posible hilar más fino, de manera que, si la imagen usa exactamente 46 colores, ni siquiera es necesario guardar una paleta de 256.

La segunda forma de reducir tamaño es alterando los parámetros de la compresión. Sin entrar en los detalles concretos del algoritmo de compresión que usa el formato PNG, se puede decir que éste se basa en almacenar diferencias de una sección de la imagen a otra. Es decir, que si al comprimir la imagen se ha detectado un bloque de píxeles blancos, y a continuación se encuentra un bloque igual, no se vuelve a almacenar este último sino que se guarda solamente una referencia que viene a decir “aquí va uno como el anterior”, reduciendo así el espacio que ocupa la imagen. Aquí es donde el formato PNG es flexible, ya que permite “explorar” la imagen de diferentes maneras, de forma que dependiendo de cómo se haya hecho la exploración se conseguirá una mejor o peor compresión para una imagen dada.

Lo ideal en este caso sería probar todas las posibles combinaciones de compresión de una imagen, quedándonos con la que haya conseguido un menor tamaño de fichero. Debido a que esto llevaría un cierto tiempo, la mayoría de programas no hacen nada parecido, consiguiendo compresiones francamente mejorables. Afortunadamente, existen una serie de utilidades que permiten hacer exploraciones más exhaustivas. En los próximos apartados veremos algunos de estos programas.

Primera utilidad: OptiPNG

La primera utilidad que vamos a ver es el programa OptiPNG. Como se explica en su página web (http://www.cs.toronto.edu/~cosmin/pngtech/optipng/), se trata de un programa con licencia GPL derivado de otro similar (el PNGCrush) que hace una búsqueda de las diferentes formas de comprimir el PNG, quedándose con la mejor. No hace una búsqueda exhaustiva de todas las combinaciones, ya que llevaría un tiempo considerable, pero usa ciertas técnicas heurísticas que hacen que dé unos resultados muy buenos. Además de probar diferentes compresiones, OptiPNG también analiza la imagen para ver si puede reducir el nº de colores usados, eliminar transparencias no utilizadas, etc.

El programa funciona desde la línea de comandos, y aunque tiene muchas opciones, a continuación muestro (extraído del mismo manual) la combinación de comandos que da los mejores resultados:

optipng –o7 <fichero.png>

El parámetro -o permite indicar el grado de compresión, siendo 7 el máximo. La reducción de colores, etc., se hace automáticamente si no se le indica lo contrario. El resultado de la compresión se guarda con el mismo nombre que tuviese el fichero original, sobrescribiéndolo (siempre que se haya conseguido una mejora, si no lo deja como está).

Compresión al máximo: PNGOUT

Un programa similar a OptiPNG es PNGOUT, que puede bajarse de http://advsys.net/ken/utils.htm (a diferencia de OptiPNG, PNGOUT no es GPL). Si bien el objetivo de PNGOUT y su forma de actuar son similares a los de OptiPNG, la diferencia principal es que, mientras que OptiPNG usa la conocida librería GPL Zlib para comprimir los datos, PNGOUT usa una librería programada por su autor que, a costa de una mayor lentitud, ofrece una mejor compresión. Por otra parte, PNGOUT no hace ningún tipo de análisis de reducción de colores, etc., de modo que es recomendable hacérselo a mano previamente o pasarlo por OptiPNG.

Al igual que OptiPNG, PNGOUT funciona desde la línea de comandos, y su uso no puede ser más simple:

pngout <fichero.png>

En este caso, el fichero de salida será otro, con el mismo nombre y la extensión PN2.

Proceso a seguir

Dado que cada programa tiene sus pros y sus contras, lo mejor es utilizar directamente una combinación de ambos. Dado que PNGOUT generalmente comprime más que OptiPNG, pero PNGOUT no hace ningún tipo de análisis de reducción de paleta, lo que creo que es el proceso óptimo sería:

optipng –o3 imagen.png

pngout /i imagen.png

optipng –o7 imagen.png

De esta manera, se hace una compresión inicial con OptiPNG, indicando con -o3 que no debe ser exhaustiva, aunque sí se hará el análisis de colores completo. A continuación se ejecuta PNGOUT sobre el mismo fichero y, por si acaso OptiPNG encontrase una manera mejor, se ejecuta a continuación. De esta manera se consigue, si no el mejor resultado, uno muy cercano al ideal.

Comparación de tamaños de fichero

Como muestra de los resultados que se pueden obtener usando estas técnicas, la siguiente tabla muestra las reducciones en el tamaño de fichero que se han conseguido sobre diferentes imágenes. Concretamente, se han usado logos de diferentes páginas web (entre ellas la de esta misma página, http://php.apsique.com), comprimiéndolos a PNG de diferentes formas: usando Adobe Photoshop 7, PNGOUT, OptiPNG, y la combinación de OptiPNG y PNGOUT.

La primera conclusión que se puede extraer de los resultados es que la compresión PNG de Photoshop es absolutamente pésima, dando tamaños incluso superiores a los de un GIF. Afortunadamente, la cosa mejora mucho cuando se aplica un programa de optimización de PNGs, consiguiéndose mejoras de más de un 40% en algunos casos. Según los datos, y como se había previsto, los mejores resultados se consiguen combinando el OptiPNG con el PNGOUT. También se observa como no hay un claro vencedor entre OptiPNG y PNGOUT, y, por tanto, dependerá de cada caso ver cuál es mejor de los dos.

Conclusiones

La conclusión de todo esto es que es posible disminuir el tamaño de las imágenes PNG de forma muy considerable, y además sin que eso signifique perder calidad. Dado que el ancho de banda en las redes raramente sobra, es muy recomendable aplicar las técnicas de reducción de tamaño que se han explicado a las imágenes de cualquier web que hagamos. Aunque pueda llevar un cierto tiempo, es algo que sólo hay que hacer una vez, e influirá positivamente tanto en los tiempos de visualización de nuestras páginas percibidos por los usuarios, como en la carga del servidor.