En este primer post vamos a tratar el tema de las imágenes en web, que suelen suponer entre el 30% y 60% del peso total de una web (el resto es HTML, CSS y JavaScript). Una cantidad lo suficientemente importante como para tenerla en cuenta.

Antes de empezar, échale un vistazo rápido a tu web y aprecia su belleza, con sus degradados, sus cajas redondeadas, sus imágenes de fondo, sus títulos con fuentes preciosas… ¿es necesario todo eso? Eso es lo primero que deberías plantearte, ya que menos imágenes = web más rápida. Pero como todos conocemos a diseñadores, gente de marketing y clientes/jefes que piensan que cuanto más bonita sea una web más éxito va a tener (lo mismo que pensó Google), y estamos muchas veces atados de manos, vamos a ver como podemos optimizar un poco el desastre que hayan creado entre todos.

Formatos de imagen

Tenemos 3 formatos de imagen principales para web: JPG, PNG y GIF, lo que no quiere decir que un navegador no sea capaz de mostrar otro tipo de imágenes, como BMP o ICO. Si estás leyendo este blog quiero pensar que nunca usarás imágenes BMP en web.

Cada formato de imagen está pensado para un determinado uso, y no respetando esto puedes estar incrementando el peso de la web. Podemos dividir las imágenes en dos tipos:

• Gráficos: El número de colores utilizados es relativamente pequeño. P.ej: logos, iconos, dibujos, gráficos…
• Fotos: Las fotografías pueden contener millones de colores.

Por norma general, debemos usar JPG para fotos y PNG/GIF para gráficos.

¿PNG o GIF?

Esta es la típica pregunta que te sueles encontrar en foros y la respuesta es muy sencilla: siempre se debe usar PNG excepto en animaciones (gif animados). Normalmente, una imagen PNG será más pequeña que una imagen GIF, y además soporta transparencias reales. GIF solamente permite transparencias “binarias”, es decir, este pixel es transparente o no.

El único caso en el que debes utilizar imágenes GIF es en animaciones. Aquellos que todavía os preocupeis del soporte de las transparencias en PNG del viejo y obsoleto Internet Explorer 6, este no es vuestro blog.

Optimización de imágenes

Ahora que sabemos el tipo de imagen que debemos utilizar en cada caso, vamos a ver como podemos optimizarlas de forma automática (con un script) y sin perder calidad.

PNG

Según la especificación del formato PNG, la información se almacena en bloques, pero la mayoría de estos bloques no son necesarios para la visualización de la imagen en una web, por lo que se pueden eliminar de forma segura y sin ninguna pérdida de calidad.

Dos programas gratuitos que te pueden ayudar a limpiar estos bloques son: pngcrush y optipng.

pngcrush -rem alla -brute -reduce original.png optimizada.png

Elimina todos los bloques excepto el alpha (-rem alla), utilizando todos los métodos de optimización posibles (-brute, es más lento) e intentando reducir el número de colores de la paleta (-reduce).

JPG

En las imágenes JPG, el objetivo es eliminar la metainformación que se incluye junto a la imagen (comentarios, información sobre el programa que lo ha generado o datos EXIF). Podemos utilizar el programa jpegtran (en Ubuntu, instalar el paquete libjpeg-progs) para eliminar esta información:

jpegtran -copy none -optimize original.jpg > optimizada.jpg

GIF

En el caso de los gif animados podemos utilizar el programa gifsicle para reducir algo su tamaño.

gifsicle -O2 original.gif > optimizada.gif

En caso de que tengamos imágenes GIF y queramos pasarlas a PNG de una manera sencilla podemos usar ImageMagick.

convert imagen.gif imagen.png

Sabiendo todo esto, podemos crear un script en Linux que automáticamente optimice las imágenes.

#!/bin/bash
PNGFILES="*.png"
JPGFILES="*.jpg"
GIFFILES="*.gif"

# Imágenes PNG
for f in $PNGFILES
do
	pngcrush -rem alla -brute -reduce -q $f $f.temp
	mv $f.temp $f
	rm -f $f.temp
done

# Imágenes JPG
for f in $JPGFILES
do
	jpegtran -copy none -optimize $f > $f.temp
	mv $f.temp $f
	rm -f $f.temp
done

# Imágenes GIF
for f in $GIFFILES
do
	gifsicle -O2 $f > $f.temp
	mv $f.temp $f
	rm -f $f.temp
done