AVIF o WebP in WordPress: quale formato scegliere e come ottimizzare le immagini senza problemi di compatibilità

AVIF può ridurre ulteriormente il peso delle immagini rispetto a WebP, ma non è automaticamente la scelta migliore per ogni sito WordPress. La decisione dipende dalle immagini pubblicate, dal supporto dell’hosting, dal pubblico e dal modo in cui il sito consegna i file a browser, social, email e servizi esterni.

Per molti siti professionali, la soluzione più affidabile è generare AVIF per i browser compatibili, mantenere WebP come alternativa e conservare JPEG o PNG per gli usi che richiedono la massima compatibilità. Non si tratta quindi soltanto di scegliere un’estensione: conta il sistema di conversione, cache, markup e integrazioni.

Risposta rapida: WebP è la scelta più semplice per adottare un formato moderno con ampia compatibilità. AVIF è indicato soprattutto per fotografie e immagini hero pesanti, ma va adottato dopo test di qualità e consegna. Il semplice caricamento di un file AVIF in WordPress non crea automaticamente fallback WebP o JPEG/PNG.

WebP o AVIF: differenze pratiche e scelta consigliata

WebP e AVIF supportano compressione con e senza perdita, trasparenza alpha e animazioni. Entrambi possono essere più efficienti di JPEG e PNG, ma il risultato dipende dal soggetto dell’immagine, dall’encoder, dalle impostazioni usate, dalle dimensioni in pixel e dai metadati conservati. La panoramica sui formati immagine di MDN aiuta a confrontarne caratteristiche e supporto.

AVIF tende a essere particolarmente efficiente su fotografie, immagini editoriali e immagini hero. Può inoltre gestire profondità colore elevate, profili colore e contenuti HDR. Il vantaggio sul peso non è però fisso: screenshot con testo piccolo, loghi e grafiche trasparenti richiedono una verifica visiva caso per caso.

Tabella comparativa: AVIF, WebP e JPEG/PNG

Quando usare AVIF e quando preferire WebP

Scegli AVIF quando la priorità è alleggerire fotografie, immagini di articoli e immagini hero, dopo aver controllato qualità e compatibilità sulle risorse reali del sito. Non basarti su un solo benchmark o sullo stesso valore di qualità: le scale qualitative dei diversi encoder non sono equivalenti.

WebP è una scelta affidabile quando vuoi una gestione generalmente più lineare. JPEG e PNG restano utili per anteprime Open Graph, newsletter, feed, software esterni e flussi editoriali che non garantiscono la gestione di AVIF o WebP.

Per ecommerce, siti B2B, magazine, PA e progetti con pubblico eterogeneo, il modello più prudente è AVIF + WebP + originale: il browser moderno riceve la variante più efficiente, mentre gli altri client hanno una risorsa compatibile.

Prima di convertire: cosa supporta davvero il tuo WordPress

Il supporto di WordPress non coincide con la conversione automatica della Libreria media o con la corretta consegna del formato al browser. Sono passaggi distinti e conviene controllarli separatamente.

WordPress supporta WebP dalla versione 5.8 e AVIF dalla 6.5, come documentato nell’annuncio tecnico dedicato ad AVIF. Questo consente di caricare e utilizzare tali file, ma il Core non converte automaticamente tutte le immagini esistenti e non crea da solo una catena AVIF + WebP + JPEG/PNG né markup picture.

In altre parole, se carichi direttamente un AVIF e il tema pubblica un normale tag img, un browser che non supporta quel formato non riceve un fallback automatico. WordPress può generare miniature AVIF quando l’ambiente di elaborazione le supporta, ma la generazione di formati alternativi e la loro consegna condizionale richiedono una configurazione aggiuntiva.

Controllare hosting e librerie grafiche

Nel pannello di amministrazione apri Bacheca → Strumenti → Salute del sito → Informazioni → Gestione media. Qui puoi verificare quali librerie usa il server per elaborare le immagini, come Imagick/ImageMagick o GD/libgd.

Per AVIF non basta una versione recente di PHP. Con GD servono PHP 8.1 o superiore e un’estensione compilata con supporto AVIF; anche ImageMagick deve poter leggere, ridimensionare e salvare il formato. Le condizioni di supporto di GD sono riportate nella documentazione PHP. Il controllo più utile resta pratico: carica un AVIF di prova e verifica che WordPress generi senza errori miniature e dimensioni intermedie.

Il plugin del Performance Team Modern Image Formats può essere utile per sperimentare la generazione di formati moderni, ma comportamento, formati prodotti e gestione delle immagini esistenti dipendono dalla versione del plugin, dalle librerie disponibili e dalla configurazione. Prima di usarlo in produzione, consulta la documentazione aggiornata del plugin e verifica il risultato con tema, page builder, WooCommerce e CDN.

Tre modi per usare AVIF e WebP in WordPress

La stessa immagine può essere gestita in modi molto diversi. Scegli il modello prima di iniziare una conversione estesa: eviti di creare file che tema, cache o integrazioni non utilizzeranno.

1. Caricare direttamente file AVIF

L’upload diretto è adatto a siti piccoli o recenti, con hosting già verificato e controllo sul tema. È il percorso più semplice, ma non offre da solo fallback ai client incompatibili.

