Formatos de imagen

En esta lección se comentan los formatos de imágenes más utilizados en las páginas web. En la lección Etiquetas de imágenes se comentan las etiquetas que permiten incluir imágenes en páginas web.

Imágenes de mapa de bits e imágenes vectoriales

En informática se distinguen dos tipos de imágenes: imágenes de mapa de bits e imágenes vectoriales.

Las imágenes de mapa de bits están formadas por puntos de colores, mientras que las imágenes vectoriales están formadas por formas geométricas. Cada formato tiene sus ventajas e inconvenientes:

Las imágenes pueden convertirse fácilmente de formato a otro (salvo lógicamente de mapa de bits a vectoriales) y existen numerosas aplicaciones tanto web como nativas para realizar la conversión. Por ejemplo, Google puso en marcha en 2018 Squoosh, un convertidor online.

SVG

SVG (Scalable Vector Graphics = Gráficos Vectoriales Escalables) es un lenguaje de marcas creado por el W3C y dirigido a la representación de gráficos vectoriales (dibujos y texto).

En la lección sobre Historia de la Web se comentan las recomendaciones de SVG publicadas o en preparación por el W3C.

En un gráfico vectorial, los elementos de la imagen están definidos como formas elementales (líneas, rectángulos, círculos, curvas, polígonos, etc.), definidas mediante etiquetas similares a las del HTML. Por ello SVG no es un formato adecuado para fotografías, pero es idóneo para cualquier tipo de dibujo, técnico o artístico. Sus principales ventajas son el reducido tamaño (en KB) de las imágenes, la calidad obtenida (puesto que es el navegador el que dibuja la imagen), además de las posibilidades de modificación y reutilización inherentes a los formatos vectoriales.

SVG se impuso rápidamente como formato estándar de gráficos vectoriales en el mundo del software libre y los programas de edición de gráficos propietarios han ido adquiriendo poco a poco la capacidad de importar y exportar en formato SVG. Desgraciadamente, en la web, la implantación de SVG ha sido muy lenta. Durante su primera década de vida, el uso de SVG estaba bloqueado porque Internet Explorer no fue capaz de mostrar gráficos SVG hasta IE 9. Posteriormente, aunque su uso sigue creciendo, dos obstáculos siguen frenando su implantación definitiva: el hecho de que los navegadores no implementen totalmente la recomendación SVG y el hecho de que pueda incluirse código ejecutable en los gráficos SVG, lo que provoca inquietudes por motivos de seguridad (por ejemplo, WordPress en su configuración por defecto no permite la subida de imágenes SVG).

Un gráfico SVG puede incluirse en una página web de dos maneras, como objeto interno o como objeto externo.

En las lecciones SVG, Formas básicas SVG y Formas avanzadas SVG se comenta con más detalle el uso de SVG.

JPG o JPEG

El nombre oficial de este formato es JPEG, pero se le suele llamar JPG (seguramente porque la extensión de estos archivos es .jpg).

El comité JPEG (Joint Photographic Experts Group = Grupo de Unión de Expertos en Fotografía) fue creado en 1982 por las tres organizaciones de normalización ISO (International Organization for Standardization = Organización Internacional de Normalización), CCITT (International Telegraph and Telephone Consultative Committee = Comité Consultivo Internacional de Telegrafía y Telefonía, este comité de la UIT -Unión Internacional de las Telecomunicaciones- desapareció en 1992) e IEC (International Electrotechnical Commission = Comisión Electrotécnica Internacional) con el objetivo de definir un algoritmo de compresión que permitiera la transmisión de imágenes reales a través de líneas RDSI. En 1994 se aprobó finalmente la norma ISO/IEC 10918-1, que definía una familia de algoritmos de compresión (en 1995, 1997 y 1999 se aprobaron respectivamente las partes 2, 3 y 4 de esta norma).

Por problemas entre los organismos de normalización participantes no llegó a definirse un formato de archivo, así que en la práctica se utilizan unos formatos creados bajo la coordinación de C-Cube Microsystems.

La práctica totalidad de las fotografías (imágenes con muchos colores) que hay en Internet están en formato JPEG, por la extraordinaria compresión que consigue (como se puede ajustar el nivel de compresión, al crear el archivo se puede ajustar la relación tamaño/calidad de la imagen). Además admite también entrelazado (una imagen entrelazada se ve en el navegador desde que empieza a descargarse, primero con poca calidad, pero cada vez con más detalle a medida que va llegando). El único inconveniente es que se trata de un formato de compresión con pérdida, por lo que nunca se puede recuperar la información original, y si una imagen se edita varias veces, la calidad se va degradando cada vez más.

