Qué formato de imagen es el mejor para tu página web

763

Recuerda que las imágenes son parte fundamental de cualquier sitio web. Pero cuando se trabaja con ellas debe tenerse en cuenta el equilibrio necesario entre su calidad y el tamaño de descarga. Una página web con imágenes de alta calidad consumirá mucho ancho de banda y será lento a la hora de cargar en los navegadores, lo que puede provocar que los usuarios abandonen el sitio si tarda mucho en mostrarse.

Los formatos de imagen que más se utilizan son

Lo primero que debes de conocer son los distintos formatos de imágenes que pueden utilizarse en una web y saber en qué ocasiones elegir uno u otro.

Los formatos más utilizados actualmente son tres: JPG o JPEGGIF y PNG. Los tres son formatos de imagen de mapa de bits, es decir, que representan una imagen mediante la codificación de los valores del color y de la transparencia de cada píxel en contraposición a los formatos vectoriales (como SVG) que almacenan líneas, puntos y polígonos para crear la imagen.

La gran ventaja de los formatos de mapa de bits es que permiten una gran compresión de la información, dando lugar a archivos poco pesados. Sin embargo, cuando se realiza un zoom sobre ellos, la imagen puede acabar distorsionada o difuminada, apareciendo los tan odiados píxeles. Por consiguiente, saber optimizar las imágenes para que parezcan de buena calidad y tengan poco tamaño de bytes es una labor que exige cuidado y conocimiento.

Una imagen de mapa de bits no es más que una cuadrícula con dos dimensiones de píxeles (alto y ancho). A modo de ejemplo, una imagen de 200 x 200 píxeles tiene un total de 40.000 píxeles, cada uno de los cuales tendrá un valor RGBA (RedGreenBlueCanal Alfa o Transparencia) y esta información ocupará un total de 4 bytes (32 bits) por cada píxel. De modo que una imagen de 200 x 200, sin ningún tipo de optimización o comprensión, tendrá un tamaño de 160.000 bytes = 156 Kbytes. Fácilmente se puede ver que este tamaño es demasiado grande para los estándares de una página web con una imagen de pequeñas dimensiones. Por eso se utilizan formatos de imagen que comprimen la información.

JPG o JPEG (Joint Photographics Experts Group)

Éstas imágenes suelen tener extensión .jpg o .jpeg y es el formato más utilizado actualmente. Es un algoritmo de compresión con pérdidas o lossy (que no permite la reconstrucción del original a partir del archivo comprimido), que se basa en que el ojo humano capta mejor los cambios de brillo que los de color y que percibe mejor estos cambios en zonas de color homogéneo que en los bordes de los objetos de la imagen. El algoritmo matemático en que se basa quita toda la información no esencial para el ojo humano.

GIF (Graphic Interchange Format)

Fue el primer formato de imagen utilizado en la Web, ya que se creó pensando en un método de comprimir imágenes para ser compartidas en redes de ordenadores. Las imágenes tienen la extensión .gif.

Estas imágenes tienen como característica que las hace únicos dentro de estos tres formatos de imagen y es que permite ser animado. Un GIF puede tener varias imágenes o frames que se pintan en distintos períodos de tiempo simulando un vídeo. Por esa razón, su utilización está actualmente aumentando en la Web. También es posible realizar imágenes con fondo transparente, aunque en una implementación algo limitada, ya que solo puede tener dos valores: todos los píxeles son transparentes u opacos, no se puede especificar un valor de transparencia para cada uno de ellos.

PNG (Portable Network Graphics)

Sus imágenes tienen extensión .png y permite almacenar información con mayor profundidad de contraste y calidad.

Utiliza un algoritmo de compresión sin pérdidas que fue diseñado específicamente para ser utilizado en páginas web y por eso tiene una serie de características interesantes en este contexto: incluye un amplio rango de profundidades de color, tiene un sofisticado sistema de transparencia, un entrelazado óptimo y correcciones automáticas según el gamma del monitor e incluso puede almacenar pequeñas descripciones textuales sobre la imagen que pueden ser rastreadas por los motores de búsqueda web.

¿Qué formato elegir en cada caso?

Bueno lo primero que debes preguntarte es:

1. ¿Es necesaria una animación?

Si es así, el formato que debe elegirse es, sin discusión, el GIF, el único que lo permite (aunque existen algunas implementaciones de PNG que también lo hacen, como APNG o MNG, pero no son tan ampliamente soportadas por los navegadores web). Pero ténganse en cuenta sus limitaciones de color (solo 256) y de transparencia (lo es toda la imagen o no lo es). El tamaño, en cualquier caso, siempre es reducido.

2. ¿Necesita conservarse los detalles de la imagen con precisión y con la mejor resolución?

Si la respuesta es sí, debe elegirse el formato PNG, pues su algoritmo de compresión es sin pérdidas. La siguiente decisión en este caso es seleccionar la paleta de colores más adecuada, pues de ello dependerá que el tamaño del archivo sea más o menos grande. Si se necesitan menos de 256 colores tendrá que elegirse un PNG-8. Si es para una fotografía se usará el PNG-24, sabiendo que los archivos PNG siempre serán, en igualdad de condiciones, de mayor tamaño que los JPG.

3. En cualquier otro caso, la elección más adecuada es el formato JPEG, aunque deberá experimentarse con las distintas opciones de compresión para llegar a un tamaño adecuado sin una pérdida apreciable de la calidad de la misma.

En todo caso recuerda que la elección de tus imágenes y su formato marcarán la diferencia en tu página web.