Indice
By Marine Larmier - Ultimo aggiornamento il
Ti stai chiedendo come usare WebP su WordPress e come convertire le immagini che hai già nella libreria di WordPress? Sei nel posto giusto!
Se analizzi le prestazioni web con PageSpeed Insights, potresti vedere la raccomandazione “Pubblica immagini in formati più recenti”, che serve a migliorare le prestazioni. Google ti sta dicendo di dimenticarti di JPEG e PNG e di concentrare i tuoi sforzi di ottimizzazione delle immagini su formati di immagine come WebP.
Questa guida spiega come risolvere questo avviso e tutto quello che ti serve sapere su WebP in WordPress. Troverai anche un elenco dei migliori strumenti per convertire in WebP quasi qualsiasi formato.
Che cos’è il formato di immagine WebP?
Creato da Google, WebP è un formato di nuova generazione per il web. Offre una compressione lossless e lossy superiore per le immagini, preservandone la qualità. Rispetto ai tradizionali JPEG o PNG, questo formato moderno ti permette di ottenere file ancora più leggeri, e quindi una pagina che si carica più velocemente.
WebP vs. PNG vs. JPEG
Se sei indeciso tra i tre formati e ti interessano le prestazioni, scegli WebP per servire immagini ottimizzate su WordPress. Tra poco capirai perché.
JPEG vs. WebP
Entrambi i formati di file comprimono le immagini per renderle più facili da condividere sul web e ne preservano la qualità. Sembrano piuttosto simili, quindi perché scegliere WebP?
Un file WebP è in genere molto più leggero di un JPEG tradizionale. Secondo Google, un’immagine WebP con compressione lossy potrebbe essere dal 25 al 34 % più leggera di un file JPEG equivalente.
Guarda il grafico qui sotto: WebP (in rosso) ottiene una compressione migliore rispetto a JPEG.
Verifichiamo questa affermazione con la nostra immagine JPEG da 3,7 MB. Dopo la conversione in WebP, l’immagine ha mantenuto la stessa qualità, ma il peso del file è sceso a 1,3 MB.
PNG vs. WebP
I PNG si usano soprattutto per la grafica web senza sfondo, come loghi e illustrazioni, più che per le foto di alta qualità. Di solito occupano più spazio di archiviazione rispetto agli altri formati. Le immagini WebP lossless sono in media del 26 % più leggere dei PNG.
Facciamo un altro test veloce e convertiamo un’immagine PNG in WebP. Il nostro file originale pesava 432 KB e, con una semplice conversione in WebP, è sceso a 244 KB.
JPEG vs. PNG vs. WebP
Ricapitolando, se vuoi migliorare il punteggio delle prestazioni di Lighthouse del tuo sito WordPress, scegli WebP. Ecco come si confrontano i tre formati:
Quali browser supportano WebP?
Nel 2023 tutti i principali browser supportano WebP. Per esempio, questo formato moderno è supportato in modo nativo da Google Chrome, Safari, Firefox, Edge, dal browser Opera e da altri strumenti.
Visualizzazione delle immagini WebP con un fallback per i browser meno recenti
Le immagini sono decisive per garantire un’ottima esperienza utente, quindi dovrebbero essere mostrate a tutti i visitatori, anche a chi usa versioni meno recenti dei browser. Se vuoi andare sul sicuro, dovresti attivare un fallback verso altri formati tradizionali, come PNG o JPEG.
Come aggiungere un fallback alle immagini WebP
- Puoi aggiungere il tag <picture> alla tua immagine per implementare il fallback se il tuo visitatore usa una versione datata del browser. I browser che supportano WebP mostreranno “dog.webp”, mentre le versioni meno recenti dei browser che non supportano WebP ripiegheranno sull’elemento “dog.jpg”.
- Usare un plugin di WordPress come Imagify, che ti permette di convertire le tue immagini in WebP e di usare i tag <picture> per attivare il fallback sulle immagini WebP.
Come creare e usare le immagini WebP su WordPress
A partire da WordPress 5.8, il formato WebP è pienamente supportato da WordPress. Ti basta caricare le tue immagini nella tua libreria media e inserirle nei tuoi contenuti.
I 4 migliori plugin per creare un’immagine WebP
Non serve più installare un’estensione di terze parti per caricare immagini WebP su WordPress, ma ti servirà un plugin per convertire in WebP le tue immagini esistenti. Ecco 4 plugin WordPress per WebP che puoi usare per convertire immagini in WebP:
- Imagify: un plugin di compressione delle immagini facile da usare che offre la conversione in WebP. È gratuito per circa 200 immagini al mese.
- WebP Converter for Media: converte i file nei formati standard JPEG, PNG e GIF nel formato WebP.
- WebP Express: aggiunge una riga di codice per servire le immagini WebP agli utenti.
- ShortPixel Image Optimizer: un altro plugin di ottimizzazione delle immagini che converte JPEG, PNG o GIF in WebP e AVIF.
Come creare un’immagine WebP su WordPress
Il modo più semplice per creare un’immagine WebP su WordPress è usare un plugin come Imagify. Tutte le tue immagini possono essere convertite in WebP con un solo clic, insieme alla compressione di massa.
- Carica i tuoi file JPEG, PNG, PDF o GIF nella tua libreria di WordPress
- Dalla tua bacheca di WordPress, vai su Impostazioni > Imagify > scheda Ottimizzazione
- Spunta le seguenti caselle: “Create WebP versions of images” e “Display images in WebP format on the site”
Bonus: se non usi WordPress, puoi anche servirti di software di grafica come Photoshop, Lightroom o Sketch ed esportare i tuoi file multimediali direttamente in WebP:
Dai una spinta in più all’ottimizzazione delle immagini
Oltre alla compressione delle immagini e alla conversione in WebP, il lazy loading è un ulteriore modo per servire immagini ottimizzate ai tuoi visitatori e aumentare la velocità di caricamento della tua pagina. Con uno script come Lazy Load, il browser carica solo le immagini above the fold (nel viewport dell’utente).
Inoltre, nel suo report sulle prestazioni, PageSpeed Insights raccomanda “Rimanda immagini fuori schermo”, che significa applicare il lazy loading:
Come applicare il lazy loading alle tue immagini WebP
Il modo più semplice per applicare lo script di lazy loading alle tue immagini WebP è usare un plugin di WordPress come WP Rocket. Per implementare il lazy loading, segui questi due semplici passaggi direttamente dall’area di amministrazione di WordPress:
- Vai su Impostazioni > WP Rocket > scheda LazyLoad
- Spunta le caselle che preferisci tra immagini, immagini di sfondo CSS, iframe e video.
🏆 WP Rocket è il primo plugin a offrire il lazy loading delle immagini di sfondo CSS con un solo clic!
Infine, PageSpeed Insights può rilevare se WP Rocket è installato sul tuo sito WordPress ed eventualmente ti consiglia di attivare la funzionalità LazyLoad:
🚀 Vuoi migliorare le prestazioni web complessive del tuo sito? WP Rocket è anche uno dei migliori plugin di cache per WordPress, che ottimizza il tuo database e il tuo codice e migliora i tuoi Core Web Vitals in pochi clic.
FAQ
Cos’è il formato WebP?
Il formato WebP è un formato di immagine di nuova generazione per il web, creato da Google. Offre una compressione lossless e lossy superiore, preservando la qualità delle immagini. Rispetto ai tradizionali JPEG o PNG, permette di ottenere file più leggeri e quindi pagine che si caricano più velocemente.
Meglio WebP o JPG?
Se ti interessano le prestazioni, è meglio WebP: secondo Google, un’immagine WebP con compressione lossy potrebbe essere dal 25 al 34 % più leggera di un file JPEG equivalente. Nel nostro test, un’immagine JPEG da 3,7 MB è scesa a 1,3 MB dopo la conversione in WebP, mantenendo la stessa qualità. Entrambi i formati comprimono le immagini e ne preservano la qualità, ma WebP ottiene una compressione migliore.
Meglio WebP o PNG?
Se ti interessano le prestazioni, è meglio WebP: le immagini WebP lossless sono in media del 26 % più leggere dei PNG. Nel nostro test, un file PNG da 432 KB è sceso a 244 KB con una semplice conversione in WebP. I PNG si usano soprattutto per la grafica web senza sfondo, come loghi e illustrazioni, e di solito occupano più spazio di archiviazione rispetto agli altri formati.
Quali browser supportano il formato WebP?
Nel 2023 tutti i principali browser supportano WebP in modo nativo, tra cui Google Chrome, Safari, Firefox, Edge e Opera. Per i visitatori che usano versioni meno recenti dei browser, puoi attivare un fallback verso formati tradizionali come PNG o JPEG, con il tag <picture> oppure con un plugin come Imagify.
Come convertire le immagini in WebP su WordPress?
Per convertire le immagini in WebP su WordPress ti serve un plugin, come Imagify, WebP Converter for Media, WebP Express o ShortPixel Image Optimizer. Con Imagify, carica le immagini nella libreria di WordPress, vai su “Impostazioni” > “Imagify” > scheda “Ottimizzazione” e spunta le caselle “Create WebP versions of images” e “Display images in WebP format on the site”. Per caricare immagini già in formato WebP, invece, da WordPress 5.8 non serve più installare un’estensione di terze parti.
Conclusione
Servire le tue immagini in formato WebP su WordPress è un modo semplice per potenziare le prestazioni. Questo formato di nuova generazione aiuta a migliorare i tuoi Core Web Vitals servendo ai tuoi visitatori file di immagine più leggeri, senza intaccare la qualità!
WordPress e i principali browser ora supportano WebP, quindi non c’è bisogno che ti preoccupi della compatibilità. Con uno strumento come Imagify o WebP Converter for Media, convertire le tue immagini in WebP direttamente dalla bacheca di WordPress è più facile che mai.
Se sei disposto a fare un passo in più per potenziare le prestazioni del tuo sito e ottimizzare ancora di più le tue immagini (con il lazy load, per esempio), prova WP Rocket. Applica l’80 % delle best practice sulle prestazioni non appena viene attivato e non richiede alcuna competenza tecnica. Inoltre, c’è una garanzia di rimborso di 14 giorni, quindi non corri alcun rischio, tranne quello di vedere il tuo sito web caricarsi più velocemente!
