Formatos para la web en Diseño Grafico

FORMATOS PARA LA WEB: GIF, JPEG y PNG

Los formatos de mapa de bits más habituales para la web son GIF, PNG y JPEG. Cada uno tiene características distintas que lo hacen más adecuado para un tipo de gráfico.
GIF (Graphics Interchange Format) es un formato desarrollado en 1987 por Compuserve Inc. para el intercambio de gráficos en Internet. Desde entonces, es uno de los formatos más usados para los gráficos en la web. GIF codifica los gráficos hasta 8 bits por lo que admite paletas de 256 colores o menos. Es adecuado para gráficos con colores planos y/o líneas finas.

En 1989 Compuserve sacó una nueva versión llamada GIF89a que incorpora la posibilidad de designar uno o varios colores de la paleta como transparente, conocido como transparencia de índice. Ello es útil cuando se quiere tener un gráfico silueteado sobre el fondo de una página web.

Otra variante es el GIF animado que se compone de una secuencia de diferentes fotogramas en formato GIF. La sucesión de estos hará que veamos una secuencia animada. Para realizar este tipo de GIF se puede recurrir a programas creados con este fin, o a otros que incorporan un módulo de animación GIF como Fireworks. El formato GIF usa un LZW como algoritmo de compresión (sin pérdida de calidad).

El GIF incorpora junto a la imagen la paleta de colores que se ha usado. Es una paleta indexada, lo que significa que cada color tiene asignado un número mediante el cual se indica en la imagen el color con el que se representará cada píxel. Si una imagen tiene muchas variedades de un color es posible incorporar una paleta con todas ellas al precio de reducir el resto de colores. Podríamos, por ejemplo, definir una paleta con 256 tonalidades de rojo; pero la imagen sólo podría usar esas tonalidades y no otros colores.

Los GIF, excepto la variante animada, permiten ser almacenados como entrelazados. Esta opción es útil para la web, ya que permite que una imagen se vaya viendo a medida que se descarga, de esta manera nos podemos hacer una idea de la imagen que aparecerá en ese lugar.

Las imágenes JPEG admiten carga progresiva, parecida a la carga entrelazada. Este tipo de carga permite que cuando empiezan a llegar los datos de la imagen del servidor se dibuje una versión de baja definición (con aspecto muy pixelado) y conforme se va descargando la imagen se van haciendo barridos progresivos que aumentan su resolución hasta llegar a la versión final.

Curso de Diseño Gráfico

Sistemas de compresión

Los sistemas de compresión reducen la memoria que ocupa un archivo. Comprimir puede ser necesario para que ocupe menos espacio al almacenarlo en el disco pero se hace imprescindible cuando este archivo debe transferirse o publicarse en Internet. A menor tamaño de archivo, mayor rapidez en la transferencia de los datos. Una vez se tienen los datos el archivo se descomprime y se muestra.
La descompresión también representa una pérdida de tiempo, pero en general, para los sistemas de compresión/descompresión y las capacidades de procesamiento de los dispositivos electrónicos actuales, el tiempo perdido en la descompresión es menor al ganado por la bajada en el tamaño del archivo.

De algún modo lo que hacen los sistemas de compresión es eliminar redundancia y «resumir» la información a almacenar. Esto puede hacerse de dos formas:
• Con pérdida de datos: equiparar información parecida a un solo valor (por ejemplo, varios tonos de azul a un solo azul). Se resume la información, perdiendo detalles. La información destruida no se recupera en la descompresión. Este tipo de compresión es la usada, por ejemplo, en el formato JPEG.
• Sin pérdida de datos: se buscan formas de optimizar el registro de los datos eliminando la información redundante y simplificando la forma de expresarla. Toda la información «reducida» se vuelve a recuperar en la descompresión. Este tipo de compresión es la usada, por ejemplo, en los formatos TIFF, GIF o PNG.

LZW (Lempel-Ziv-Welch) es el algoritmo que usa el formato GIF y, opcionalmente, el formato TIFF para comprimir los gráficos (también la utiliza pdf). Se trata de un sistema de compresión sin pérdida de datos. A grandes rasgos se puede decir que dicho algoritmo realiza una codificación de secuencias consecutivas de valores de color, reduciendo al máximo la redundancia en la repetición de secuencia.
El sistema de compresión Deflate/Inflate que usa PNG es un derivado de LZ77 (el algoritmo usado en zip, gzip, pkzip, etc.). El sistema sería similar al que hemos descrito en la ilustración del apartado anterior pero optimizado, pues introduce varios filtros que preprocesan la información de color para lograr una codificación más eficiente. Es también un sistema de compresión sin pérdidas.
El sistema usado por JPEG es muy bueno comprimiendo imágenes fotográficas, pero no con imágenes de colores planos o con líneas finas muy contrastadas. Básicamente, lo que hace este algoritmo es guardar la imagen separando la información de brillo de los matices de color y elimina las diferencias de color sutiles que no podemos apreciar, por eso es un formato de compresión que genera un proceso de pérdidas. Por muy poco que queramos comprimir, siempre se pierde información. Como ya se ha dicho, se puede controlar el nivel de compresión, y cuanto mayor sea la compresión aplicada, menor será la calidad de la imagen y el volumen del archivo.

