La evolución de los formatos de imagen en la web: GIF, JPEG, PNG, WebP y AVIF
Hoy abrimos una página web y las imágenes aparecen casi de inmediato. Pero durante muchos años no fue así. En los noventa -sí, en el siglo pasado- las conexiones a Internet eran muy lentas y cada imagen debía optimizarse al máximo para que la página pudiera cargarse lo menos lento posible.
La historia de la web puede contarse también como la historia de sus formatos de imagen.
GIF, el primer formato de imagen para la web: cómo y por qué se usaba
El formato GIF apareció en 1987, creado por la empresa CompuServe. En ese momento Internet aún no era popular, pero ya existía la necesidad de compartir imágenes en redes con muy poco ancho de banda.
GIF resolvía ese problema con una compresión eficiente y archivos relativamente pequeños.
Sin embargo tenía una limitación importante: solo podía mostrar 256 colores. Esto lo hacía adecuado para gráficos simples, pero no para fotografías.
Durante los años noventa GIF se volvió omnipresente en la web. Los primeros sitios utilizaban este formato para:
- botones
- íconos
- pequeños gráficos
- banners animados
Otra característica que contribuyó a su popularidad fue la posibilidad de crear animaciones simples.
Décadas después, esa misma característica hizo que el formato resurgiera gracias a los memes y reacciones animadas en redes sociales. A veces lo viejo renace con algunas nuevas necesidades o nuevas tecnologías.
Durante varios años el uso de GIF generó controversias ya que su algoritmo de compresión estaba patentado. Esto motivó la creación de un formato alternativo libre: PNG.
JPEG: el formato ideal para fotografías en la web
En 1992 apareció el formato JPEG, desarrollado por el grupo de expertos conocido como Joint Photographic Experts Group.
A diferencia de GIF, JPEG fue diseñado específicamente para fotografías.
Podía representar millones de colores y aplicaba una fuerte compresión que reducía mucho el tamaño de los archivos, eliminando parte de la información visual menos perceptible para el ojo humano. Esto permitió que las fotos comenzaran a aparecer de forma masiva en la web. Además, las fotografías JPEG suelen incluir metadatos EXIF, que almacenan información sobre la cámara, fecha, ajustes y ubicación. Estos datos aumentan el tamaño del archivo y, al exportar a formatos como WebP o AVIF, a menudo se eliminan para optimizar la imagen.
En The Gimp se pueden ver y editar los metadatos desde el menú:
Image → Metadata
- periódicos digitales
- catálogos de productos
- galerías fotográficas
Sin embargo, JPEG también tenía limitaciones importantes. No permitía transparencias y no funcionaba bien para gráficos con texto o bordes definidos. Además, cuando una imagen JPEG se comprime demasiado pueden aparecer pequeñas distorsiones visibles, conocidas como Artefactos de compresión.
Los artefactos aparecen cuando la compresión elimina parte de la información de la imagen. Estas imperfecciones suelen verse como bloques cuadrados en la imagen, bordes borrosos alrededor de líneas o texto ó manchas de color en zonas con degradados.
PNG: la alternativa libre
En 1996 apareció PNG (Portable Network Graphics). Este formato surgió en parte como respuesta a las limitaciones del GIF y a los problemas legales derivados de las patentes sobre su algoritmo de compresión. A diferencia de GIF, que solo permite transparencias simples, PNG puede usar transparencias suaves mediante canal alfa. PNG ofrecía varias mejoras importantes:
- compresión sin pérdida de calidad
- admite millones de colores
- transparencias suaves mediante canal alfa
- iconos
- logotipos
- ilustraciones
- capturas de pantallas
Durante muchos años PNG fue el formato preferido para gráficos web porque mantenía la calidad intacta incluso después de múltiples guardados. El principal inconveniente era que, para fotografías, los archivos solían ser más grandes que los JPEG.
WebP: formato eficiente para imágenes web modernas
En 2010 la empresa Google presentó WebP con el objetivo de reducir el peso de las imágenes en la web moderna. El crecimiento de los teléfonos móviles y el uso intensivo de imágenes hacía necesario encontrar formatos más eficientes. WebP intentó combinar lo mejor de varios formatos anteriores:
- compresión eficiente para fotografías
- compresión sin pérdida para gráficos
- admite transparencia
- admite animación
WebP puede funcionar de dos maneras: con compresión con pérdida (similar a JPEG) o sin pérdida (similar a PNG). En muchos casos WebP puede producir archivos entre 25 % y 35 % más pequeños que JPEG o PNG con una calidad visual similar. Por esta razón muchos sitios web comenzaron a adoptarlo para mejorar el rendimiento de las páginas, especialmente en dispositivos móviles.
WebP sin pérdida o con pérdida
1. Exportar como → nombre.webp
2. Aparece ventana "Exportar a WebP"
3a. Sí tildan lossless (se desactivan las barras de %) y se exportará a WebP cómo un PNG, sin pérdida de datos.
3b Sí no tildan en lossless permiten la pérdida de datos en la imagen, y el WebP se comportará como JPG (lossy).
Ejemplos de compresión WebP
| Fragmento de imagen | Detalle |
|---|---|
 |
Foto 1 WebP con compresión con pérdida (lossy) Calidad 90 %. Archivo pequeño, 18 Kb. Pérdida visual casi imperceptible. |
 |
Foto 2 WebP con compresión con pérdida (lossy) Calidad 50 %. El archivo es mucho más pequeño, 8 Kb. Empiezan a aparecer artefactos. |
 |
Foto 3 WebP con compresión con pérdida (lossy) calidad 10 %. El archivo es mucho más pequeño, 4 Kb. Aparecen artefactos. |
 |
Foto 4 WebP sin pérdida (lossless). La imagen es idéntica a la original, 60 Kb. similar a PNG. |
AVIF: la nueva generación de formatos
Uno de los formatos más recientes es AVIF (AV1 Image File Format), introducido en 2019 por la Alliance for Open Media. AVIF utiliza tecnología derivada de codecs de video modernos y puede lograr compresiones aún más eficientes que WebP. En muchas pruebas AVIF logra archivos aún más pequeños que WebP manteniendo una calidad visual similar. Entre sus características principales se encuentran:
- compresión con y sin pérdida
- admite transparencias
- admite animación
- compatibilidad con alto rango dinámico (HDR)
Aunque todavía no está tan extendido como JPEG o PNG, su adopción va creciendo. Hoy ya puede visualizarse en navegadores modernos como:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
Diferencia entre PNG, JPEG, GIF, WebP y AVIF
| Formato | Año | Tipo de compresión | Transparencia | Animación | Uso típico |
|---|---|---|---|---|---|
| GIF | 1987 | sin pérdida | limitada | sí | animaciones simples |
| JPEG | 1992 | con pérdida | no | no | fotografías |
| PNG | 1996 | sin pérdida | sí | no | gráficos e ilustraciones |
| WebP | 2010 | con y sin pérdida | sí | sí | imágenes web optimizadas |
| AVIF | 2019 | con y sin pérdida | sí | sí | máxima eficiencia |
Qué formato conviene usar
En la práctica cada formato sigue teniendo su lugar dependiendo del tipo de imagen. Elegir el formato correcto puede reducir significativamente el tamaño de una página web y mejorar su velocidad de carga.
| Tipo de imagen | Formato recomendado |
|---|---|
| Fotografías | JPEG, WebP o AVIF |
| Fotografías Modernas | WebP, o AVIF |
| Fotografías Máxima compatibilidad | JPEG |
| Logos e ilustraciones | PNG |
| Capturas de pantalla | PNG o WebP |
| Animaciones simples | GIF o WebP |
| Máxima compresión | AVIF |
Archivo → Exportar como.
En los primeros años el desafío principal era simplemente lograr que las imágenes pudieran cargarse en conexiones de Internet muy lentas. Con el tiempo aparecieron nuevos formatos que mejoraron la calidad, añadieron transparencias o redujeron aún más el tamaño de los archivos. Hoy el objetivo sigue siendo el mismo por lo que cada nuevo formato intenta resolver el mismo problema que existía desde los comienzos de la web: mostrar imágenes de buena calidad utilizando la menor cantidad posible de datos. Y mientras Internet siga evolucionando, también lo harán los formatos de imagen.
Comentarios