Figura 1. Con la reducción de los colores de la imagen GIF se obtiene una imagen visualmente similar de menor tamaño. Imagen del gato diseñada por Freepik.
Formatos de imagen para el diseño web: una revisión.
Images formats for web design: a revision.
Yiezenia Rosario Ferrer
ORCID: 0000-0001-9859-2902
Las imágenes son el recurso multimedia más empleado en la web, por lo que resulta de gran importancia entregar estos recursos eficientemente. Este artículo presenta una descripción de los formatos de imágenes más usados en el diseño web y de aquellos modernos que pueden ayudar en la optimización de los sitios y aplicaciones web. La caracterización de los formatos puede servir como guía para la selección del formato adecuado en cada caso, que permita mejorar la eficiencia de los sitios web diseñados.
Images are the most used multimedia resource on the web, so it is of great importance to deliver these resources efficiently. This article presents a description of the most commonly used image formats in web design, as well as modern formats that can help in websites optimization. The formats characterization can guide the selection of the appropriate format in each use case, which allows improving the efficiency of the designed websites.
Palabras claves:
diseño web
formatos de imagen
formatos de próxima generación
Keywords:
web design
web images formats
next-gen
images
Fecha Recibido:
dd / MM / 2023
Fecha Aceptación:
dd / MM / 2023
Fecha Publicación:
12 / 07 / 2023
El diseño web consiste en planificar, diseñar, mantener y crear contenido para internet. Su evolución gradual ha estado en correspondencia con el desarrollo de las tecnologías computacionales y de redes. El diseño de la interfaz, del material gráfico y de la experiencia del usuario se comprenden en el diseño web. En la actualidad diseñar sitios web va más allá de los aspectos estéticos e incluye el funcionamiento total de estos.
Las imágenes constituyen unos de los elementos más atractivos del diseño web y, después del texto, son el elemento de contenido más utilizado en las páginas webs. En ellas se incluyen fotos, diagramas, infografías u otros elementos gráficos que comunican información visualmente. Las imágenes apoyan el propósito de la página web o sirven para esclarecer su contenido.
Existen varios formatos de imagen, cada uno de ellos permite representar mejor algunos tipos de imágenes (fotografías, ilustraciones, elementos decorativos, entre otros). El formato escogido tendrá impacto en el tamaño final del archivo y en la calidad visual. El presente artículo describe los formatos de imagen más utilizados en el diseño web y presenta otros modernos que pueden reducir los tamaños de archivo hasta un 50 % y mantener una calidad visual adecuada.
Las imágenes son el tipo de recurso más popular en la web y a menudo los de mayor tamaño. Los usuarios aprecian los elementos visuales de alta calidad, pero se debe tener cuidado para entregar estos recursos de manera eficiente (Osmani, 2021b).
La función principal de las imágenes es visualizar, informar, atraer la atención, facilitar la lectura (Pettersson, 2021) y servir como apoyo a la interacción (Lynch & Horton, 2016). Las imágenes constituyen más que un factor de belleza. En el diseño de experiencia de usuario ayudan en la construcción de la usabilidad. La mayoría de los usuarios de la web y de las aplicaciones móviles perciben las imágenes más rápido que las palabras. Así, las imágenes son vistas y analizadas primero. De igual manera, las imágenes usadas influyen positivamente en el posicionamiento en buscadores de los sitios web (Yalanska, 2018).
Escoger el formato de imagen adecuado para un sitio web depende de una combinación de los requerimientos funcionales y los resultados visuales deseados. Para ello, como afirma Minnick (2017), el diseñador web debe considerar el formato, las dimensiones y el tamaño de la imagen. Estos factores inciden en la apariencia de la imagen y en cuánto tiempo demora el navegador en mostrarla.
Por lo general las imágenes digitales se clasifican en dos tipos:
· Imágenes de mapas de bits (o imágenes rasterizadas): usan una malla de píxeles para definir la estructura de la imagen digital. Cada píxel almacena la información del color de ese punto particular de la imagen. Estas imágenes dependen de la resolución, y se degradan y pierden calidad cuando son redimensionadas. Este formato es usualmente empleado por fotógrafos (Lynch & Horton, 2016; Murray & vanRyper, 1996; Osmani, 2021a).
· Imágenes vectoriales: utilizan funciones matemáticas como líneas, polígonos, puntos, curvas y efectos de relleno para definir la estructura visual de la imagen. Estas imágenes pueden ser redimensionadas sin pérdidas en la calidad (Lynch & Horton, 2016; Murray & vanRyper, 1996; Osmani, 2021a). Consecuentemente, es usada para logos, iconos y fuentes tipográficas.
El 95,9 % de las páginas webs tienen imágenes como parte de su contenido (Portis & Sillars, 2021). En promedio son transferidos unos 877 Kb por página web en forma de imagen en dispositivos móviles y alrededor de 982 Kb en computadores de escritorio (Portis & Sillars, 2021). Es por ello que uno de los retos más importantes del uso de imágenes en internet consiste en reducir el tamaño de este tipo de archivos.
La compresión de una imagen es la reducción de la cantidad de datos requeridos para representarla digitalmente, mediante la remoción de datos redundantes. En consecuencia, se reduce el tamaño del archivo de imagen mientras se retiene la información necesaria y relevante (Osmani, 2021a; Sayood, 2006).
Existen dos modos de comprimir las imágenes: compresión con pérdida (lossy) y compresión sin pérdida (lossless). La última de ellas es completamente reversible y tiene como beneficio una calidad superior de la imagen. En contraste, la compresión con pérdida no es reversible, una vez aplicada no se puede recuperar el original porque alguna información se pierde en el proceso. Su mayor ventaja consiste en una reducción mayor de los tamaños de archivo; se pueden obtener archivos bastante pequeños con este método (Li et al., 2021; Sayood, 2006).
Los formatos de imagen más comunes en la web son JPEG, GIF y PNG. Cada uno de estos formatos fue diseñado con un propósito específico, por lo que entender sus diferencias es importante en el diseño web. A continuación se describen las características fundamentales de estos formatos, así como una breve descripción del formato vectorial SVG, que puede usarse en todos los navegadores modernos. Finalmente, se presentan los denominados formatos de nueva generación WebP, HEIC, AVIF y JPEG XL.
El servicio de información CompuServe popularizó el formato de gráficos GIF (Graphics Interchange Format) en la década de 1980 como un medio eficiente de trasmitir imágenes a través de la red (CompuServe Incorporated, 1987, 1989). A principios de 1990, los diseñadores iniciales de sitios y páginas webs lo adoptaron por su eficiencia y el amplio conocimiento sobre el formato (Murray & vanRyper, 1996).
Las imágenes GIF tienen 8 bits por píxel, por lo que pueden acomodar una paleta de 256 colores. Este formato soporta animaciones y transparencias. Además, incorpora un formato de compresión sin pérdidas, el algoritmo Lempel-Ziv-Welch (LZW) (Phillips, 1992; Welch, 1984), para mantener los archivos con el menor tamaño posible sin comprometer su calidad. El método LZW funciona mejor con imágenes que tienen grandes áreas de color homogéneo, tales como logos y diagramas, pero resulta menos eficiente para comprimir fotografías con muchos colores y texturas complejas (Li et al., 2021; Lynch & Horton, 2016). Una estrategia para mejorar la compresión es reducir el número de colores en la imagen GIF al mínimo necesario y remover los colores que no son imprescindibles (Figura 1).
Figura 1. Con la reducción de los colores de la imagen GIF se obtiene una imagen visualmente similar de menor tamaño. Imagen del gato diseñada por Freepik.
En la actualidad el 20 % de las imágenes en la web está en formato GIF (W3Techs, 2022) y los navegadores más usados, tales como Chrome, Edge, Firefox, IE, Opera y Safari, pueden mostrar archivos de ese tipo.
Otro formato de imagen muy usado es el JPEG (Joint Photographic Experts Group). El 74 % del total de las imágenes de la web están en dicho formato (W3Techs, 2022), el cual es, al igual que el GIF, soportado universalmente por los navegadores.
Se trata de un formato de compresión de imágenes desarrollado por el Joint Photographic Experts Group, denominado formato de archivo de intercambio JPEG (JFIF - JPEG file interchange format). Fue aceptado como un estándar internacional en 1992 y la última versión fue presentada en 1994 (ISO/IEC-10918, 1994). Puede alcanzar una compresión de 10:1 con una pérdida apenas perceptible en la calidad de la imagen (Pennebaker & Mitchell, 1993), para ello se utiliza la transformada discreta del coseno.
En las imágenes JPEG se dedican al menos 16 bits de memoria para representar el color en cada píxel (existen formatos de 24 bits, 32 bits, 48 bits), lo cual
resulta en imágenes que pueden incorporar 16,8 millones de colores. Esto lo convierte en el formato
adecuado para mostrar gradientes, colores mezclados y fotografías. Sin embargo, no funciona muy bien con colores planos o bordes bien definidos (Gorczyca, 2019; Osmani, 2021a; Robbins, 2006).
El formato JPEG dispone de varios modos de compresión, los más empleados son el secuencial, en el que la imagen se decodifica por líneas de arriba hacia abajo, y el progresivo, donde la imagen se va mostrando por capas (primero muestra una imagen borrosa y la adición de capas sucesivas incrementa la calidad de la imagen) (Gorczyca, 2019; Osmani, 2021a).
Para el uso en la web es importante reducir la cantidad de datos usados, y los métodos de compresión JPEG permiten definir el grado de compresión deseado y la calidad de la imagen; por lo general, una compresión con un parámetro de calidad entre 60 y 75 disminuye los tamaños de archivos de manera considerable manteniendo una visualidad adecuada de la imagen.
A continuación (Figura 2) se muestran los resultados de aplicar diferentes factores de calidad para la compresión JPEG.
Figura 2. La calidad visual disminuye al aumentar la compresión. Foto de la
Base de datos de imágenes de Kodak (Kodak Corporation, 1999).
A pesar de que el formato JPEG fue desarrollado hace casi treinta años, es dominante en términos de creación, manipulación y trasmisión de imágenes en internet y otros sistemas multimedia. No obstante, con los avances tecnológicos han surgido nuevas demandas para alcanzar mayor eficiencia en la trasmisión y el almacenamiento de las imágenes, lo cual ha traído como consecuencia nuevos formatos que extienden a JPEG, tales como JPEG 2000 y JPEG XR (Rao et al., 2021). Sin embargo, estos nuevos formatos no han alcanzado la extensión y el amplio uso de JPEG.
El PNG (Portable Network Graphics) es un tipo de imagen de mapa de bits creado especialmente para su uso en la web. Hoy día, el 79,9 % de las imágenes disponibles están en formato PNG (W3Techs, 2022). Ofrece imágenes de gran calidad pues es un formato de compresión sin pérdida, pero no reduce tanto el tamaño de archivo. Este formato fue propuesto en 1995 como una alternativa al formato GIF (Roelofs, 2003).
Soporta múltiples formatos de imagen: imágenes basadas en paletas de colores (PNG-8, utiliza 8 bits para almacenar el color), imágenes de escalas de grises (PNG-8), e imágenes de color verdadero (PNG-24). Permite también la transparencia y opacidad, presentación progresiva en el navegador y la corrección automática de gamma (brillo) (Roelofs, 2003) (Figura 3).
Figura 3. Ejemplos de imágenes en PNG. Reducir la cantidad de colores permite reducir el tamaño de archivo de imagen. Foto de Guy Stevens en Unsplash, redimensionada a 402x602 px.
Debido a que es un formato ampliamente soportado en los navegadores web, PNG es la opción para: gráficos con alto contraste, como textos, grandes áreas con colores sólidos, capturas de pantalla, ilustraciones y logos; gráficos en los que se necesita preservar la opacidad y la transparencia; así como gráficos que necesitan editarse (Osmani, 2021a).
La Figura 4 muestra la comparación entre la compresión sin pérdidas de PNG y la compresión con pérdidas de JPEG, aunque la imagen JPEG es de menor tamaño son visibles distorsiones donde PNG muestra colores sólidos.
Figura 4. Comparación entre imágenes en los formatos PNG y JPEG.
El SVG (Gráficos vectoriales escalables) es un formato de imágenes vectoriales basado en el formato abierto XML (lenguaje de marcado extensible) para gráficos bidimensionales con soporte para animaciones e interactividad. Es un estándar abierto desarrollado por el World Wide Web Consortium (W3C) desde 1999, y su lanzamiento inicial fue en 2001 (W3C, 2001).
La especificación SVG permite diferentes tipos de objetos gráficos (W3C, 2011), entre ellos: elementos geométricos vectoriales (curvas, puntos, líneas y otras formas), imágenes de mapas de bits y texto. SVG fue diseñado para funcionar con HTML, CSS y JavaScript (los lenguajes básicos para describir la estructura, el estilo y manipular contenido web), por lo que pueden usarse directamente en las páginas web. Este formato tiene como ventajas que las imágenes pueden ser redimensionadas sin pérdidas en la calidad, a lo cual se suma los tamaños de archivos pequeños (Coyier, 2016; Lynch & Horton, 2016; Osmani, 2021a).
Figura 5. Ejemplo de imagen SVG. Imagen de Samsul Rizal disponible en: https://www.svgrepo.com/svg/415729/camera-equipment-image-2
El formato vectorial SVG es útil para crear gráficos con formas simples, tales como logos, iconos, ilustraciones pequeñas sin efectos complejos y elementos de interfaz. La mayoría de los navegadores actuales soportan este formato de manera nativa (Caniuse, 2022d), aunque existen todavía algunos problemas para mostrar gráficos vectoriales más complejos (Coyier, 2016; Lynch & Horton, 2016; Osmani, 2021a).
El objetivo de los formatos de imagen modernos es superar las limitaciones de JPEG y PNG al ofrecer mejor compresión y flexibilidad en sus características (Osmani, 2021b).
Es un formato de imagen moderno presentado por Google en el 2010 (Rabbat, 2010), surgió como un formato con el objetivo de conseguir páginas web que cargaran más rápido. Este formato permite la compresión con pérdida y sin pérdida con una calidad visual aceptable, además incorpora transparencias de canal alfa y animaciones (Google Developers, s. f.).
El formato WebP ha sido aceptado y ampliamente adoptado debido a su capacidad de comprimir las imágenes y obtener tamaños de archivos menores comparados con imágenes JPEG y PNG. Google reporta que una imagen WebP sin pérdidas es generalmente un 26 % menor, en cuanto al tamaño de archivo, que su similar PNG; al tiempo que una imagen WebP con pérdidas es 25-34 % menor que la imagen JPEG de calidad similar (Google Developers, s. f.; Osmani, 2021b). Las Figuras 6 y 7 muestran la comparación de WebP con JPEG y PNG.
Figura 6. Comparación entre la compresión sin pérdida PNG y WebP, la imagen WebP es un 23 % menor que su similar PNG. Foto de Aaron Burden en Unsplash, redimensionada a 960x1280 px.
Figura 7. Comparación entre la compresión con pérdida JPEG y WebP, la imagen WebP es 50 % menor que su similar JPEG. Foto de Aaron Burden en Unsplash, redimensionada a 960x1280 px.
Adicionalmente, WebP ofrece otros beneficios tales como (Osmani, 2021b):
· Transparencia: tiene un canal de transparencia sin pérdidas de 8 bits con solo 22 % de bytes adicionales. Además, soporta la transparencia RGB con pérdidas, lo cual es una característica única de este formato.
· Metadatos: permite incluir los metadatos para fotos EXIF (Exchangeable image file format; en español: Formato de Archivo de Imagen Intercambiable) y los metadatos de documentos digitales XPM (Extensible Metadata Platform; en español: Plataforma Extensible de Metadatos). Además, puede almacenar un perfil de color ICC (Consorcio Internacional del Color).
· Animación: Soporta imágenes animadas de color verdadero (true color).
· Tiempos de carga más rápidos y ocupa menos capacidad de almacenamiento debido a los menores tamaños de archivo.
Desde principios de 2019 el formato WebP está disponible en gran variedad de navegadores.
Figura 8. Soporte del formato WebP en los navegadores. Fuente: Caniuse (2022c).
En la actualidad se desarrolla una nueva versión, WebP 2, que tiene como objetivo lograr una mejora en la eficiencia de la compresión, con pérdidas y sin pérdidas, con respecto a la versión actual (GoogleGit, 2020).
HEIF (High Efficiency Image File Format; en español: Formato de Archivo de Alta Eficiencia) es un estándar desarrollado por el Moving Picture Experts Group (MPEG) para el almacenamiento de imágenes y secuencia de imágenes. Este estándar facilita la codificación de datos en concordancia con el estándar HEVC (High Efficiency Video Coding). El desempeño de la compresión HEVC es superior a otras alternativas disponibles para imágenes estáticas o secuencias de imágenes. HEIF es un contenedor flexible que puede almacenar diversos tipos de información multimedia, como animaciones GIF, textos, audio, entre otros (Hannuksela et al., 2015).
Por otro lado, HEIC (High Efficiency Image Container) es un formato propietario de Apple, que usa el estándar HEIF usando el códec HEVC. Apple usa el contenedor HEIC tanto para imágenes estáticas como para varias imágenes, esta última característica se emplea en la funcionalidad Live Photo de Apple. El tamaño de los archivos HEIC es menor que los JPEG, pero mantienen la calidad visual de las imágenes (Osmani, 2021a).
|
|
HEIC |
JPEG |
PNG |
WebP |
|
Compresión con pérdidas |
SÍ |
SÍ |
NO |
SÍ |
|
Compresión sin pérdidas |
SÍ |
SÍ[1] |
SÍ |
SÍ |
|
Formato de metadatos |
EXIF, XMP |
EXIF |
|
EXIF, XMP |
|
Extensible a otros formatos de metadatos |
SÍ |
NO |
NO |
NO |
|
Puede contener otros formatos multimedia |
SÍ |
Solo audio en formato WAV |
NO |
NO |
|
Múltiples imágenes en el mismo archivo |
SÍ |
NO |
NO |
NO |
|
Secuencia de imágenes |
SÍ |
NO |
NO |
SÍ |
|
Transparencia |
SÍ |
NO |
SÍ |
SÍ |
|
Miniatura |
SÍ |
SÍ |
NO |
NO |
Tabla 1. Comparación de las características del formato HEIC con respecto a JPEG, PNG y WebP. Adaptado de Hannuksela et al. (2015).
El formato HEIC está disponible en dispositivos con los sistemas operativos MacOS High Sierra e iOS 11, sin embargo, el navegador Safari todavía no soporta el formato (Caniuse, 2022a).
AVIF (AV1 Image File Format) es una especificación de formato de archivo de imagen que permite almacenar imágenes estáticas y secuencias de imágenes comprimidas con el códec AV1 en un contenedor HEIF (Concolato & Klemets, 2019). Este es un formato de código abierto que permite la compresión con pérdidas y sin pérdidas de manera muy eficiente, las imágenes pueden resultar hasta diez veces menores en tamaño de archivo que JPEGs similares en cuanto a calidad perceptual (Mavlankar et al., 2020; Osmani, 2021b).
Figura 9. Eficiencia de la codificación AVIF: 62 % menor que WebP y 76 % menor que JPEG. Foto de Aaron Buden en Unsplash, redimensionada a 960x1280 px.
El formato AVIF pretende producir imágenes comprimidas de alta calidad que pierdan tan poco como sea posible durante la compresión. Además, provee las siguientes características (Osmani, 2021b):
· Soporta animaciones e imágenes multicapa almacenadas como secuencias de imágenes.
· Permite la compresión con pérdidas y sin pérdidas.
· Soporta múltiples espacios de color (imágenes monocromáticas, imágenes con múltiples canales e imágenes transparentes que usan el canal alfa).
· Soporta imágenes de alto rango dinámico (HDR), lo que permite en los dispositivos compatibles mayor profundidad del color y brillo en las imágenes.
La Figura 10 muestra una comparación visual entre una imagen JPEG y una imagen AVIF. El tamaño de archivo es similar; sin embargo, la imagen JPEG tiene artefactos en forma de bloque en algunas regiones y la imagen AVIF es casi idéntica a la original, mantiene los detalles de manera más adecuada.
Figura 10. Comparación de la calidad visual entre imágenes JPEG y AVIF.
Mavlankar et al. (2020) muestran la eficiencia de la compresión AVIF comparada con otros métodos de compresión existentes (JPEG, WebP y HEIC), evaluando solo imágenes de Netflix. La evaluación realizada por Barman y Martini (2020) amplía el estudio anterior en cuanto al tipo de imágenes estudiadas: imágenes de espacios naturales, imágenes tomadas de secuencias de juegos e imágenes generadas usando gráficos por computadoras. Este estudio concluye que, en general, la codificación AVIF resulta en ahorros de bits superiores para todos los tipos de imágenes (Barman & Martini, 2020).
AVIF provee una alta eficiencia en la compresión, pero aún está en una etapa de desarrollo temprano y la codificación de las imágenes requiere más tiempo si lo comparamos con los formatos de imagen tradicionales. No obstante, la integración con los navegadores ya ha iniciado.
Figura 11. Soporte del formato AVIF en los navegadores. Fuente: Caniuse (2022b).
El sistema de codificación de imagen JPEG XL tiene un conjunto amplio de características y ha sido optimizado para entornos web sensibles a los dispositivos (responsive), por lo que se muestra de manera adecuada en un amplio rango de dispositivos. Además, incluye varias características que ayudan a la transición desde el formato JPEG (JPEG, 2019; Rao et al., 2021).
JPEG XL ha sido diseñado tanto para entregar imágenes en internet como para la fotografía profesional. Este formato soporta imágenes con gamas de colores amplias e imágenes de alto rango dinámico, así como imágenes con elevadas profundidades de color (8 bits, 10 bits y 12 bits). Además, incluye características como animaciones, canal alfa para transparencias, capas, miniaturas, compresión sin pérdidas y representación progresiva, para dar respuesta a una variedad de aplicaciones tales como galerías de fotos, redes sociales, interfaces de usuarios y almacenamiento en la nube. JPEG XL adiciona soporte para imágenes en 360 grados y panoramas (Alakuijala et al., 2021).
El codificador ha sido diseñado según los siguientes criterios (Alakuijala et al., 2021; JPEG, 2019; Osmani, 2021a):
· Alta fidelidad en relación con la imagen original (cercana a la percepción humana).
· Velocidad de codificación-decodificación competitiva con respecto a los otros formatos de imagen.
· Altas tasas de compresión (de 20:1 a 50:1).
El formato JPEG XL se está integrando en algunos navegadores. En los navegadores Chrome, Firefox, Edge y Opera puede habilitarse en la configuración la visualización de este tipo de archivos.
JPEG XL todavía está en desarrollo, pero dadas sus características puede ser el formato adecuado para múltiples aplicaciones. En el estudio realizado por Alakuijala et al. (2019) los autores concluyeron que este nuevo enfoque podría superar las dificultades anteriores para reemplazar los exitosos formatos JPEG, GIF y PNG, y ayudará a establecer un formato moderno que simplificará el servicio de imágenes, mejorará la calidad y reducirá la latencia experimentada por el usuario.
Para evaluar qué formato de imagen es adecuado para un diseño web específico se deben considerar (Osmani, 2021b):
· la compresión, a mayor compresión menor tamaño de archivo;
· la calidad de la imagen, de manera ideal, la compresión no debe traer consigo la pérdida de la calidad visual de la imagen; y
· la velocidad de codificación y decodificación, los algoritmos más complejos de compresión requieren mayor potencia de procesamiento para codificar y decodificar las imágenes, por lo que se puede enlentecer la presentación de la imagen en el navegador.
Los anteriores son parámetros claves a considerar cuando se evalúa el desempeño de un formato de imagen para la web; sin embargo, algunas aplicaciones pueden requerir otras características como el soporte en los navegadores, si permiten animaciones y transparencias, por ejemplo.
Cada formato tiene sus méritos y sus usos ideales en la web. En las Tablas 2 y 3 se presenta un resumen de las características de cada uno, las recomendaciones de uso y también los inconvenientes.
|
Formato |
Compresión |
Colores |
Transparencia |
Animaciones |
Decodificación progresiva |
|
GIF |
Sin pérdidas |
256 |
Sí |
Sí |
Sí |
|
JPEG |
Con pérdidas |
Millones de colores |
No |
No |
Sí |
|
PNG |
Sin pérdidas |
256 (PNG-8) Millones de colores (PNG-24) |
Sí |
No |
Sí |
|
SVG |
Sin compresión |
Millones de colores |
Sí |
Sí |
No |
|
WebP |
Con pérdidas Sin pérdidas |
Millones de colores |
Sí |
Sí |
No |
|
AVIF |
Con pérdidas Sin pérdidas |
Millones de colores |
Sí |
Sí |
No |
|
JPEG XL |
Con pérdidas Sin pérdidas |
Millones de colores |
Sí |
Sí |
Sí |
Tabla 2. Resumen de características.
|
Formato |
Ideal para… |
Inconvenientes |
|
GIF |
Gráficos con colores planos. Combinación de gráficos planos e imágenes fotográficas. Animaciones web |
No debe utilizarse en fotografías de muchos colores |
|
JPEG |
Fotografías |
No debe usarse para gráficos. Siempre existe una pérdida de calidad de la imagen |
|
PNG |
Iconos, logos, gráficos con alto nivel de detalle |
No es ideal para fotografías |
|
SVG |
Diagramas, iconos, logos y otro contenido no fotográfico, animaciones y elementos de interfaz |
No se recomienda su uso para fotografías |
|
WebP |
Alternativa a JPEG y PNG con una mejor compresión, imágenes animadas |
No es recomendable para fotografías con profundidad de color mayor de 8 bits No es soportado universalmente por los navegadores |
|
AVIF |
Imágenes y fotografías con alta profundidad del color Imágenes animadas |
Aún en desarrollo temprano No es soportado universalmente por los navegadores |
|
JPEG XL |
Fotografías, gráficos, ilustraciones, animaciones |
Aún en desarrollo temprano No es soportado universalmente por los navegadores |
Tabla 3. Recomendaciones de uso e inconvenientes de los formatos de imagen.
Conocer las características fundamentales de cada formato de imagen permitirá escoger los formatos adecuados en los proyectos de diseño web. Para ello se debe tener en consideración si el formato provee las funcionalidades requeridas, si el formato representa de manera efectiva el contenido de la imagen y si la audiencia objetivo puede visualizar los archivos de imagen seleccionados.
Existen varios formatos para mostrar imágenes en la web. La diferencia fundamental entre ellos son los algoritmos para codificar y decodificar las imágenes. En este artículo fueron presentados varios formatos de imagen que son utilizados en el diseño web, pero todavía constituye un reto, saber exactamente cuál es el adecuado para cada caso, pues todos tienen ventajas e inconvenientes.
Los formatos tradicionales GIF, JPEG y PNG continúan siendo los más utilizados, principalmente por el soporte universal en los navegadores y por el amplio conocimiento que se tiene de ellos. El formato SVG, compatible con los navegadores modernos, permite la utilización de gráficos escalables sin pérdida de calidad; lo que resulta muy útil en dispositivos de alta densidad de píxeles. Los denominados formatos de próxima generación WebP, HEIC, AVIF y JPEG XL poseen características superiores en cuanto a calidad y compresión. Hoy día, WebP es el de mayor compatibilidad en los navegadores, por lo que es el más usado de ellos. Se espera que los formatos HEIC, AVIF y JPEG XL sean soportados en un mayor número de navegadores para que gradualmente sustituyan a los formatos tradicionales en el diseño web.
De momento debe ser prioridad la evaluación de los formatos de imagen como parte del proceso de diseño web, lo que permitirá seleccionar el más eficiente en cada caso y mejorar la experiencia de usuario.
Alakuijala, J., Asseldonk, R. van, Boukortt, S., Bruse, M., Comșa, I. M., Firsching, M., Fischbacher, T., Kliuchnikov, E., Gomez, S., Obryk, R., Potempa, K., Rhatushnyak, A., Sneyers, J., Szabadka, Z., Vandevenne, L., Versari, L. & Wassenberg, J. (2019). JPEG XL next-generation image compression architecture and coding tools. Applications of Digital Image Processing XLII, Proceedings SPIE 11137. 112-124. Recuperado de https://doi.org/10.1117/12.2529237
Alakuijala, J., Sneyers, J., Versari, L. & Wassenberg, J. (2021). JPEG white paper: JPEG XL image coding system. Lausanne. JPEG.
Barman, N. & Martini, M. G. (2020). An evaluation of the next-generation image coding standard AVIF. Twelfth International Conference on Quality of Multimedia Experience (QoMEX).
Caniuse. (2022a, marzo 27). «HEIC» | Can I use... Support tables for HTML5, CSS3, etc. Recuperado de https://caniuse.com/?search=HEIC
Caniuse. (2022b, abril 11). AVIF image format | Can I use... Support tables for HTML5, CSS3, etc. Recuperado de https://caniuse.com/avif
Caniuse. (2022c, abril 11). «webp» | Can I use... Support tables for HTML5, CSS3, etc. Recuperado de https://caniuse.com/?search=webp
Caniuse. (2022d, abril 12). SVG in HTML img element | Can I use... Support tables for HTML5, CSS3, etc. Recuperado de https://caniuse.com/svg-img
CompuServe Incorporated. (1987). GIF Graphics Interchange Format: A standard defining a mechanism for the storage and transmission of raster-based graphics Information [Graphics Interchange Format (GIF) Specification]. CompuServe Incorporated. Recuperado de www.w3.org/Graphics/GIF/spec-gif87.txt
CompuServe Incorporated. (1989). Graphics Interchange Format Version 89a [Graphics Interchange Format (GIF) Specification]. CompuServe Incorporated. Recuperado de http://www.w3.org/Graphics/GIF/spec-gif89a.txt
Concolato, C. & Klemets, A. (2019). AV1 Image File Format (AVIF). The Alliance for Open Media. Recuperado de https://aomediacodec.github.io/av1-avif/v1.0.0.html
Coyier, C. (2016). Practical SVG. Nueva York. A Book Apart.
Google Developers. (s. f.). An image format for the Web. Recuperado el 2 de abril de 2022 de https:/developers.google.com/speed/webp
GoogleGit. (2020). WebP 2: Experimental successor of the WebP image format. Recuperado de https://chromium.googlesource.com/codecs/libebp2/
Gorczyca, M. (2019, junio 27). The ultimate guide to web image and animation optimization. Onely. Recuperado de https://www.onely.com/blog/ultimate-guide-image-animation-optimization/
Hannuksela, M. M., Lainema, J. & Malamal Vadakital, V. K. (2015). The high efficiency image file format standard [Standards in a nutshell]. IEEE Signal Processing Magazine, 32(4), 150-156. Recuperado de https://doi.org/10.1109/MSP.2015.2419292
ISO/IEC-10918. (1994). Information technology—Digital compression and coding of continuous-tone still images: Requirements and guidelines.
JPEG. (2019). Overview of JPEG XL. Recuperado de https://jpeg.org/jpegxl/
Kodak Corporation. (1999). Kodak image dataset. Recuperado de http://www.cs.albany.edu/~xypan/research/snr/Kodak.html
Li, Z. N., Drew, M. S. & Liu, J. (2021). Fundamentals of Multimedia (3ra ed.). Springer Nature Switzerland AG.
Lynch, P. J. & Horton, S. (2016). Web style guide: foundations of user experience design (4ta ed.). Yale University Press.
Mavlankar, A., Cock, J. de, Concolato, C., Swanson, K., Moorthy, A. & Aaron, A. (2020, febrero 13). AVIF for Next-Generation Image Coding. Netflix Technology Blog. Recuperado de https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4
Minnick, J. (2017). Web design with HTML5 & CSS3, Comprehensive (8.a ed.). Cengage Learning.
Murray, J. D. & vanRyper, W. (1996). Encyclopedia of graphics file formats (2da ed.). O’Reilly & Associates Inc.
Osmani, A. (2021a). Image Optimization. Smashing Media AG.
Osmani, A. (2021b, septiembre 29). Using modern image formats: AVIF and WebP. Smashing Magazine. Recuperado de https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/
Pennebaker, W. & Mitchell, J. (1993). JPEG Still image data compression standard. Van Nostrand Reinhold.
Pettersson, R. (2021). Image Design. Institute for Infology.
Phillips, D. (1992). Lzw data compression. The Computer Application Journal, 27(6), 36-48.
Portis, E. & Sillars, D. (2021). The 2021 web almanac: Media. The 2021 web almanac (Vol. 3, Número 5). HTTP Archive. Recuperado de https://almanac.httparchive.org/en/2021/media
Rabbat, R. (2010, septiembre 30). WebP, a new image format for the web. Chromiun Blog. Recuperado de https://blog.chromium.org/2010/09/webp-new-image-format-for-web.html
Rao, K. R., Domínguez, H. O. & Subbarayappa, S. (2021). JPEG Series. River Publishers.
Robbins, J. N. (2006). Web design in a nutshell (3ra ed.). O’Reilly Media.
Roelofs, G. (2003). PNG: The definitive guide (2da ed.). O’Reilly & Associates. Recuperado de http://www.libpng.org/pub/png/book/
Sayood, K. (2006). Introduction to data compression (3ra ed.). Morgan Kaufmann Publishers.
W3C. (2001). Scalable vector graphics (SVG) 1.0 specification. Recuperado de https://www.w3.org/TR/2001/REC-SVG-20010904/
W3C. (2011). Scalable vector graphics (SVG) 1.1 (2da ed.). Recuperado de https://www.w3.org/TR/2011/REC-SVG11-20110816/
W3Techs. (2022, marzo). Usage statistics of image file formats for websites, March 2022. Recuperado de https://w3techs.com/technologies/overview/image_format
Welch, T. (1984). A technique for high-performance data compression. Computer, 17(6), 8-19. Recuperado de https://doi.org/10.1109/MC.1984.1659158
Yalanska, M. (2018, noviembre 13). Web design: 5 basic types of images for web content. Tubik Blog: Articles About Design. Recuperado de https://blog.tubikstudio.com/web-design-basic-types-of-images-web-content/