Vea nuestro Máster en Diseño Gráfico

1. Principales formatos de imagen para la web

1.1. JPEG (Joint Photographic Experts Group)

• Uso: Fotografías e imágenes complejas con gradientes.
• Ventajas:
  • Alta compresión, lo que reduce el tamaño del archivo.
  • Compatible con todos los navegadores y dispositivos.
• Desventajas:
  • Pérdida de calidad en cada compresión (formato con pérdida).
• Ideal para:
  • Fotografías en páginas web.
  • Diseños que prioricen el tamaño sobre la calidad.

1.2. PNG (Portable Network Graphics)

• Uso: Imágenes con fondos transparentes y gráficos detallados.
• Ventajas:
  • Soporta transparencia (canal alfa).
  • No tiene pérdida de calidad (formato sin pérdida).
• Desventajas:
  • Tamaño de archivo mayor que JPEG.
• Ideal para:
  • Logotipos, iconos y gráficos web.
  • Diseños donde la calidad es prioritaria.

1.3. GIF (Graphics Interchange Format)

• Uso: Animaciones simples e imágenes con pocos colores.
• Ventajas:
  • Soporta animaciones ligeras.
  • Compatible con todos los navegadores.
• Desventajas:
  • Limite de 256 colores.
  • No adecuado para imágenes fotográficas o de alta calidad.
• Ideal para:
  • Animaciones web simples.
  • Gráficos con pocos colores, como diagramas.

1.4. SVG (Scalable Vector Graphics)

• Uso: Gráficos vectoriales escalables.
• Ventajas:
  • Escalabilidad sin pérdida de calidad.
  • Editable y ligero en tamaño.
  • Compatible con animaciones y scripts.
• Desventajas:
  • No apto para imágenes rasterizadas o fotográficas.
• Ideal para:
  • Logotipos, iconos y gráficos interactivos en la web.
  • Diseños responsivos para sitios modernos.

1.5. WebP

• Uso: Imágenes optimizadas para la web (combinación de calidad y tamaño reducido).
• Ventajas:
  • Compresión más eficiente que JPEG y PNG.
  • Soporta transparencia (como PNG) y animaciones (como GIF).
  • Compatible con la mayoría de navegadores modernos.
• Desventajas:
  • Puede no ser compatible con navegadores antiguos.
• Ideal para:
  • Imágenes web optimizadas, tanto fotográficas como gráficas.

2. Formatos adicionales para elementos gráficos en la web

2.1. ICO (Icon Format)

• Uso: Favicons de sitios web.
• Ventajas:
  • Específico para íconos en navegadores.
  • Soporta múltiples tamaños en un solo archivo.
• Desventajas:
  • Usabilidad limitada fuera de los íconos.
• Ideal para:
  • Favicons y pequeños íconos en la interfaz web.

2.2. AVIF (AV1 Image File Format)

• Uso: Imágenes de última generación con alta calidad y tamaño reducido.
• Ventajas:
  • Mejor compresión que WebP.
  • Soporte de transparencia.
  • Compatible con HDR.
• Desventajas:
  • Aún no es compatible con todos los navegadores.
• Ideal para:
  • Imágenes modernas optimizadas para carga rápida.

3. Comparación de formatos más usados

4. Elección del formato según el propósito

1. Para imágenes fotográficas:
   • WebP o JPEG: balance entre calidad y tamaño.
2. Para gráficos con transparencia:
   • PNG o WebP.
3. Para animaciones ligeras:
   • GIF o WebP.
4. Para gráficos vectoriales:
   • SVG.
5. Para íconos del navegador:
   • ICO.

5. Consejos para optimizar imágenes web

1. Usar herramientas de compresión:
   • TinyPNG, Compressor.io, o Squoosh para reducir el tamaño sin perder calidad.
2. Elegir el formato adecuado:
   • Considera el propósito y el tipo de contenido.
3. Testear la compatibilidad:
   • Asegúrate de que el formato sea compatible con los navegadores objetivo.
4. Implementar carga diferida (lazy loading):
   • Mejora la velocidad de carga del sitio al cargar imágenes solo cuando sean visibles.
5. Convertir imágenes a formatos modernos:
   • Utiliza WebP o AVIF para lograr la mejor combinación de calidad y tamaño reducido.