¿Todavía usas imágenes PNG sin optimizar?

Los formatos usados para mostrar imágenes en Internet son muy versátiles siempre que se usen bien. Actualmente se usan principalmente tres formatos con sus propias cualidades: JPG, GIF y PNG.

Veamos a modo de resumen algunas (que no todas) de sus propiedades:

• JPG sirve para:
  • Mostrar imágenes con muchos colores a un tamaño reducido.
  • Imágenes con perdidas.
• JPG sin embargo no es bueno para:
  • Mostrar imágenes en las que predomina el texto.
• GIF sirve para:
  • Mostrar animaciones fotograma a fotograma.
  • Imágenes con poca variedad en la paleta de colores.
• GIF sin embargo no es bueno para:
  • Imágenes con mucha variedad de color y grandes (el tamaño se dispara).

PNG es un perfecto sustituto de GIF si no contamos las transparencias no soportadas por Internet Explorer (que se pueden arreglar usando un "hack") o las animaciones para las cuales existe MNG pero todavía no tiene amplio soporte de navegadores. También sustituye, en algunos casos, al JPG pero no siempre por relación compresión / peso en kB.

Sin embargo muchos programas como Photoshop usan unos valores por defecto que hacen que la misma imagen guardada en PNG tenga un tamaño muy superior a los GIF. Eso es debido a que entre otras cosas no se usa un valor alto de compresión y no se eliminan los colores sobrantes de la paleta.

Sin ser un experto en ello encuentro sumamente útil el uso de pngcrush. PNGcrush es un programa por interprete de comandos para GNU/Linux que está en la mayoría de distribuciones e intenta optimizar las imágenes en PNG sin perder información¹. El funcionamiento básico de pngcrush es muy sencillo:

pngcrush fichero-original.png fichero-optimizado.png

Ahora bien, lo divertido es cuando uno tiene la CPU ociosa ya que puedes llevarte alguna que otra sorpresa. Vamos a utilizar el modo brute force (prueba 114 filtros/métodos de compresión diferentes) en todas las imágenes. Cabe aclarar que esto es mejor hacerlo en tu máquina y no en un servidor/host ya que puede consumir bastante.

cd ruta-a-nuestras-imagenes/
mkdir nuevas
for X in *.png; do pngcrush -brute "$X" nuevas/$X; done

Lo que hacemos con esto es ir a donde guardamos todas las imágenes para crear un directorio "nuevas" y procesar una a una todas las imágenes PNG. La versión optimizada con el mismo nombre es guardada en el directorio "nuevas". No todas las imágenes se optimizan pero en general los resultados no son malos si algun filtro de los usados sirve:

ls -l *.png | awk '{print $5,$8}'   
766K bigtux.png   
500K crownflower.png   
51K eien.png   
1.1M fear.png

ls -l nuevas/*.png | awk '{print $5,$8}'   
518K bigtux.png   
484K crownflower.png   
35K eien.png   
932K fear.png

Hay métodos mejores de optimizar (realmente casi todo lo que hace pngcrush se puede hacer con Photoshop, The Gimp, etcétera) pero aquí la "belleza" está en que lo haga un programa con todas las imágenes sin tener que darle valores a cada una (el programa termina eligiendo la que mejor ratio de compresión dá) mientras uno se toma un café o sale a tomar el aire.

Creo que ya debéis estar incluso hartos de que sea tan quisquilloso con el ancho de banda pero como siempre digo esto es economía de escala: a medida que crece un sitio unos pocos KB se convierten en muchos MB o incluso GB de ancho de banda. Así que cosas como esta, aparte de curiosas, a la larga son un gran ahorro:

du -chs wp-content/uploads/*.png   
...   
164M total

du -chs wp-content/uploads/nuevas/   
...   
127M total

Sacado de un blog del cual no puedo decir el nombre. Sin embargo quitarse un 22% del tamaño total con algo tan fácil como guardarse las imágenes PNG en el PC, pasarle un comando y volver a subirlas (y todo esto por no saturar la CPU del servidor) no tiene precio.

Actualización: pngnq

Varios lectores me decís en los comentarios acerca de pngnq. Como ya decís pngnq es un programa parecido al pngcrush pero que da imágenes con un tamaño mucho menor.

Aunque esto último es cierto, cabe destacar lo que dice el proyecto. Yo utilizo los PNG cuando quiero tener imágenes sin perdidas (aparentes).

Mientras que esto lo hace pngcrush (comprimiendo, eliminando colores de la paleta que no se utilizan y en general información que sobra) con mejoras desde pequeñas (unos pocos KB) a grandes (-25% o incluso -35%) el que me comentáis pngnq lo que hace es una cuantificación y como ya indica el enlace es con perdida. Sirva de ejemplo sus propios tests nada malos por cierto.

Resumiendo: si quieres eliminar información extra y no quieres perdidas (optimizar) usa pngcrush. Si lo que quieres es reducir de forma importante el tamaño (aunque tenga perdidas y ligeramente visibles al ojo humano) entonces usad pngnq.