Skip to content

Joan León

Detecta el soporte AVIF para las imágenes de tu CSS

Images, Optimization, Media, AVIF, CSS3 min read

En el artículo AVIF, ¿el formato de imagen definitivo? conocimos este nuevo formato de imágenes, qué nos ofrece un equilibrio de calidad/peso muy interesante. Vamos a ver cómo implementarlo en las imágenes de nuestro CSS.

Imágenes en CSS

Ya hace mucho tiempo que tenemos la posibilidad de añadir imágenes de fondo en los elementos HTML. Lo hacemos con CSS, concretamente con la propiedad background-image.

Y a parte de controlar el tamaño, posición o repeticiones, desde CSS no podemos controlar nada más. Es por eso que no es de extrañar que la nueva versión del módulo de imagen CSS venga con novedades que nos solucionarán problemas actuales.

El W3C (el World Wide Web Consortium (W3C) es una comunidad internacional que desarrolla estándares que aseguran el crecimiento de la Web a largo plazo) está trabajando en el borrador CSS Images Module Level 4, en él se detalla todo lo relacionado con las imágenes, hay un montón de propiedades nuevas muy interesantes, pero hoy nos vamos a centrar en image-set, la cual nos permite definir diferentes imágenes según la resolución del dispositivo.

Es muy similar a lo que ya podemos hacer en el elemento HTML <picture>.

En el tag <picture> también podemos definir el tipo de imagen, como vimos en el artículo sobre AVIF.

Pues en la especificación de la versión 4 del CSS Image Module se ha tenido en cuenta, y atención, podremos definir el type de las imágenes de background 🤩.

Será fantástico poder optimizar la carga de las imágenes según la resolución o densidad, y el tipo de imagen soportado por el navegador.

¿Lo puedo utilizar ya?

Lamentablemente la respuesta es no, a día de hoy no hay soporte por parte de los navegadores. Sí que tenemos disponible un plugin de PostCSS que nos permite empezar a utilizar la funcionalidad de imágenes según la densisad del dispositivo.

Se trata de postcss-image-set-function, el cual nos permite escribir la nueva funcionalidad en nuestro CSS y PostCSS se encarga de transpilarlo al CSS soportado por todos los navegadores. Según podemos ver en la documentación del plugin.

Si lo miramos en detalle, no tiene mucho misterio, simplemente los está definiendo dentro de media queries, así si el navegador soporta image-set por cascada, utilizará la nueva funcionalidad, sino, hará uso de las media queries. Sencillo, pero eficaz.

¿Y qué hay del tipo o formato de imágenes?

El type no lo podemos emular u optener desde CSS, así que tendremos que ayudarnos de JavaScript para "parchear" el problema de forma temporal.

JavaScript al rescate

Con JavaScript podemos aplicar un parche, hasta que lo tengamos de forma nativa en CSS. Lo podemos conseguir haciendo una comprovación del soporte al formato AVIF.

En nuestro CSS vamos a añadir una imagen de fondo en el body del documento.

Sé que se puede poner la imagen en formato JPEG directamente en el body y sobreescribir el background-image en el caso de que el navegador tenga soporte, pero para el ejemplo creo que queda más claro.

Ahora necesitamos añadir el JavaScript que añada una clase u otra según si el cliente es capaz de representar imágenes AVIF o no.

Lo primero que tenemos es la supportsAvif() que es la encargada de detectar el soporte. La manera de hacerlo es cargar una imagen AVIF, en base64 en este caso, y posteriormente crear el elemento imagen con createImageBitmap. Esto nos devolverá un true o false. Y con la ternaria asignada a la constante classAvif sabremos si el navegador soporta AVIF o no.

Ejemplo

Conclusiones

En cuanto tengamos disponible CSS Image Module Level 4 en nuestros navegadores, será muy simple optimizar la carga de las imágenes según el dispositivo y soporte de formatos. Pero de momento, podemos apoyarnos en JavaScript para conseguir una mejor experiencia a nuestras/os usuarias/os.

Agradecimientos

Quiero dar las gracias a Jon Sneyers y Kornel, unos auténticos magos de los coders/decoders de imágenes, por su ayuda con la optención de un base64 de una imagen de formato AVIF lo más optimizado posible.

Compartir, feedback y erratas

  • Si te ha gustado el artículo, compártelo para llegar a más gente.
  • Si tienes feedback que me pueda ayudar a mejorar, siéntete libre de pasarme un DM.
  • Si ves alguna errata o hay algo que no planteo bien, también agradezco las correcciones DM.

Sígueme en...