AVIF para Desarrolladores

Guía AVIF para Desarrolladores

Guía completa para implementar AVIF en tus proyectos web.

Implementación HTML

Usa el elemento picture para soporte progresivo:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descripción" loading="lazy">
</picture>

Implementación CSS

Usa @supports para imágenes de fondo:

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

Herramientas de Build

• Sharp: Biblioteca Node.js para conversión de imágenes
• Squoosh CLI: Herramienta CLI de Google para optimización
• ImageMagick: Herramienta CLI versátil con soporte AVIF

Consejos de Rendimiento

• Siempre usa lazy loading para imágenes bajo el pliegue
• Implementa imágenes responsivas con srcset
• Considera calidad 60-80 para la mayoría de casos
• Prueba en varios dispositivos y conexiones