A la hora de incluir imágenes en nuestra web o email es importante optimizarlas de cara a asegurarnos una buena velocidad de descarga incluso con velocidades de conexión lentas.

Pero antes de nada recuerda: no crees emails que consistan solo en una imagen (o varias) que contenga toda la información, es imprescindible integrar texto. ¿Por qué te digo esto? Por dos razones: una de ellas es evitar ser considerado Spam, la otra es para proveer información a tus destinatarios antes de que se descarguen las imágenes (y de hecho, información lo suficientemente interesante como para que se animen a darle al botón de descargar imágenes.) Te recomiendo que pruebes tu correo sin imágenes para asegurarte que el mensaje se entiende bien sin necesidad de descargarlas.

Bueno, vamos al grano. Existen muchos formatos de imágenes digitales disponibles, pero sólo unos pocos son verdaderamente óptimos para web y el email. Hay algunos aspectos de estos que es necesario que conozcas de cara a elegir el formato de imagen que mejor se ajuste a tus necesidades.

Lo primero que debes saber es que hay dos tipos de compresión de imágenes: compresión con pérdida y compresión sin pérdida.

Compresión con pérdida significa que cuando guardas una imagen en uno de estos formatos, en realidad estás eliminando parte de la información de la imagen (normalmente superflua) para  que el archivo “pese” menos. Normalmente estas pérdidas no se ven a simple vista, sino que habrá que hacer zoom para apreciar los cambios. Este tipo de imágenes son ideales para web porque ocupan muy poca memoria.

Sin embargo, con los formatos de compresión sin pérdida, podrás volver a editar y guardar la imagen  una y otra vez sin perder calidad. Estos archivos ocupan más memoria (y ancho de banda si hablamos de web y email) y no siempre son los mejores para web, normalmente se usan más para imprimir.

Formatos de imagen más habituales para web y e-mail:

JPEG (Joint Photographic Experts Group)

El formato JPG (cuya extensión es .jpg o .jpeg) entra en la categoría de los archivos de compresión con pérdida y además tiene peculiaridad de que puedes elegir el nivel de compresión en tu software de edición de imágenes.

Está indicado para imágenes con millones de colores, como fotografías, ilustraciones con sombras, degradados, etc…

Lo malo es que jpg no te permite crear imágenes con fondo transparente.

GIF

Este formato es un mapa de bits, que quiere decir que no es más que una rejilla de píxels de colores. Cada uno de estos píxels puede representar hasta 256 colores o ser transparentes.
Además el archivo puede contener varios frames (cuadros) de manera que se puede crear una animación (muchos banners hacen uso de gifs animados) No te recomiendo usar gifs animados en e-mail, ya que Outlook 2007 sólo muestra el primer frame, no la animación completa.

Dado que los editores de imágenes permiten controlar el número de colores de cada imagen, es un buen formato para usar en imágenes con pocos colores y/o matices como gráficas, gráficos pequeños (botones, bullets,…), imágenes que contienen texto…

PNG

Este formato fué concebido como un nuevo GIF pero mejorado, dado que GIF fue patentado. PNG tiene mucha más profundidad de color que GIF , también admite transparencia y tiene un buen nivel de compresión.  Combina lo mejor de JPG con lo mejor de GIF. Por desgracia su transparencia no es soportada por Internet Explorer 6 e inferiores, por lo que hay que recurrir a hacks para que se represente bien.

En algunos programas de email, también puede ocasionar problemas, así que te recomiendo dejarlo más bien para web que para e-mail (me refiero a cuando quieras hacer uso de la transparencia).

¿Y cual es el peso ideal de las imágenes para web?

Bien, esta no es una regla cerrada, depende de la compresión y tamaño que le estés aplicando a las imágenes y si pierden mucha calidad, pero te voy a dar unos parámetros por los que moverte:

De todas maneras hay otro aspecto que influye directamente en el tamaño del archivo en las imágenes, como sus dimensiones en píxels. De eso os hablaré en mi próximo artículo.