Para conocer más detalles sobre el formato JPEG, se pueden consultar estas dos FAQ: JPEG FAQ 1 y JPEG FAQ 2.

En diciembre del año 2000 se aprobó la norma ISO/IEC 15444-1, una versión más potente del JPEG original, conocida como JPEG 2000. La versión más reciente de esta norma es de 2019 . Entre 2003 y 2007 se publicaron 10 partes más, que cubren distintas aplicaciones del formato. Este formato no se utiliza todavía en la web, posiblemente debido a que algunas partes del formato JPEG 2000 están sometidas a patentes (declaradas o sin declarar, lo que empeora la situación).

En Firefox, el bug 36.351 (abierto en abril de 2000) está dedicado al soporte de JPEG 2000, pero se cerró en 2009 con la decisión de no implementar el soporte de este formato.

En mayo de 2018 la organización de normalización ECMA propuso la creación de un grupo de trabajo para crear un formato de imágenes JPEG animadas [referencia] que podría recibir el nombre de aJPEG. El trabajo se asignó al comité TC32 Multimedia coding and communications, pero actualmente (diciembre de 2023) no parecen haber publicado ninguna norma.

En abril de 2018, el comité JPEG comenzó a trabajar en el formato sucesor de JPEG, evitando los errores cometidos con JPEG 2000. Este nuevo formato se ha denominado JPEG XL y se empezaron a publicar partes de su norma en octubre de 2021. Este formato, que se espera sustituya a todos los formatos de imágenes actuales, se comenta en un apartado aparte.

GIF

La especificación del formato GIF87a (Graphics Interchange Format = Formato de Intercambio de Gráficos) fue publicada por CompuServe en junio de 1987. Una imagen GIF sólo puede tener 256 colores distintos, lo que no la hace recomendable para las fotografías, pero sí para dibujos. Además, el tamaño de los archivos es pequeño, ya que utiliza el algoritmo de compresión sin pérdida LZW. El éxito del formato GIF fue inmediato y su uso se extendió por Internet.

CompuServe publicó en julio de 1990 una extensión del formato GIF87a llamada GIF89a, que añadía al formato GIF la posibilidad de definir transparencia y de crear animaciones (los llamados GIF animados). Los primeros navegadores (como Mosaic en 1993) soportaban GIF, lo que facilitó su uso masivo en la web.

Pero el algoritmo LZW (LZW son las iniciales de sus inventores, Abraham Lempel, Jakob Ziv y Terry Welch) estaba patentado desde 1983 por la Sperry Corporation (que en 1986 se había unido a Burroughs para formar Unisys). Parece ser que CompuServe no comprobó al crear GIF si el algoritmo que iba a utilizar estaba patentado y que Unisys no se enteró hasta 1993 de que se estaba usando LZW sin su permiso. A partir de ese momento, Unisys reclamó que cualquier programa que creara imágenes en formato GIF le pagara una licencia. Muchas empresas, entre ellas CompuServe, llegaron a acuerdos con Unisys, pero inmediatamente el W3C desarrolló el formato PNG, un formato libre para sustituir a GIF.

Las patentes de Unisys que cubren el formato GIF vencieron en junio de 2003 en Estados Unidos y en 2004 en otros países (Canadá, Francia, Italia, Alemania, Reino Unido y Japón) y unas patentes relacionadas propiedad de IBM vencieron en julio de 2006, por lo que GIF es ahora un formato libre de patentes. En cualquier caso, se recomienda utilizar PNG en lugar de GIF.

PNG

El formato PNG (Portable Network Graphics = Gráficos de Red Portátiles) surgió como alternativa a la reclamación de Unisys, poseedora de una patente del algoritmo LZW, usado en el formato GIF. La primera versión preliminar fue propuesta por Thomas Boutell en enero de 1995 y en octubre de 1996 el W3C publicó la recomendación Portable Network Graphics, editada por Thomas Boutell. En noviembre de 2003 se publicó la recomendación Portable Network Graphics (PNG): Functional specification (2ª edición), editada por David Duce, que se publicó también en 2004 como norma ISO 15948.

