Aggiungere AVIF al Sito 2026: Setup in 5 Minuti [Passo-Passo]

Panoramica Implementazione

Aggiungere supporto AVIF al tuo sito richiede tre passaggi: generare le immagini, configurare il server, aggiornare l'HTML.

La buona notizia è che non devi scegliere un solo formato.

Ci sono due approcci principali: picture tag o content negotiation.

Metodo Picture Tag

Il tag picture HTML5 permette di specificare multiple sorgenti con fallback.

• Pro: Funziona ovunque, nessuna config server.
• Contro: HTML più verboso.

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

Content Negotiation

Con content negotiation, il server sceglie il formato in base all'header Accept.

• Pro: HTML pulito, automatico.
• Contro: Richiede config server.

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

CSS Background

Per immagini CSS background, usa @supports o image-set.

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

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

Testing

Verifica che l'implementazione funzioni correttamente.

• Chrome DevTools: Network tab mostra quale formato viene caricato.
• Lighthouse: Verifica i suggerimenti sui formati immagine.