Prima di adottarlo, controlla che siano create le miniature, che il srcset funzioni e che l’immagine venga gestita correttamente da Open Graph, email e feed. È un modello pratico quando conosci tutte le destinazioni dei media, meno adatto a ecosistemi complessi.

2. Usare picture per servire formati alternativi

L’elemento HTML picture permette di dichiarare più sorgenti. Il browser usa la prima che supporta e il tag img rimane come fallback:

In produzione, aggiungi dimensioni coerenti, srcset e sizes quando servono immagini responsive. Il punto critico è controllare l’HTML effettivamente generato: alcuni temi, builder e plugin inseriscono solo un tag img, anche se le varianti convertite esistono nella Libreria media.

3. Affidare conversione e consegna a una image CDN

Per cataloghi, magazine e librerie estese, una image CDN può generare e servire AVIF o WebP in base all’header HTTP Accept, lasciando l’originale ai client non compatibili. Questo riduce il lavoro di conversione sul server WordPress, che può essere rilevante negli hosting condivisi.

La scelta introduce costi e dipendenza dal provider e richiede controlli su privacy, backup, URL e compatibilità con la CDN già presente. Se la risposta varia in base al formato accettato dal client, anche la cache deve distinguere correttamente le varianti: la documentazione Cloudflare sul Vary per le immagini mostra perché questa configurazione è importante.

Configurare le immagini senza peggiorare LCP, SEO e compatibilità

Un file più piccolo riduce i byte trasferiti, ma non garantisce da solo un LCP migliore. Contano anche dimensioni dell’immagine, priorità di caricamento, risposta del server, cache, rete e markup della pagina. Le indicazioni di web.dev sull’ottimizzazione di LCP confermano che l’immagine LCP va analizzata nel contesto del caricamento completo.

L’immagine hero che contribuisce al Largest Contentful Paint non dovrebbe usare lazy loading. WordPress può aggiungere attributi come loading, decoding e, in alcuni casi, fetchpriority; controlla l’HTML pubblicato invece di presumere che tema e plugin abbiano scelto correttamente. fetchpriority="high" va riservato alla risorsa realmente critica, non assegnato a tutte le immagini sopra la piega.

Controlla srcset, sizes e miniature per tutte le dimensioni, non solo per il file originale. Verifica inoltre immagini prodotto e varianti WooCommerce, slider, gallerie, widget e moduli dei page builder. Le immagini di sfondo CSS sono spesso escluse dalle normali logiche di conversione e non hanno lo stesso valore di un elemento img per accessibilità e SEO immagini.

Google Search supporta AVIF, quindi il formato può essere usato anche per le immagini destinate alla ricerca. Questo non implica però che crawler social, client email, feed RSS o strumenti terzi adottino le stesse regole: per questi canali occorre testare l’anteprima o il flusso realmente utilizzato.

Test pratico: verificare se AVIF conviene davvero al tuo sito

Non convertire l’intera Libreria media prima di un test limitato. Crea un campione di almeno cinque immagini: una fotografia ricca di texture, una foto scura o con sfumature, uno screenshot con testo piccolo, una grafica trasparente e una hero image usata davvero dal sito.

Mantieni uguali sorgente, dimensioni in pixel e gestione dei metadati. Per ogni file confronta:

• peso della variante consegnata e qualità percepita;
• artefatti, nitidezza e leggibilità del testo;
• tempo e risorse richiesti dalla conversione;
• miniature, srcset, markup picture o img;
• Content-Type, cache e variazione della risposta quando usi content negotiation;
• comportamento sui browser e dispositivi effettivamente presenti nei dati di analytics;
• LCP della pagina che usa l’immagine hero.

Controlla il codice sorgente e la scheda Network degli strumenti per sviluppatori del browser per verificare quale file viene effettivamente scaricato. Se il progetto serve browser o dispositivi particolari, esegui test su dispositivi reali o con un servizio cross-browser. Prova inoltre una condivisione social e un invio email quando questi canali sono rilevanti: il test deve dimostrare che il formato più leggero viene servito senza interrompere i flussi esterni.

Implementazione consigliata e controlli prima della migrazione

Per la maggior parte dei siti, il percorso più sicuro è questo:

1. verifica in Salute del sito le librerie disponibili e prova a caricare un AVIF;
2. scegli un sistema di conversione e consegna che documenti chiaramente formati, fallback e compatibilità con la tua CDN;
3. applica la configurazione a un piccolo gruppo di nuove immagini o a un ambiente di staging;
4. rigenera le miniature solo dopo aver confermato che le varianti create vengono usate dal tema;
5. svuota le cache di WordPress, server e CDN, quindi controlla HTML, richieste di rete, qualità e LCP;
6. estendi la conversione all’archivio soltanto dopo la validazione.

Prima di una conversione estesa, assicurati di avere backup e rollback, originali conservati, miniature e srcset verificati e cache aggiornata. Se la migrazione modifica gli URL delle immagini, predisponi redirect dalle vecchie risorse.

La scelta più equilibrata per AVIF in WordPress è partire dalle fotografie più pesanti e dalle immagini hero, misurare il risultato su pagine rappresentative e mantenere WebP o l’originale quando pubblico e integrazioni lo richiedono. Il formato immagine è un intervento utile, ma deve integrarsi con una corretta strategia di caching, immagini responsive e ottimizzazione delle risorse critiche.