¿Todavía usas imágenes PNG sin optimizar?
Publicado el Jueves 16 de Agosto del 2007 @ 2:21 por Armonth.
Los formatos usados para mostrar imágenes en Internet son muy versátiles siempre que se usen bien, actualmente se usan tres formatos con sus propias cualidades: JPG, GIF y PNG.
Veamos algunas (que no todas) de sus principales 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.
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 o se eliminan los colores sobrantes de la paleta.
Sin ser un experto en ello encuentro sumamente útil el uso de pngcrush, 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 perdidas. 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:
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.
Como curiosidad:
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.
15 Comentarios (feed)
-
j_aroche nos comenta:
GIMP 2.3 tiene un plugin para optimizar imágenes para el web, si no tienes que optimizar muchas imágenes de un solo y prefieres lo gráfico, puede ser útil.
-
Ordago nos comenta:
¿Esto es lo mismo que el GIMP con la compresiona al maximo cuando se guarda en .png?
-
magarto nos comenta:
Muy muy interesante. No conocia pngcrush pero creo que para las capturas de escritorio y subidas a internet lo usaré, porque las toqueteaba con The Gimp y era un poco coñazo.
-
Juan nos comenta:
Yo uso estos programas para optimizar el tamaño de imagenes para web y combinandolos se obtienen reducciones del 50-70% facilmente. Sin ir mas lejos hace un rato de una imagen de 28K en principio he terminado colgandola con solo 11K lo ke viene a ser sobre un 62% de reduccion.
A veces la reduccion es pekeña o uno de ellos te evuelve la imagen de un tamaño algo mayor, pero con borrar esa y usar la anterior todo solucionado :D
-
Pablo nos comenta:
Muy buena data, no conocia este programa, me gusta por que parece muy practico. Vamos a ver si lo pruebo y de paso me ahorro una megas de transferencia. Gracias!
-
Reboot nos comenta:
Mierda. Esto me hubiera venido de puta madre para reducir el tamaño de los packs de Ai-Ren.
-
Eduo nos comenta:
Hombre, si corres el pngcrush con un nice alto (o bajo, depende de la perspectiva :) puedes correrlo en el servidor perfectamente y sin causar problemas. Simplemente tardará más pero si en vez de 5 minutos tarda cinco horas poco importa.
Si haces que el script automáticamente reemplace la imagen cuando termina pues el trabajo se hace sólo:
mkdir -p nuevas;mkdir -p viejas 2>/dev/null; for file in *.png; do nice +10 pngcrush -brute "$file" nuevas/"$file"; cp $file viejas/.;cp nuevas/$file ./.;done(En una sola línea porque mola más, se puede copipegar e incluso se puede meter en un cron, si el pngcrush es capaz de no deteriorar la imagen más y más cada vez).
Eso se podría mejorar para que si un fichero existe en “viejas” no lo re-optimice (más que nada para no trabajar en vano).
Aún así hay que tener cuidado con las compresiones. Si no son lossless se arriesga caer en la falacia de la compresión de JPG, donde se llega a perder mucho más de lo que se cree y se pierde la original.
-
Armonth nos comenta:
Eduo no está mal, pero como tú dices hay que revisar los originales por si acaso, aunque sea a vuelo pluma por lo que reemplazarlas puede no ser lo mejor.
-
leon nos comenta:
hice la prueba con un archivo jpg inicial de 600kb, lo abri con gimp y lo guarde como png
tamaño inicial 5.4MB
con pngcrush 5.2MB
con pngnq 1.7MB
con pngquantum (256 colores) 1.7MBsi creo el archivo png con convert a partir del jpg me genera un archivo de 5.2MB
usar el nivel de “compresion” maximo a la hora de guardar el png con gimp no sirve de casi nada
saludos
-
Lanselot nos comenta:
Seguramente será que no me entero bien de qué va el tema, pero la gracia del png no era precisamente que es lossless?
-
Armonth nos comenta:
Lanselot sí, los métodos de compresión/filtros dan como resultado imágenes más optimizadas (menor tamaño) sin perdidas asociadas a la misma.
-
K3NNY nos comenta:
Cuando usaba GIMP optimizaba mis PNGs con PNGCrush, pero desde que tengo el Photoshop (si, soy un hereje) ya no hace falta usar el PNGCrush, porque uso la opción de “guardar para web” que me permite optimizar las imágenes a gusto, y de diferentes formas según la imagen.
De todas formas, no siempre tengo ganas de abrir el Photoshop para optimizar una imagen, y como tengo el PNGCrush agregado al menu contextual de windows, optimizar imágenes con PNGCrush es rapidísimo.
-
Nukeador nos comenta:
Acabo de probar con pngcrush y con pngnq.
Mucho mejor resultado con pngnq, me detecta mejor los colores de la imagen a usar y me ha reducido un png de 108kb a 25kb, mientras que pngcrush decía que no había ningún filtro mejor y me lo dejaba en 108kb.
-
Armonth nos comenta:
Nuke… en principio pngcrush funciona bien pero no es perfecto, hay casos que puede fallar y es en esos que es mejor probar otras opciones o “hacerlo a mano” :-)
-
Daniel G. Blázquez nos comenta:
Os recomiendo PNGOUT. Utiliza un algoritmo muy currado de compresión y es, de momento, el que comprime más los PNG’s.
