AVIF per Sviluppatori

Guida AVIF per Sviluppatori Web

Guida completa all'implementazione di AVIF nei tuoi progetti web.

Implementazione HTML

Usa l'elemento picture per un supporto progressivo:

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

Implementazione CSS

Usa @supports per immagini di sfondo:

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

Strumenti di Build

• Sharp: Libreria Node.js per la conversione immagini
• Squoosh CLI: Strumento CLI di Google per ottimizzazione immagini
• ImageMagick: Strumento CLI versatile con supporto AVIF
• libavif: Libreria di riferimento per codifica/decodifica AVIF

Suggerimenti per le Performance

• Usa sempre lazy loading per le immagini sotto la piega
• Implementa immagini responsive con srcset
• Considera la qualità 60-80 per la maggior parte dei casi d'uso
• Testa su vari dispositivi e connessioni