La importancia de tener un favicon.ico

Cada vez que el navegador solicita una página de tu servidor hace una petición para descargar el /favicon.ico (a no ser que se cachee, como veremos en próximos artículos). Hay otros casos en los que también se solicita el favicon, como cuando se guarda en favoritos.

El problema está en que tanto si tenemos favicon como si no, estas peticiones se realizan. Si tienes el favicon el servidor web lo devolverá sin problemas, y en caso contrario devolverá un error 404 (no aparecerá el favicon en la barra de direcciones). Si consigues hacer tu favicon pequeño y cacheable es mucho más eficiente tener el favicon que estar generando errores.

Además está el tema de la usabilidad (con navegadores con pestañas puede ser muy útil para el usuario) y “buena imagen”.

Comprimir el favicon.ico al máximo

Los archivos *.ico están diseñados para poder almacenar iconos de distintos tamaños en un mismo fichero, permitiendo mostrar el icono más adecuado en cada momento. En la web, a día de hoy, y a no ser que alguien me diga lo contrario, el único tamaño útil de un favicon es de 16×16 píxels, como se muestran en las barras de direcciones de los navegadores.

Empezaremos desde cero (si ya tienes un favicon.ico puedes pasar el siguiente párrafo). Suponemos que tenemos una imagen PNG o JPG cuadrada de por ejemplo 200×200 píxels, y queremos convertirla en un favicon lo más comprimido posible. Para ello utilizamos uno de los comandos de ImageMagick:

convert imagen.png -resize 16x16 favicon.ico

Una vez que tenemos el favicon creado, vamos a comprimirlo, basándonos en el hecho de que un favicon es tan pequeño que va a necesitar una paleta de colores muy pequeña, probando hasta encontrar un buen equilibrio entre tamaño y calidad. Utilizamos por ejemplo el  favicon de marca.com que ocupa 1.2K. Si intentamos reducir la paleta a 4 colores:

convert -colors 4 favicon.ico favicon_4c.ico

Obtenemos un favicon de 630 bytes, con una calidad muy parecida a la original, por lo que 4 sería el número de colores elegido, consiguiendo una reducción de casi 600 bytes, aunque con otro tipo de iconos la reducción puede ser de varios K.

Si hacemos la prueba de reducir a 8 el número de colores de algunos sitios web importantes obtenemos los siguientes resultados:

Vemos que en todos podemos obtener un favicon de 318 bytes, que es el tamaño recomendado, como el favicon de onizar .

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

Un saludo a tod@s!