Qué formatos de imagen es mejor para la web

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 de las mismas. Un sitio web con imágenes de alta calidad consumirá mucho ancho de banda y será lento a la hora de renderizarse en los navegadores, lo que puede penalizar el comportamiento: los usuarios abandonarán el sitio web si tarda mucho en mostrarse.

Los formatos de imagen utilizados en la web

Por lo tanto, es necesario conocer 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 JPEG, GIF 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, apreciándose los 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 (Red, Green, Blue, Canal 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 la web en una imagen de pequeñas dimensiones. Por eso se utilizan formatos de imagen que comprimen la información.

Seguidamente se describirán los tres formatos de imagen para luego dar una serie de pautas sobre cuándo utilizar cada uno de ellos. Por último, veremos como podemos optimizar imágenes usando software de edición de imágenes como Adobe Photoshop o GIMP.

JPG o JPEG (Joint Photographics Experts Group)

Las 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.

JPG dedica, en principio, 24 bits a cada píxel para almacenar su información, con lo que puede trabajarse con más de 16 millones de colores distintos. Pero a la hora de aplicar la comprensión, podemos elegir una serie de parámetros para controlar la conversión como el grado de compresión, que se indica con un porcentaje. Como norma se considera que un 80 % es una imagen de alta calidad, un 50 % de calidad media y un 10 % de baja calidad. En la web es común trabajar con valores de entre el 70 y el 80 %.

Además, JPG permite guardar las imágenes en modo progresivo, es decir, que la imagen se carga en varias fases, una opción de interés cuando se trabaja con conexiones lentas, aunque produce archivos algo más pesados. También es posible suavizar la imagen para evitar bordes demasiado pixelados, aunque ello suele causar el desenfoque del conjunto de la imagen.

El formato JPG es el recomendado para trabajar con imágenes con miles o millones de colores: fotografías, imágenes con gradientes... Pero no es adecuado para imágenes con texto, formas simples o que contengan grandes bloques monocolor porque genera bordes llenos de ruido. Además, una imagen JPEG no puede soportar transparencias.

GIF (Graphic Interchange Format)

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

Al contrario que JPEG, GIF es un formato de compresión sin pérdidas, es decir, que permite la reconstrucción del original pues guarda la información de color y transparencia de cada píxel y no distorsiona la imagen. Sin embargo, solo trabaja con 8 bits para cada píxel, lo que permite disponer únicamente de 256 colores distintos. Ante esta limitación de colores, GIF utiliza una serie de métodos de tramado (dithering) para simular colores que no existen dentro de la paleta de colores limitada que GIF tiene disponible.

Pero GIF tiene una característica que le hace único dentro de estos tres formatos de imagen: 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.

Cuando se elabora un GIF con un editor de imágenes pueden además elegirse dos características adicionales. Aunque se ha dicho que, por defecto, GIF usa 256 colores, es posible variar esta paleta de colores y definir que use 32, 16 u 8 colores únicamente, consiguiendo tamaños de imagen aún menores. También puede crearse un GIF entrelazado que permite a dispositivos lentos cargar una imagen que se construye de forma gradual en la pantalla sin esperar a que se pinte línea a línea.

GIF es ideal para crear imágenes de colores limitados como iconos, botones, textos en imagen y, sobre todo, para realizar animaciones gráficas sencillas.

PNG (Portable Network Graphics)

El formato PNG surgió en 1996 como alternativa al GIF cuando este formato no era de licencia libre. Sus imágenes tienen extensión .png y permite almacenar información con mayor profundidad de contraste, con mayor 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.

PNG soporta varias profundidades de color o canales: escala de grises (1 canal), escala de grises con transparencia (2 canales), canales rojo, verde y azul (RGB) o color verdadero (3 canales) y color verdadero con transparencia (4 canales). Según cuantos canales sean utilizados será el número de colores o de grados de transparencia que pueda utilizarse. El PNG-8 o PNG indexado solo utiliza 256 colores. El PNG-24 usa el mismo número de colores que JPEG.

La compresión que utiliza PNG permite utilizar una paleta con millones de colores preservando un alto grado de resolución, por lo que las imágenes son de alta calidad aunque con tamaños de archivo más grandes que los que genera JPG.

Por otro lado, PNG es el formato más adecuado cuando se necesitan imágenes transparentes de calidad en las que pueda decidirse qué píxeles son transparentes y en qué grado. También se utiliza ampliamente en capturas de pantalla y es mejor para presentar imágenes de texto que el formato JPG. Y, por supuesto, es el formato preferido para los logos o los fondos de página por su capacidad de manejo de la transparencia.

¿Qué formato elegir en cada caso?

Cuando se necesita crear una imagen para la web es recomendable realizar el proceso siguiente a modo de preguntas:

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.

El tamaño de las imágenes

Los formatos de imágenes ayudan a optimizar las imágenes tratando de minimizar la información de color que almacenan sus píxeles: cuantos menos bits sean necesarios, más ligera será la imagen.

Pero el otro modo de bajar el peso en kilobytes de una imagen es controlar su tamaño. Debe asegurarse siempre que la imagen subida a la web no es más grande que el espacio destinado a su visión. Redimensionar una imagen reduce el número de píxeles de la fotografía y también el número de bytes necesarios para dibujarla en el navegador. A modo de ilustración, si se dispone de una imagen de 250x250 píxeles y el espacio destinado a mostrarla es únicamente de 200x200, el ahorro final es de 2.500 píxeles, es decir, 10 KB menos de peso en una imagen sin comprimir.

Redimensionar la imagen no es lo mismo que modificar o escalar la imagen en la web mediante código HTML. De este modo se ve adecuadamente en la web, pero la imagen tienen un tamaño mayor del necesario.

Por lo tanto, una labor incluso previa a la optimización de la imagen es reducirla a la anchura y altura adecuadas para la página web donde se va a colocar.

Optimización con Photoshop y GIMP

Los editores de imágenes como Photoshop o la alternativa en software libre GIMP permiten controlar todos los aspectos de la optimización de imágenes.

Ambos pueden variar el tamaño de la imagen y además asegurar que la imagen no se distorsione en esta acción bloqueando la relación de aspecto entre altura y anchura. GIMP en el menú Imagen > Escalar imagen; en Photoshop en Imagen > Tamaño de imagen.

Cuando se crea una imagen en cualquiera de estas dos herramientas se trabaja con formatos nativos, de la misma de forma que pueden ir añadiéndose capas, efectos, etc. Son PSD en Photoshop y el XCF en GIMP. Pero estos tipos de imagen no pueden ser utilizados en la web y es necesario convertirlos a alguno de los formatos anteriormente explicados: JPG, GIF o PNG.

Es este momento cuando debe tomarse la decisión sobre qué formato utilizar y qué parámetros de la conversión quieren controlarse o experimentarse. Si se está utilizando GIMP, debe irse al menú Archivo > Exportar como y elegir cualquiera de los tres formatos. En Adobe Photoshop se encuentra en el menú Archivo > Guardar como. Dependiendo del formato elegido, aparecerán estas opciones:

• GIF, si se quiere un GIF entrelazado o, si PSD o XCF tienen varias capas, si se desea crear un GIF animado especificando el retraso en milisegundos.
• JPG. Lo primero es seleccionar la calidad de compresión. Además, hay algunas opciones avanzadas: si se quiere crear una imagen progresiva, con qué cantidad de suavizado e incluso otros, modificar algunos parámetros de la compresión con submuestreos o distintas variantes del algoritmo matemático.
• PNG. En este caso puede definirse el nivel de compresión si se guarda información del color de fondo, gamma o si se desea crear una imagen entrelazada.