Mostrar imagen AVIF
(en lugar de JPG-PNG-GIF)
si AVIF está disponible:

DESDE EL CSS:

EMBEBIDO EN EL HTML:

La mejor manera de hacerlo, es con un SERVICE WORKER para interceptar las solicitudes de imágenes y redirigirlas a la versión .avif si es posible.

Esto se puede hacer mediante la detección de la extensión de la imagen en la URL de la solicitud y reemplazándola por .avif antes de que la imagen se cargue.

De ello se encarga el archivo sw.js que se encuentra en la raiz de este proyecto, que va en la raiz para que todas las subcarpetas se vean alcanzadas por el Service Worker, y debe ser "registrado" para garantizar todas las funcionalidades, en el index.html tal como se encuentra en este index. El Service Worker NO funcionará hasta haberse registrado (que el usuario abra index.html).

Funciona tanto en imágenes en HTML como en CSS, tiene compativilidad con navegadores antiguos y trabaja de manera global, interactuando con las solicitudes a nivel de navegador, facilitando la instalación.