Se volete velocizzare il vostro sito WordPress, ridurre le dimensioni delle vostre immagini offre un ottimo ritorno sull’investimento.
WebP è un moderno formato immagine che può contribuire a ridurre le dimensioni delle immagini senza modificarne l’aspetto. In media, convertire un’immagine in WebP può ridurne le dimensioni di circa il 25-35% senza alcuna perdita percepibile di qualità.
La maggior parte dei browser moderni e WordPress 5.8+ supportano WebP senza problemi. In questo articolo, approfondiremo questo nuovo formato di immagine e vi mostreremo come potete sfruttare la sua meraviglia.
Pronti? Cominciamo!
Che Cos’è WebP?
Allora, cos’è un file WebP? In breve, WebP è un formato di immagine sviluppato da Google per ottimizzare le immagini meglio dei formati di immagine popolari (a quel tempo). Facciamo un esempio: avete formati immagine come JPEG o JPG e PNG.
Nota: Scoprite come i diversi tipi di file immagine possono influire sulla velocità del vostro sito web.
WebP serve lo stesso file immagine, solo con una dimensione di file più piccola. Riducendo le dimensioni dei file immagine, potrete offrire la stessa esperienza ai visitatori del vostro sito web, ma il vostro sito si caricherà più velocemente.
Ad esempio, nello studio sulla compressione WebP, Google ha scoperto che un file immagine WebP è in media:
- il 25-34% più piccolo di un’immagine JPEG comparabile.
- il 26% più piccolo di un’immagine PNG comparabile.
Ecco perché, se fate girare il vostro sito su PageSpeed Insights, una delle tante raccomandazioni è quella di servire immagini in formati di ultima generazione come WebP:
Come fa il formato WebP di Google a ottenere queste riduzioni delle dimensioni dei file?
In primo luogo, supporta la compressione lossy e lossless, quindi l’esatta riduzione dipenderà dal fatto che si utilizzi la compressione lossy o lossless.
Con la compressione lossy, WebP utilizza una cosa chiamata “codifica predittiva” per abbassare la dimensione del file. La codifica predittiva utilizza i valori dei pixel vicini all’interno di un’immagine per prevedere i valori e poi codifica solo la differenza. Si basa sul VP8 key frame encoding.
Con la compressione lossless, WebP utilizza una serie di metodi molto più complicati sviluppati dal team di WebP.
Se volete conoscere nel dettaglio le tecniche di compressione WebP, questo articolo è un buon punto di partenza.
Quali Browser Supportano WebP?
Le immagini WebP sono supportate dai browser più diffusi, come:
- Chrome (desktop e mobile)
- Firefox (desktop e mobile)
- Microsoft Edge
- iOS e macOS Safari (solo macOS 11 Big Sur e successivi)
- Opera (desktop e mobile)
Al momento in cui stiamo scrivendo questo articolo, Safari supporta le immagini WebP solo parzialmente.
Anche Internet Explorer anche del supporto WebP (ma Edge supporta il formato WebP perché è basato su Chromium). Tuttavia, l’uso di IE si è ridotto a meno dell’1% del totale degli utenti internet. Questa è una gran cosa per chiunque usi il web!
In totale, circa il 95% degli utenti di Internet utilizza un browser che supporta WebP. Quindi, anche se ha certamente il supporto della maggioranza, quel 5% è un ostacolo minore, soprattutto quando si tratta di utenti Safari su vecchie versioni di macOS. In questo tutorial su WebP in WordPress, vi mostreremo come gestire la cosa in modo che tutti i vostri visitatori abbiano un’ottima esperienza.
Confronto delle Dimensioni tra WebP, JPG e PNG
Secondo i test di Google, le immagini WebP sono:
- il 25-34% più piccole delle immagini JPEG paragonabili.
- il 26% più piccole delle immagini PNG simili.
Se volete saperne di più sulla metodologia di Google, qui sotto ci sono i link diretti ai risultati completi:
Entrambi i test si basano su oltre 11.000 immagini tra cui:
- La famosa immagine di Lenna
- 24 immagini tratte dalla suite di immagini a colori Kodak
- 100 immagini da Tecnick.com
- Un campione casuale di oltre 11.000 immagini prese da Google Image Search
Come Utilizzare le Immagini WebP in WordPress
A partire da WordPress 5.8, sarete in grado di usare il formato immagine WebP allo stesso modo dei formati JPEG, PNG e GIF. Basta caricare le immagini nella vostra Media Library e includerle nei vostri contenuti. Poiché WordPress 5.8+ supporta il formato WebP di default, non è necessario installare plugin di terze parti per caricare immagini WebP. Questo dovrebbe bastare per la maggior parte dei casi d’uso comuni.
Per iniziare immediatamente, potete fare riferimento al nostro rapido primer sull’uso delle immagini WebP in WordPress 5.8+. Vi suggeriamo di leggere le avvertenze sul supporto WebP in WordPress.
Tuttavia, circa il 5% delle persone (principalmente gli utenti di Safari sui vecchi macOS) usano un browser web che non supporta WebP. Se si convertono le immagini WebP e le si utilizza direttamente nei contenuti, questi visitatori non sarebbero in grado di vedere le immagini, il che rovinerebbe la loro esperienza di navigazione.
Inoltre, generare immagini WebP non è così semplice come ottenere un’immagine JPG/JPEG, che è il formato di file immagine predefinito sulla maggior parte delle fotocamere, smartphone e librerie di immagini online. WordPress non supporta la conversione automatica delle immagini in formato WebP (ancora!).
Ma non preoccupatevi! C’è una soluzione.
Potete utilizzare un plugin WordPress che converte le immagini originali nel formato WebP e fornisce l’immagine originale come fallback se il browser di un visitatore non supporta WebP.
Ad esempio, se caricate un file JPEG sul vostro sito, il plugin:
- Convertire il file JPEG in WebP e servire la versione WebP per Chrome, Firefox, Edge, ecc.
- Mostrerà il file JPEG originale ai visitatori che navigano con Safari (su vecchie versioni di macOS) e altri browser che non supportano WebP.
In questo modo, tutti possono vedere la vostra immagine e tutti hanno l’esperienza più veloce possibile.
Di seguito, esamineremo alcuni dei migliori plugin WordPress per la gestione delle immagini WebP, che funzionano con Kinsta e con il CDN di Kinsta.
Ottimizzazione delle Immagini di Kinsta
Il primo non è esattamente un plugin, ma piuttosto una funzione integrata: Ottimizzazione delle Immagini di Kinsta.
Questa funzione, accessibile attraverso il cruscotto personalizzato di Kinsta, MyKinsta, crea automaticamente copie WebP ottimizzate delle immagini originali del vostro sito, quindi serve il più piccolo dei due file immagine ai vostri visitatori.
Garantendo sempre il recupero del file più piccolo possibile, l’ottimizzazione delle immagini aumenta immediatamente i tempi di caricamento, migliorando notevolmente i risultati SEO e l’esperienza degli utenti. La funzione sfrutta direttamente il velocissimo CDN di Kinsta per fornire i file ancora più velocemente.
I proprietari dei siti possono scegliere tra compressione lossy e lossless per le loro immagini WebP, a seconda delle loro esigenze. L’ottimizzazione può anche essere attivata o disattivata a piacimento, se è necessario effettuare dei test.
La funzione di ottimizzazione delle immagini è completamente gratuita per tutti i clienti Kinsta. Ecco come attivarla:
- Caricate le vostre immagini nella libreria multimediale di WordPress ospitata da Kinsta.
- Accedete al vostro cruscotto MyKinsta.
- Andate su Siti WordPress > Nome del sito > CDN.
- Fate clic sul pulsante Impostazioni sotto la sezione Ottimizzazione delle immagini.
- Scegliere tra compressione lossless e lossy, quindi fare clic su Salva impostazioni.
Se non siete già sulla piattaforma Kinsta, potete provare questa funzione gratuitamente programmando una demo.
Compressione lossless e lossy
È possibile scegliere tra compressione lossless e lossy per i propri file. Sebbene entrambi i metodi comprimano i file di immagine e ne rimuovano i metadati, c’è una grande differenza tra i due:
- Ottimizzazione delle immagini Lossless: La compressione delle immagini Lossless ha un impatto nullo sulla qualità delle immagini. È consigliabile scegliere questa opzione se la qualità delle immagini è più importante della velocità.
- Ottimizzazione delle immagini Lossy: La compressione delle immagini Lossy potrebbe ridurre la qualità delle immagini. Scegliete questa opzione per massimizzare e dare priorità alla velocità rispetto alla qualità delle immagini.
In seguito, esamineremo alcuni plugin di WordPress installabili per l’ottimizzazione.
ShortPixel
ShortPixel è un popolare plugin per l’ottimizzazione delle immagini di WordPress che può aiutarvi a ridimensionare e comprimere automaticamente le immagini che caricate sul vostro sito WordPress.
ShortPixel può anche aiutarvi a convertire automaticamente le immagini in WebP e servire quelle immagini ai browser che supportano il formato.
ShortPixel conta come credito la dimensione di ogni immagine WordPress che ottimizzate. Quindi, se volete ottimizzare più dimensioni delle miniature delle immagini, un’immagine può utilizzare più crediti. Non ci sono limiti di dimensione dei file per le immagini.
Potete distribuire i vostri crediti di ShortPixel su un numero illimitato di siti web – non ci sono limiti per sito (e tutti i vostri siti possono utilizzare lo stesso account ShortPixel).
Per utilizzare ShortPixel per servire immagini WebP su WordPress, è necessario installare il plugin disponibile su WordPress.org e aggiungere la chiave API (che si può ottenere registrando un account ShortPixel gratuito).
Nella scheda Generale potete impostare la configurazione di base per l’ottimizzazione delle immagini. Ad esempio, il livello di compressione da utilizzare e se ridimensionare o meno le immagini:
Per attivare le immagini WebP, andate alla scheda Avanzate e:
- Spuntate la casella WebP Images
- Selezionate la casella per Deliver the WebP versions… (appare dopo aver spuntato la prima casella)
- Selezionate il pulsante di opzione per Using the <PICTURE> tag syntax (appare dopo aver spuntato la casella precedente)
- Lasciate l’impostazione predefinita Only via WordPress hooks selection
A questo punto, salvate le vostre modifiche.
Se il vostro sito è su Kinsta, ShortPixel vi darà un messaggio di avviso sulla configurazione dei file config del server su Nginx. Per configurare queste impostazioni, potete contattare il supporto di Kinsta e saremo lieti di occuparcene per voi.
Imagify
Imagify è un popolare plugin di ottimizzazione delle immagini dello stesso sviluppatore di WP Rocket.
Può comprimere e ridimensionare automaticamente le immagini che caricate sul vostro sito WordPress. E può anche aiutarvi a convertirle e servirle in WebP ai visitatori con i browser che supportano il formato.
In termini di funzionalità, ShortPixel e Imagify si assomigliano molto. La differenza più significativa viene quando si guardano i prezzi. Mentre ShortPixel vi fa pagare in base alle immagini, ma senza limiti di dimensione per immagine, Imagify vi fa pagare in base alla dimensione complessiva dei file, senza limiti di immagini.
Quindi, se avete bisogno di ottimizzare molte immagini di grandi dimensioni, l’approccio di ShortPixel potrebbe essere più economico. Ma se avete bisogno di ottimizzare molte piccole immagini, l’approccio di Imagify potrebbe convenire di più.
Imagify ha un piano gratuito limitato che consente 25 MB di ottimizzazioni al mese. Dopodiché, i piani a pagamento partono da 4,99 dollari al mese per un massimo di 1 GB e 9,99 dollari per un credito una tantum di 1 GB.
Come ShortPixel, potete distribuire i limiti del vostro account su un numero illimitato di siti web.
Per utilizzare Imagify in modo da servire le immagini di WordPress in formato WebP, è necessario installare il plugin da WordPress.org e aggiungere la chiave API.
Una volta attivato il plugin, potete utilizzare la casella General Settings per scegliere il livello di compressione.
Per attivare le immagini WebP, scorrete fino alla sezione Optimization e individuate la sezione WebP Format:
- Spuntate la casella Create webp versions of images
- Selezionate la casella Display images in webp format…
- Selezionate il pulsante di opzione Use <PICTURE> tags
Come per ShortPixel, se siete su Kinsta, è necessario creare una regola Nginx per i bucket della cache WebP (contattare il supporto di Kinsta).
Optimole
Optimole è un plugin per l’ottimizzazione delle immagini di WordPress che funziona in modo leggermente diverso rispetto a Imagify e ShortPixel. Optimole può comprimere e ridimensionare automaticamente le immagini, ma ha anche altre due caratteristiche degne di nota:
- Può servire le vostre immagini tramite il proprio CDN (alimentato da Amazon CloudFront).
- Offre immagini adattive in tempo reale, grazie alle quali Optimole consegnerà ad ogni visitatore l’immagine di dimensioni ottimali. Ad esempio, chi naviga su un piccolo schermo otterrà un’immagine con una risoluzione inferiore rispetto a chi naviga su uno schermo Retina.
Questo approccio è simile ad altri servizi di ottimizzazione/manipolazione in tempo reale come Cloudinary, imgix, KeyCDN Image Processing, ecc.
Optimole può anche fornire immagini WebP ai visitatori che usano browser che le supportano come parte dell’ottimizzazione delle immagini in tempo reale.
Optimole ha un piano gratuito limitato che può gestire immagini di servizio a circa 5.000 visitatori al mese. Dopo di che, i piani a pagamento partono da 19 dollari al mese per ~25.000 visitatori.
Per iniziare, è necessario installare il plugin da WordPress.org e attivarlo con una chiave API (che si può ottenere registrando un account gratuito Optimole).
Una volta fatto, Optimole inizierà automaticamente ad ottimizzare le vostre immagini e a consegnarle tramite il suo CDN. Il supporto WebP è attivo di default, quindi non c’è bisogno di abilitarlo manualmente.
Per configurare le altre impostazioni, come i livelli di compressione e il comportamento di scaling, potete andare su Media → Optimole → Settings:
Dato che Optimole gestisce la consegna delle immagini tramite il propria CDN, non c’è bisogno di impostare alcuna regola Nginx se siete ospitati su Kinsta.
Riepilogo
Le immagini del vostro sito WordPress costituiscono una grande parte della dimensione del file di una pagina media. Se potete trovare il modo di ridurre le dimensioni delle vostre immagini, potete velocizzare il vostro sito senza danneggiare l’esperienza utente. WebP è un moderno formato di immagine che fa esattamente questo, offrendo una riduzione del ~25% delle dimensioni del file rispetto ai file JPEG o PNG comparativi.
Circa il 95% degli utenti di Internet usa già un browser che supporta WebP. Anche le versioni di WordPress 5.8+ supportano WebP senza problemi. Quindi non c’è motivo per cui non dovreste usarlo.
Tuttavia, una minoranza di browser, in particolare Safari sulle vecchie versioni di macOS, non offre ancora il supporto WebP. Quindi, non potete ancora servire immagini WebP a tutti le persone che visitano il vostro sito. Per affrontare questo problema, è possibile usare un plugin WordPress che converte le immagini in WebP e serve le versioni WebP ai visitatori i cui browser lo supportano, mentre usa le immagini originali per i visitatori i cui browser non lo fanno.
Per ulteriori tattiche di ottimizzazione immagini, date un’occhiata alla nostra guida completa per ottimizzare le immagini per migliorare le prestazioni web. Non dimenticate che i clienti di Kinsta possono generare automaticamente immagini WebP compresse, senza costi di spazio su disco, sfruttando la funzione di ottimizzazione delle immagini integrata e gratuita di Kinsta.
Se avete domande sull’uso di WebP su WordPress, fatecele pure nei commenti qui sotto!
Salman Ravoof é uno sviluppatore web autodidatta, uno scrittore, un creatore e un grande ammiratore del Free and Open Source Software (FOSS). Oltre alla tecnologia, è appassionato di scienza, filosofia, fotografia, arte, gatti e cibo. Per saperne di più su di lui, visitate il suo sito web o contattate Salman su X.
Lascia un commento