Hai sentito parlare di WebP e AVIF, magari leggendo un report di PageSpeed che ti suggerisce di «pubblicare le immagini in formati moderni». In questa guida vediamo in parole semplici cosa sono, perché pesano meno di JPEG e PNG, come fa il browser a ricevere il formato giusto e come li usa Image Optimizer, il nostro servizio gratuito per tutti i clienti.
Perché le immagini contano così tanto
Una foto caricata così come esce dalla fotocamera o da un programma di grafica può pesare più di tutto il resto della pagina messo insieme. E spesso è proprio la foto di apertura a essere il «contenuto principale» che Google misura con l’LCP, il tempo in cui compare l’elemento più grande della pagina. Meno pesa quella foto, prima compare la pagina, soprattutto da smartphone fuori dal Wi-Fi.
I formati classici: JPEG e PNG
- JPEG è il formato delle fotografie. Comprime bene, perdendo dettagli che l’occhio nota poco. Non gestisce la trasparenza.
- PNG è il formato di loghi, grafiche, schermate e immagini con trasparenza. Non perde dettagli, ma sulle foto produce file molto grandi.
Sono formati di decenni fa, letti da qualunque programma, ma non sono i più efficienti.
WebP
WebP è un formato più recente che sa fare il lavoro di entrambi: comprime le foto come un JPEG, ma con file più piccoli a parità di qualità, e gestisce la trasparenza come un PNG. Oggi lo leggono tutti i browser attuali. Su un negozio online con oltre 6.000 immagini, la conversione in WebP ha tolto il 57% del peso.
AVIF
AVIF è il più giovane dei due e, a parità di qualità, di solito il più leggero. Su un’immagine del nostro sito ha tolto il 67% del peso senza differenze visibili. In un caso reale, una foto di apertura in PNG da 2,7 MB sarebbe scesa a circa 71 KB in WebP e a circa 48 KB in AVIF.
AVIF però è più delicato da tarare. All’inizio, con impostazioni troppo prudenti, usciva spesso più pesante del WebP: abbiamo confrontato decine di immagini vere, guardandole e misurandole, e cambiato la taratura per tutti. Oggi l’AVIF esce in media circa il 20% più leggero del WebP, con una qualità visiva superiore.
Come fa il browser a ricevere il formato giusto
Ogni volta che un browser chiede un’immagine, dichiara anche quali formati sa leggere. Image Optimizer usa questa informazione per consegnare a ciascun visitatore la versione più leggera che il suo browser supporta:
- se il browser legge l’AVIF ed esiste una versione AVIF, riceve quella;
- altrimenti, se legge il WebP, riceve il WebP;
- altrimenti riceve una copia ottimizzata nello stesso formato dell’originale (JPEG o PNG).
L’indirizzo dell’immagine nella pagina non cambia: il sito non se ne accorge, e non devi modificare temi, articoli o schede prodotto. Anche chi ha un browser datato riceve un’immagine alleggerita.
Gli originali restano intatti
È il punto più importante: Image Optimizer non modifica mai i file che hai caricato. Le versioni ottimizzate vengono create accanto e consegnate al loro posto. Se un giorno spegni il servizio, il sito torna a servire gli originali, esattamente come li avevi caricati.
Quando la versione «nuova» non conviene
Non sempre il formato moderno vince. Un’icona PNG di pochi KB o un JPEG già compresso possono diventare più pesanti una volta convertiti. In questi casi Image Optimizer scarta la variante e continua a servire l’originale: nell’elenco del pannello queste immagini compaiono come Native ottimali. Non è un errore, è la scelta più leggera.
Se per qualche motivo vuoi comunque le varianti, nella configurazione del dominio c’è l’opzione Forza varianti anche per immagini piccole. Nella maggior parte dei siti conviene lasciarla spenta.
Quale qualità scegliere
Nella configurazione di ogni dominio puoi indicare una qualità da 40 a 100 per ciascun formato. Attenzione: ogni formato ha la sua scala, e lo stesso numero non significa la stessa resa.
| Formato | Valore proposto | Quando cambiarlo |
|---|---|---|
| WebP | 80 | Alzalo solo per foto in cui i dettagli fini sono il prodotto (gioielli, tessuti) |
| AVIF | 60 | Più in alto si pagano byte senza differenze visibili |
| JPEG ottimizzato | 80 | Per chi non legge i formati moderni |
| PNG ottimizzato | 80 | Come sopra |
Il modo migliore per decidere è guardare. Nel pannello, dall’elenco delle immagini, apri il confronto: trascini una barra verticale e vedi a sinistra l’originale e a destra la versione ottimizzata, con dimensioni e risparmio. Controlla le zone critiche: sfumature del cielo, pelle, testi dentro l’immagine, bordi netti.
Domande frequenti
Devo convertire io le immagini prima di caricarle?
No. Carica pure JPEG e PNG come sempre: la conversione avviene da sola, anche per le immagini già pubblicate.
Le immagini occupano più spazio?
Sì, le copie ottimizzate si aggiungono agli originali. Nel modulo WordPress trovi la voce Spazio usato dalle copie. Se lo spazio del piano finisce, il servizio si sospende finché non ne liberi un po’.
Migliora il punteggio di PageSpeed?
Spesso sì, soprattutto quando la foto più grande è il contenuto principale della pagina. Non è però una bacchetta magica: se la pagina è lenta per script pesanti o per un server sotto sforzo, serve lavorare anche lì, per esempio con iWebLab Cache.
Funziona con il mio sito?
Ci sono un modulo per WordPress e uno per PrestaShop, con il cruscotto dentro il sito. Per altri tipi di sito apri un ticket e valutiamo insieme.