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 vectoriales tienen la ventaja de que ocupan poco espacio y se pueden ampliar a cualquier escala sin pérdida de calidad. Su inconveniente es que no permiten representar imágenes sin formas definidas, como ocurre en las fotografías.
El formato de imágenes vectoriales más utilizado es SVG.
Las imágenes de mapa de bits permiten representar imágenes sin formas definidas, pero a cambio pierden calidad al ampliarlas y ocupan mucho espacio en disco. Para reducir el tamaño de las imágenes de mapa de bits se utilizan diferentes algoritmos de compresión y por ello existen numerosos formatos de mapa de bits. Cada formato está optimizado para un determinado tipo de imagen (número de colores y degradados).
para imágenes fotográficas (muchos colores), el formato más extendido es JPEG
para dibujos (pocos colores, formas bien definidas) los formatos más extendidos son GIF y PNG
para dibujos con animación, el formato más extendido ha sido siempre el GIF animado, aunque posiblemente a medio plazo vaya creciendo el uso de APNG
para dibujos sin compresión, el formato más extendido es BMP de Windows, pero apenas se utiliza, ni se recomienda hacerlo, ya que los archivos son muy grandes
En los últimos años se han desarrollado otros formatos de mapa de bits que mejoran los formatos anteriores, pero que todavía no cuentan con el consenso necesario para sustituirlos. Por ejemplo, WebP de Google, JPEG XR de Microsoft, BPG de Fabrice Bellard (artículo en lwn.net de diciembre de 2014), etc. Posiblemente, el formato que sustituya en el futuro a estos formatos sea JPEG XL.
En el pasado se desarrollaron otros formatos de mapa de bits que no han tenido ningún éxito, por ejemplo, MNG.
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 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.
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 único, así que en la práctica se utilizan unos formatos creados bajo la coordinación de C-Cube Microsystems.
El formato JFIF (JPEG File Interchange Format = Formato de Intercambio de Archivos JPEG) es el más elemental y sólo contiene la imagen. Este formato es el que suelen tener las imágenes con extensión JPG. Este formato fue creado por el Independent JPEG Group y la última versión es la versión JPEG FIF 1.02, publicada en septiembre de 1992.
El formato TIFF (Tagged Image File Format) es un formato creado para el manejo de imágenes escaneadas independientemente del escáner utilizado. Para ello, permite incluir en un único archivo varias imágenes en diferentes formatos y, mediante etiquetas, información adicional sobre las imágenes. Este formato fue creado por Aldus y Microsoft, aunque ahora es propiedad de Adobe. La última versión del formato es la versión TIFF 6.0, publicada en junio de 1992, con suplementos publicados en 1995 y 2002. Información sobre TIFF en Wikipedia (en inglés).
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 julio de 2024 . 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 (noviembre de 2024) 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 en la mayoría de situaciones a GIF, aunque el formato GIF no ha desaparecido del todo porque todavía se usa para mostrar imágenes animadas.
Actualmente (noviembre de 2024), el grupo de trabajo del W3C está preparando la 3ª edición de la recomendación, Portable Network Graphics (PNG) Specification (Third Edition), que se esperaba 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 2024, 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">
<img src="apng-balon.png" alt="Ejemplo de imagen en formato APNG"
width="100" height="100"
style="background-color: lightblue">
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 (noviembre de 2024), 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">
<img src="webp-balon.webp" alt="Ejemplo de imagen animada en formato WebP"
width="100" height="100"
style="background-color: lightblue">
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 (noviembre de 2024), 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">
<img src="alpha_video.avif" alt="Ejemplo de imagen animada en formato AVIF"
width="252" height="189"
style="background-color: peru">
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. Las primeras versiones de estas cuatro partes se publicaron entre octubre de 2021 y agosto de 2022. Las últimas versiones disponibles son las siguientes:
Nota: Las normas ISO en general 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 (noviembre de 2024) 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.
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.
