En esta entrada vamos a hablar acerca de los nuevos formatos de imagen digital que son el presente y el futuro respectivamente hablando en términos de optimización y rendimiento web: WebP y AVIF.
Mientras que WebP está ampliamente aceptado por la gran mayoría de navegadores y tiene soporte nativo desde la versión 5.8 de WordPress, AVIF todavía tiene un camino que recorrer en cuanto a soporte.
A continuación vamos a explicar la diferencia con el resto de formatos y porque deberías actualizarlos a los mencionados anteriormente:
Formatos de imagen
Antiguos formatos
Para poder entender un poco el contexto es importante conover de dónde venimos, y por ello vamos a hablar sobre los formatos de imagen que se utilizaban anteriormente.
TIFF
TIFF es un formato de imagen de tramas versátil y flexible. Fue desarrollado por Microsoft, Aldus Corporation y Hewlett Packard entre otros en 1986 para estandarizar el intercambio de imágenes. Hoy en día, TIFF es el formato estándar para fotografías rasterizadas y para impresión. En un formato TIFF, cualquier objeto, incluida la información vectorial y de texto, se almacena como datos de trama. Permite la transparencia gracias a un canal alfa.
Un archivo TIFF admite escala de grises y RBG,CMYK y espacio de color LAB. El formato permite una profundidad de color de hasta 16 bits por canal de color y, por lo tanto, es ideal para el intercambio de datos durante una conversión RAW.
La abreviatura TIFF, o menos habitual TIF, significa “Tagged Image File Format”. Esta designación indica la estructura de un formato TIFF: en esencia, el archivo consta de campos de datos que están etiquetados para contener metadatos completos. Es un formato de archivo que genera imágenes muy pesadas.
Todo y no ser un formato estándar en web (nunca ha sido su próposito) es importante conocerlo ya que en el fondo la evolución de los formatos permitirá llegar a la calidad TIFF pero con un peso muy reducido.
GIF
En 1987 nace el formato GIF, el precursor de los formatos enfocados en web de la mano de Compuserve para el intercambio de gráficos en una entonces nueva tecnología llamada internet.
Y durante esa primera época fue uno de los formatos más utilizados en la red. GIF codifica los gráficos solo en ocho bits por píxel. Las imágenes presentan un peso hasta tres veces menor que en JPEG o formatos similares trabajan hasta a veinticuatro bits por píxel. Ahora bien, solo permiteuna paleta cromática limitada a las doscientas cincuenta y seis tonalidades que permite el único byte por píxel de memoria con que trabaja. No puede, pues, reproducir el modo de color RGB. Esta capacidad cromática tan limitada se conoce como paleta indexada.
Es importante indicar las muchas limitaciones que tuvo este formato en un primer momento, y es que las primeras redes de comunicaciones pedían especialmente trabajar con archivos de peso muy reducido por su baja potencia. En 1989 Compuserve publicó una nueva versión del formato, llamada GIF89a, que posibilitaba designar uno o varios colores de la paleta como transparentes.
Este tipo de recurso es conocido como transparencia de índice y permite, de hecho, integrar imágenes silueteadas en el diseño web. Actualmente el uso del formato GIF es muy reducido y se limita a gráficos con una paleta de colores mínima, como pueden ser algunas imágenes monocromáticas.
Otro formato es el GIF animado que integra una secuencia de diferentes fotogramas en GIF. La reproducción sucesiva de estos reproduce una secuencia animada, hasta hace poco este era otro de los motivos por los que se utilizaba este formato.
JPEG
El formato JPEG surge, como respuesta a la necesidad de utilizar en internet imágenes a veinticuatro bits por píxel y superar la limitada paleta cromática del formato GIF.
Así, el formato JPEG admite el modo RGB (específico para uso en pantallas) y también permite trabajar solo en imágenes en escala de grises. Con todo resulta eficiente para imágenes fotográficas. Reproduce correctamente degradados, pero no tanto contornos finos, detalles precisos o áreas de color plano. Por lo tanto, no reproduce con consistencia imágenes con líneas o textos, a pesar de que disponemos de estrategias de compresión que pueden minimizar esta limitación.
El sistema de compresión del JPEG obtiene una ratio de compresión superior al algoritmo LZW o la que usará el formato PNG. Constituye un sistema muy eficiente que consigue reducir de forma significativa la medida de los archivos. Aun así, como decíamos, la compresión de JPEG implica pérdida de datos. Esta pérdida es regulable pero no hay que perder de vista que a mayor compresión
se perderá también más información.
De hecho, comprimir totalmente la imagen hará que la calidad de la misma sea nula. El formato permite configurar diferentes calidades relacionadas con el nivel de compresión. El rango más habitual especifica trece niveles, del 0 al 12, siendo 12 el de menor compresión y el de mayor calidad y cero lo contrario, personalmente en JPEG solemos trabajar en una calidad entre 6 y 8 dependiendo de la imagen.
A día de hoy sigue siendo el formato estándar para trabajar en web gracias a que programas como photoshop no admiten de manera predeterminada los nuevos formatos y que hasta hace poco el soporte a nuevos formatos no era tan estandarizado en los mismos navegadores o CMS. Actualmente los nuevos formatos lo van solapando progresivamente al JPEG por términos de calidad y rendimiento.
PNG
Como respuesta a las restricciones en el uso del algoritmo de compresión LZW, en 1995 la comunidad de software libre emprendió el desarrollo de un nuevo formato gráfico para la web.
El resultado fue el nuevo formato PNG (Portable Network Graphics).
Existen tres versiones en función del número de bits usados para la codificación de la imagen: PNG8, PNG24 y PNG32. PNG8 supone la versión reducida, con paleta indexada, mientras que PNG24 y PNG32 ofrecerían la versión desarrollada que opera con el rango de colores del modo RGB. La primera versión, en todo caso, resultará suficiente para trabajar con imágenes monócromas o blanco. y negro mientras que será necesario utilizar las versiones PNG24 y PNG32 para imágenes de alt calidad.
La versión PNG8 admite transparencia de índice. No así la versión PNG24, a pesar de que la versión PNG32 puede guardar canal alfa y por lo tanto admite diferentes niveles de transparencia. Esto, permite guardar el silueteado de una figura con los contornos suavizados respecto al fondo.
Su alto peso lo ha hecho ser utilizado en situaciones concretas, como imágenes que necesiten transparencia con buena definición.
Nuevos formatos
Una vez vistos los formatos clásicos y como muchos de ellos siguen en vigor actualmente dentro de los estándares (que no la buenas prácticas) vamos a ver los nuevos formatos de imagen y sus ventajas.
SVG
Durante mucho tiempo, uno de los mayores problemas de los formatos vectoriales fue su incompatibilidad con el lenguaje web HTML. Esto cambió con el desarrollo del formato SVG (scalable vector graphics). Este formato, basado en el lenguaje XML, cuenta con el apoyo del W3 Consortium (W3C), el organismo independiente que define los estándares de desarrollo de la World Wide Web.
Actualmente la mayoría de los navegadores admiten este formato vectorial multicompatible.
SVG ofrece, además de la condición vectorial, la ventaja de admitir animaciones y programación de interactividad a partir de lenguajes de script. Una de las ventajas de un archivo vectorial es que al no tener píxeles las imágenes no pierden calidad al cambiar resolución, pero tiene varios handicaps. Por un lado no podemos optimizar las imágenes SVG ya que se compronen a base de coordenadas HTML y CSS y por otro lado, que al ser coordenadas solo podemos utilizarla para dibujos y no para fotografías.
Este formato se suele utilizar con logos, íconos dentro de un sitio, ilustraciones según su tamaño y animaciones en HTML5.
WebP
Y han tenido que pasar más de veinte años para actualizar los formatos de las imágenes en Internet. Con el fin de mejorar la experiencia de usuario y optimizar el contenido de las web, Google se puso manos a la obra para crear un formato nuevo que mejorase en cuanto a calidad y rendimiento a los tradicionales con un formato nuevo que comprimiera mejor que JPEG y que tuviera la calidad y la posibilidad de incluir transparencia de PNG y ¡Además tuviese la posibilidad de animar como un GIF! Así en 2011 nació el formato WebP. Es un formato de imagen de código abierto al que en 2014 se le dio soporte en sus navegadores y sistemas operativos como lo son Chrome y Android.
WebP es casi un 40% más ligero que JPEG obteniendo una calidad similar.
Ha tardado años, pero ya prácticamente todos los navegadores aceptan el formato de manera estándar, y el core de WordPress también de manera nativa lo tiene en sus formatos desde la versión 5.8 (junio de 2021) por lo que todo indica que el sorpaso al JPEG no va a tardar en llegar.
AVIF
Parece irónico pero en 2019, justo cuando el formato WebP empezaba a revolucionar el mundo de las imágenes en Internet, nació un nuevo formato de imagen llamado a desterrar al WebP. Se trataba de AVIF, desarrollado por Alliance for Open Media, una organización sin ánimo de lucro promovida por empresas como Netflix, Amazon, Google o Apple que pretende nuevos formatos y productos de código abierto que ahorren al usuario las guerras de patente que tradicionalmente han supuesto pérdidas para nosotros y por consiguiente un gran obstáculo para la innovación.
La gran aportación de la tecnología de AVIF es que permite comprimir imágenes mucho mejor que WebP aunque pareciese que imposible después de tanto tiempo estancados en JPEG.
AVIF tiene un poder de compresión que aproximadamente. esel doble que el que tiene WebP y la diferencia entre ambas imágenes es imperceptible para tus usuarios. Además de todo AVIF mejora todavía más la calidad de imagen que WebP con sus propiedades de transparencia y animación por lo que a día de hoy es el rey en cuánto a términos de calidad-eficiencia.
El gran problema de AVIF es la brecha de compatibilidades que hay hoy en día respecto a este formato y es que actualmente solo es compatible en los dispositivos y prodiuctos de Google, en Firefox y en Opera. Otra gran dificultad es el poco soporte por parte del software, ya que para photoshop al igual que hay que hacer con WebP hay que utilizar plugins para poder usar este formato y en WordPress estamos en la misma situación.
En definitiva
Tras hacer un poco de repaso podemos ver que el presente de los formatos de imagen a utilizar en web pasan por el WebP ya que multitud de plugins como imagify o SiteGround optimizer ofrecen el servicio de conversión de imagenes a WebP y su posterior optimización, pero queda claro que es un dormato al que no le queda un largo recorrido ya que AVIF se le asoma por la retaguardia. apasos agigantados.
Si quieres utilizar este nuevo formato, recomendamos el uso de CloudFlare que ya ofrece un servicio de conversión nativo desde sus servidores, sino tendrás que utilizar medios “manuales” o esperar a que plugins como imagify o SiteGround Optimizer se apliquen y sean compatibles con este formato.