Formatos de imagen web

En un panorama digital donde los contenidos visuales reinan, la demanda de formatos de imagen web eficientes y de alta calidad nunca ha sido mayor. Descubra los secretos de los formatos de nueva generación en el navegador, que prometen redefinir la forma en que consumimos y compartimos la información visual. Este artículo se centra en los formatos de imagen que admiten directamente los navegadores modernos.

Los formatos de imagen con pérdida son formatos de imagen que utilizan compresión con pérdida. La compresión con pérdida significa que los datos de la imagen se comprimen de forma que se pierde algo de información. La compresión sin pérdida significa que los datos de la imagen se comprimen de forma que no se pierde información. Por ejemplo, para las capturas de pantalla, la compresión sin pérdida sería mejor, porque el texto de la captura de pantalla sería más legible.

GIF

El Formato de Intercambio de Gráficos (GIF) es un formato de imagen de mapa de bits que fue introducido en 1987 por CompuServe. GIF utiliza un algoritmo de compresión especial que se basa en la técnica de compresión de datos sin pérdidas Lempel-Ziv-Welch (LZW). El formato admite animaciones sencillas. Desde los inicios de HTML, GIF era compatible con los navegadores. En consecuencia, hoy en día todos los navegadores admiten GIF.

Especificación: https://www.w3.org/Graphics/GIF/spec-gif89a.txt

JPEG

Actualmente, JPEG (Joint Photographic Experts Group image) es el formato de imagen más popular en la web. Admite la compresión con pérdida y, a día de hoy, todas las patentes estadounidenses sobre el formato han caducado. JPEG es compatible con todos los navegadores modernos.

Especificación: https://jpeg.org/jpeg

PNG

El formato PNG (Portable Network Graphics) es un formato sin pérdida que se diseñó como sustituto de GIF. Por tanto, admite una mayor profundidad de color y es más eficiente que GIF. También admite la transparencia alfa. PNG es compatible con todos los navegadores modernos.

Especificación: https://www.w3.org/TR/png

APNG

La abreviatura APGN significa "Animated Portable Network Graphics" (gráficos de red portátiles animados). Es un formato de archivo que amplía el formato PNG con soporte para animaciones. En comparación con GIF, que también soporta animaciones, tiene un soporte mejorado para profundidades de color. Según caniuse.com, APNG es soportado en el momento de escribir el artículo por el 96,14% de todos los navegadores. Todos los navegadores modernos actuales soportan APNG.

Especificación: https://wiki.mozilla.org/APNG_Specification

SVG

SVG (Scalable Vector Graphics) es un formato de gráficos vectoriales para la web. En esto se diferencia de los otros formatos que se tratan en este artículo. Los otros formatos son formatos de mapa de bits. SVG es ideal para logotipos e iconos y se escala bien sin pérdida de calidad. SVG es compatible con todos los navegadores modernos.

Especificación: https://www.w3.org/TR/SVG2

WebP

El formato de imagen WebP fue desarrollado por Google y se basa en el códec de vídeo VP8. Admite compresión con y sin pérdidas. Además, admite transparencias y animaciones. Fue diseñado para sustituir a JPEG, PNG y GIF. AVIF y JPEG XL podrían sustituir a WebP en el futuro. Su licencia es de código abierto y libre de derechos de autor. Según caniuse.com, WebP es compatible con el 96,63% de los navegadores.

Especificación: https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification y https://datatracker.ietf.org/doc/html/rfc6386

AVIF

El formato de archivo de imagen AV1 (AVIF) es un formato de archivo de imagen de código abierto y libre de derechos de autor. Arraigado en el códec de vídeo AV1, ofrece una excelente compresión con pérdida y se compara favorablemente con otros formatos de imagen como JPEG, PNG y WebP.

También ofrece compresión sin pérdidas y tiene capacidad de animación. Además, es compatible con HDR y una amplia gama de colores para imágenes de alta calidad. En la actualidad, la compatibilidad con AVIF en los navegadores es del 83,97% a nivel mundial, según caniuse.com. Entre los navegadores modernos, sólo Edge no es compatible con AVIF.

Especificación: https://aomediacodec.github.io/av1-avif

Conclusión

En definitiva, hoy en día existe una gran variedad de formatos de imagen entre los que elegir para la web. La elección del formato depende del caso de uso. Por ejemplo, para logotipos e iconos, SVG es una buena elección. Para fotos, JPEG es una buena elección. Las capturas de pantalla se guardan mejor como PNG. Si utiliza uno de los nuevos formatos de archivo de imagen, como WebP y AVIF, debe especificar un formato alternativo para los navegadores más antiguos.

Referencias

• Guía de tipos y formatos de archivo de imagen MDN: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

Imagen de portada de Alvin Lenin en Unsplash