Las ventajas del formato PNG sobre el formato GIF son muchas: se trata de un formato libre, sin pérdida, que consigue mayor compresión que GIF (alrededor de un 20%), con transparencia alfa (cada pixel puede tener su propio nivel de transparencia), canal gamma (para ajustar el brillo) y entrelazado.

Inicialmente, el uso del formato PNG estuvo limitado porque hasta finales de 2006 Internet Explorer (el navegador más utilizado) no mostraba correctamente las imágenes PNG (concretamente, las imágenes con transparencia alfa). "Casualmente", una vez vencidas las patentes del formato GIF, Microsoft publicó en octubre de 2006 Internet Explorer 7, que ya mostraba correctamente los archivos PNG. Desde entonces, PNG ha sustituido a GIF, formato que no ha desaparecido por su uso en pequeñas animaciones.

Actualmente (diciembre de 2023), el grupo de trabajo está preparando la 3ª edición de la recomendación, Portable Network Graphics (PNG) Specification (Third Edition), que se espera completar en septiembre de 2024 y que incluirá soporte para imágenes animadas (basadas en APNG) e imágenes HDR.

APNG

Como alternativa a MNG, unos desarrolladores de Mozilla crearon en 2004 el formato APNG (Animated PNG), que se puede utilizar en Firefox desde Firefox 3 (publicado en 2008), y se pudo utilizar en Opera (desde Opera 9.5, publicado en 2008, hasta Opera 14, publicado en 2013). En abril de 2007 el grupo de desarrollo del formato PNG rechazó la propuesta de formato APNG elaborada por Mozilla, lo que parecía condenar este formato al olvido. De hecho, el navegador Opera dejó de admitir el formato al pasar a usar Blink, el motor de Chrome, en 2013. Sin embargo, en los últimos años la situación ha mejorado, puesto que Safari y Chrome lo admiten desde Safari 8 (junio de 2014) y Chrome 59 (junio de 2017). En septiembre de 2021 se puso en marcha de nuevo un grupo de trabajo PNG en el W3C, con el objetivo de publicar una tercera versión de la recomendación PNG en 2023, que entre otros temas normalizará los PNGs animados.

La página del proyecto APNG, creada en 2008, temporalmente abandonada en 2014 y desparecida en 2018, ofrecía información sobre el formato [Copia en Internet Archive de mayo de 2018].

Este es un ejemplo de imagen APNG. Como muestra el segundo ejemplo, entre las ventajas del formato APNG se encuentra la posibilidad de utilizar el canal de transparencia alfa, lo que permite utilizar fondos con las imágenes.

<img src="apng-balon.png" alt="Ejemplo de imagen en formato APNG"
    width="100" height="100">
Enlace externo
<img src="apng-balon.png" alt="Ejemplo de imagen en formato APNG"
    width="100" height="100"
    style="background-color: lightblue">
Enlace externo

WebP

El formato WebP es un formato de imágenes de mapa de bits con compresión o sin compresión, estáticas o animadas, publicado por Google en septiembre de 2010 como alternativa a JPG, PNG y GIF. Es un formato derivado del formato de vídeo VP8 publicado en septiembre de 2008 por la empresa On2, comprada por Google en mayo de 2010.

Chrome admite imágenes WebP desde Chrome 9, publicado en enero de 2011 [ref]. Firefox admite imágenes WebP desde Firefox 65, publicado en enero de 2019 [ref]. Safari admite imágenes WebP desde Safari 14, publicado en septiembre de 2020 [ref].

Actualmente (diciembre de 2023), el uso de WebP sigue siendo minoritario [ref], aunque ha ido creciendo pese a las limitaciones del formato (profundidad de color máxima de 8 bits, sin modo progresivo, tamaño máximo limitado a 16383 x 16383, único espacio de color 4:2:0).

En junio de 2021, Google inició el desarrollo de WebP 2, una nueva versión del formato, pero en octubre de 2022 anunció que WebP 2 sería una plataforma experimental para el desarrollo de nuevos códecs, sin intención de convertirse en un nuevo formato.

<img src="webp-flores.webp" alt="Ejemplo de imagen en formato WebP"
    width="320" height="241">
Enlace externo
<img src="webp-balon.webp" alt="Ejemplo de imagen animada en formato WebP"
    width="100" height="100"
    style="background-color: lightblue">
