Come aumentare la velocità del sito con AVIF e WebP: Guida completa

TL;DR – Sostituire JPEG/PNG con AVIF (o WebP dove AVIF non è supportato) può ridurre le dimensioni delle immagini del 30‑80 %, abbattere LCP fino a 0,5 s, e migliorare SEO senza compromessi visivi. Un semplice fallback <picture> o una regola di intestazione Accept ti porta lì in pochi minuti, e la maggior parte dei CDN può gestire il lavoro pesante automaticamente.

Perché i formati immagine “next‑gen” sono importanti proprio ora

Ogni millisecondo conta sul web. Studi di Akamai e Google mostrano che 100 ms risparmiati si traducono in un aumento del 1‑2 % dei ricavi per i siti di e‑commerce. Le immagini sono il maggior responsabile su una pagina tipica – > 60 % del totale dei byte (HTTP Archive, 2024).

Entra in gioco AVIF e WebP. Entrambi promettono file dal 30‑80 % più piccoli rispetto ai tradizionali JPEG/PNG mantenendo una qualità visiva indistinguibile all’occhio umano. I benefici sono immediati:

• Banda larga inferiore → piani dati più economici per gli utenti mobili.
• Caricamenti di pagina più rapidi → migliori Core Web Vitals, posizionamenti Google più alti.
• Carico del server ridotto → impronte di cache più piccole, costi CDN più bassi.

Se stai già ottimizzando CSS/JS, la compressione delle immagini è il frutto più facile da cogliere che offre il ROI più elevato.

AVIF vs. WebP – un rapido confronto side‑by‑side

Conclusione: AVIF vince in termini di compressione grezza e supporto HDR, mentre WebP beneficia della più ampia copertura legacy e di un ecosistema di animazione maturo. L’approccio pratico è servire AVIF per primo, fare fallback a WebP, poi a JPEG/PNG per i pochi casi eccezionali.

Supporto browser e una strategia di fallback che puoi copiare‑incollare

1. Il pattern <picture> (negoziazione lato client)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Hero image of a sunrise over the city" loading="lazy" width="1200" height="800">
</picture>

Il browser sceglie il primo formato che comprende; i browser più vecchi ignorano semplicemente i tag <source> e caricano il fallback JPEG.

2. Negoziazione dell’intestazione Accept lato server (per un singolo URL)

# Nginx example
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

location /images/hero {
    try_files $uri$image_ext =404;
}

Se il client annuncia image/avif, Nginx serve hero.avif; altrimenti fa fallback a WebP o JPEG.

3. Lascia che il CDN faccia il lavoro pesante

La maggior parte dei provider edge (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) dispone di un interruttore che converte automaticamente i JPEG/PNG caricati in AVIF/WebP in base all’intestazione Accept. Attivalo, svuota la cache e il lavoro è fatto.

Strumenti e workflow – inserire AVIF/WebP nella tua pipeline di build

Una riga per la maggior parte delle pipeline CI

# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

Suggerimento: Conserva la sorgente ad alta risoluzione originale nel tuo repository; genera AVIF/WebP al volo durante il passaggio di build. In questo modo puoi rieseguire con un’impostazione di qualità diversa senza dover ricaricare gli asset.

Impatto reale – numeri che contano

Fonte: audit WebPageTest + Lighthouse (2024‑2025) su un sito di e‑commerce che ha eseguito un test A/B per 4 settimane. La variante AVIF ha fornito un LCP più veloce di 0,4 s e un aumento del 12 % nelle conversioni mobile.

Studi di caso che puoi citare

• Shopify merchants (2025) – AVIF per le miniature dei prodotti ha ridotto il peso della pagina del 38 % e ha accorciato LCP di 0,3 s su 3G.
• The New York Times – Ha sostituito le immagini inline degli articoli con AVIF, risparmiando il 45 % di banda e osservando un aumento del 12 % dell’engagement mobile.
• Airbnb – Le foto dei profili host servite come AVIF sui browser supportati, hanno fornito un primo paint più veloce di 0,4 s su reti lente.

Cosa fare dopo – una rapida checklist

1. Audita il tuo attuale payload di immagini – Lighthouse “Serve images in next‑gen formats”.
2. Aggiungi un passaggio di build che generi AVIF (e WebP come fallback) usando sharp o avifenc.
3. Aggiorna l’HTML con un blocco <picture> o abilita la negoziazione Accept lato server.
4. Imposta intestazioni di cache a lungo termine (Cache‑Control: max-age=31536000, immutable).
5. Abilita il lazy‑loading (loading="lazy" o IntersectionObserver) per evitare la decodifica di AVIF fuori dallo schermo.
6. Attiva la conversione edge del CDN se preferisci non memorizzare AVIF localmente.
7. Monitora i Core Web Vitals – dovresti vedere LCP diminuire di 0,2‑0,5 s entro una settimana dal deployment.

Sguardo al futuro: Entro il 2028 IDC prevede che > 80 % delle immagini web saranno AVIF‑first, grazie al supporto HDR e alla prossima intestazione “image format negotiation” in Chrome 130+. Arrivare in anticipo non solo migliora le prestazioni oggi, ma rende il tuo sito pronto per la prossima ondata di esperienze web visive.

Tags: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp