Agregar AVIF al Sitio 2026: Setup 5 Minutos [Paso a Paso]

Visión General

Añadir soporte AVIF a tu sitio requiere tres pasos: generar imágenes, configurar servidor, actualizar HTML.

La buena noticia es que no tienes que elegir un solo formato.

Hay dos enfoques principales: picture tag del lado del cliente o content negotiation del lado del servidor.

Método Picture Tag

El tag picture HTML5 permite especificar múltiples fuentes con fallback automático.

• Pro: Funciona en todas partes, sin config de servidor.
• Contra: HTML más verboso.

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Imagen hero">
</picture>

Content Negotiation

Con content negotiation, el servidor elige el formato basándose en el header Accept.

• Pro: HTML limpio, automático.
• Contra: Requiere config de servidor.

# Configuración Nginx
location ~* \.(jpg|jpeg|png)$ {
  add_header Vary Accept;
  try_files $uri$avif_suffix $uri =404;
}

CSS Background

Para imágenes de fondo CSS, usa @supports o image-set.

.hero {
  background-image: url('hero.jpg');
}

@supports (background-image: url('test.avif')) {
  .hero {
    background-image: url('hero.avif');
  }
}

Pruebas

Verifica que la implementación funcione correctamente.

• Chrome DevTools: La pestaña Network muestra qué formato se carga.
• Lighthouse: Verifica sugerencias de formatos de imagen.