Enlace externo

AVIF

El formato AVIF (AV1 Image File Format) es un formato de imágenes de mapa de bits con compresión o sin compresión, estáticas o animadas, publicado por el consorcio Alliance for Open Media (AOMedia) en febrero de 2019 como alternativa a JPG, PNG y GIF. Es un formato derivado del formato de vídeo AV1, publicado por AOMedia en marzo de 2018.

Chrome admite imágenes AVIF desde Chrome 85, publicado en agosto de 2020 [ref]. Firefox admite imágenes AVIF desde Firefox 93, publicado en octubre de 2021 [ref] e imágenes AVIF animadas desde Firefox 113, publicado en mayo de 2023 [ref]. WebKit, el motor de Safari, admite imágenes AVIF desde marzo de 2021 [ref], aunque Safari admite imágenes AVIF no animadas desde septiembre de 2022, cuando se publicó iOS 16, ya que el procesamiento de imágenes de Safari lo realiza el sistema operativo.

Actualmente (diciembre de 2023), el uso de AVIF sigue siendo muy minoritario [ref], posiblemente por las limitaciones del formato (sin modo progresivo, computacionalmente costoso).

<img src="avif-flores.avif" alt="Ejemplo de imagen en formato AVIF"
    width="320" height="240">
Enlace externo
<img src="alpha_video.avif" alt="Ejemplo de imagen animada en formato AVIF"
    width="252" height="189"
    style="background-color: peru">
Enlace externo

JPEG XL o JXL

El formato JPEG XL (también llamado JPG XL o JXL) es un formato de imágenes de mapa de bits con compresión o sin compresión, estáticas o animadas, cuya norma ha sido publicada, dividida en cuatro partes, por el comité JPEG de ISO.

Nota: Las normas ISO no son de libre acceso, aunque se han intentado iniciativas para ofrecer estas normas de libre acceso, sin éxito por el momento.

Con este formato el comité JPEG ha conseguido un formato que supera a todos los formatos actualmente existentes: sin problema de patentes (licencia Apache 2.0), con/sin compresión, compresión muy alta, animaciones, canales alfa, profundidad de color hasta 16 bits, admite tamaños de imágenes gigantescos (más de 1000 millones de píxeles por lado), modo progresivo, compatible con JPEG original, gran calidad visual, permite incluir versiones de varios tamaños de la misma imagen, etc.

Se esperaba que este formato sustituyera a todos los formatos de mapa de bits actuales una vez los navegadores y/o sistemas operativos admitieran el formato, pero el camino no parece sencillo.

Pero el 31 de octubre de 2022 Google anunció sin apenas explicaciones que renunciaba a incluir JPEG XL en Google Chrome y eliminar todo el código fuente ya incluido en Chrome en febrero de 2023 (coincidiendo con la publicación de Chrome 110), como efectivamente ocurrió. Inmediatamente, se publicaron peticiones a Google para que rectificara esta decisión, como estas de Cloudinary o TwicPics. Algunas noticias vinculaban esta decisión a la obtención por parte de Microsoft de una patente potencialmente relacionada con JPEG XL en febrero de 2022, aunque otros rumores vinculaban la decisión a la presunta intención de Google de favorecer su formato WebP sobre JPEG XL.

En septiembre de 2023 el navegador Safari incluyó en su versión 17 [ref] el soporte de JPEG XL, lo que sin duda impulsará este formato.

Actualmente (diciembre de 2023) Firefox sólo admite JXL de forma experimental en sus versiones de prueba, sin fecha de implantación conocida en las versiones estables, y Chrome se mantiene en silencio ante las peticiones para dar soporte a JPEG XL.

BMP

El formato BMP (BitMaP = Mapa de Bits) es el formato de imágenes de mapa de bits que utiliza internamente el subsistema gráfico de Windows (GDI) y que también se suele utilizar para guardar imágenes en Windows. Permite varias profundidades de color (de 1 a 24 bits por píxel) y transparencia. El formato no comprime las imágenes, por lo que las imágenes tiene un tamaño muy grande.

Como se trata de un formato bien documentado y libre de patentes, se puede utilizar en cualquier sistema operativo y los navegadores suelen ser capaces de mostrar imágenes en formato BMP. De todas maneras, conviene no utilizar en páginas web porque las imágenes no están comprimidas y ocupan mucho espacio.