Se volete velocizzare il vostro sito WordPress, trovare il modo di ridurre le dimensioni delle vostre immagini offre un ottimo ritorno sul vostro investimento.

In media, le immagini rappresentano circa la metà delle dimensioni dei file di una pagina web, quindi anche piccoli miglioramenti possono dare ottimi risultati.

WebP è un moderno formato immagine che può aiutarvi a ridurre le dimensioni delle vostre immagini senza modificarne l’aspetto. In media, convertire un’immagine in WebP può ridurre le sue dimensioni di circa il 25-35% senza alcuna perdita percepibile di qualità.

Ecco perché approfondiremo dettagliatamente l’argomento in questo articolo!

Pronti? Cominciamo!

Che cos’è WebP?

Allora… cos’è un file WebP? In poche parole, WebP è un formato immagine sviluppato da Google. Per esempio, avete formati immagine come JPEG o JPG e PNG, giusto? Beh, WebP è un formato di file alternativo per le immagini.

WebP serve lo stesso file immagine, solo con una dimensione di file più piccola. Riducendo le dimensioni dei file immagine, potete 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…

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:

Google PageSpeed Insights suggerisce di utilizzare immagini WebP

Google PageSpeed Insights suggerisce di utilizzare immagini WebP

Come fa il formato WebP di Google a ottenere queste riduzioni delle dimensioni dei file?

WebP supporta sia la compressione lossy che 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:

Il grosso ostacolo è il Safari. Nel momento in cui scriviamo questo articolo, né la versione desktop né quella mobile di Safari supportano le immagini WebP. Apple ha sperimentato per breve tempo il supporto di WebP per Safari nel 2016, ma da allora non ci sono state ulteriori spinte in avanti.

Anche Internet Explorer anche del supporto WebP (ma Edge supporta il formato WebP perché è basato su Chromium).

In totale, circa il 77% degli utenti di Internet utilizza un browser che supporta WebP. Quindi, pur avendo certamente il supporto della maggioranza dei browser, quel 23% è ancora troppo per essere ignorato (in questo tutorial su WebP in WordPress, vi mostreremo come gestire la cosa in modo che tutti i vostri visitatori abbiano un’ottima esperienza):

Supporto WebP

Supporto WebP

Confronto delle Dimensioni tra WebP, JPG e PNG

Secondo i test di Google, le immagini WebP sono:

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:

Come Utilizzare le Immagini WebP in WordPress

Dato che non tutti i browser supportano le immagini WebP, non è possibile caricare file di immagini WebP nella libreria madia e utilizzarli direttamente in WordPress, come si fa con JPEG e PNG.

Anche in questo caso, il 23% degli utenti (compresi tutti gli utenti di Safari) utilizza 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.

Ma non preoccupatevi, c’è una soluzione!

Invece di caricare le immagini WebP direttamente su WordPress, 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:

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.

Info

Se il tuo sito è ospitato su Kinsta, dovrai contattare il nostro supporto i modo che possiamo creare una regola Nginx per i bucket della cache di WebP per alcuni di questi plugin.

ShortPixel

Il plugin WordPress ShortPixel

Il plugin WordPress 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 ha un piano gratuito limitato che permette di ottimizzare ~100 immagini al mese gratuitamente. Dopo di che, i piani a pagamento partono da 4,99 dollari al mese per un massimo di 5.000 immagini/crediti o 9,99 dollari una tantum per un pacchetto di 10.000 crediti.

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:

Come impostare il livello di compressione e le dimensioni delle immagini in ShortPixel

Come impostare il livello di compressione e le dimensioni delle immagini in ShortPixel

Per attivare le immagini WebP, andate alla scheda Avanzate e:

  1. Spuntate la casella WebP Images
  2. Selezionate la casella per Deliver the WebP versions (appare dopo aver spuntato la prima casella)
  3. Selezionate il pulsante di opzione per lUsing the <PICTURE> tag syntax (appare dopo aver spuntato la casella precedente)
  4. Lasciate l’impostazione predefinita Only via WordPress hooks selection
Come attivare le immagini WebP in WordPress con ShortPixel

Come attivare le immagini WebP in WordPress con ShortPixel

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

Il plugin Imagify per WordPress

Il plugin Imagify per WordPress

Imagify è un popolare plugin di ottimizzazione delle immagini dello stesso sviluppatore di WP Rocket (che è uno dei pochi plugin di caching che funziona su Kinsta).

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 principale riguarda 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.

Stanco di un host lento per il tuo sito WordPress? Forniamo server velocissimi e un supporto di livello mondiale da parte di esperti WordPress disponibili 24/7. Dai un’occhiata ai nostri piani

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.

Come impostare il livello di compressione in Imagify

Come impostare il livello di compressione in Imagify

Per attivare le immagini WebP, scorrete fino alla sezione Optimization e individuate la sezione WebP Format:

  1. Spuntate la casella Create webp versions of images
  2. Selezionate la casella Display images in webp format…
  3. Selezionate il pulsante di opzione Use <PICTURE> tags
  4. Se il vostro sito è su Kinsta e utilizzate il CDN di Kinsta, inserite l’URL del vostro Kinsta CDN nella casella If you use a CDN (vi diremo come trovare l’URL del CDN di Kinsta qui sotto)
Come abilitare le immagini WebP in WordPress con Imagify

Come abilitare le immagini WebP in WordPress con Imagify

Se utilizzate il CDN di Kinsta, potete trovare l’URL del CDN aprendo il sito nel cruscotto di MyKinsta e saltando alla scheda Kinsta CDN nelle impostazioni del sito:

Come trovare l'URL del CDN di Kinsta

Come trovare l’URL del CDN di Kinsta

Come per ShortPixel, se siete su Kinsta, è necessario creare una regola Nginx per i bucket della cache WebP (basta contattare il supporto di Kinsta).

Optimole

Il plugin Optimole per WordPress

Il plugin Optimole per WordPress

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:

  1. Può servire le vostre immagini tramite il proprio CDN (alimentato da Amazon CloudFront).
  2. 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.

Come parte del servizio di ottimizzazione delle immagini in tempo reale, Optimole può anche fornire immagini WebP ai visitatori con i browser che le supportano.

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:

L'area delle impostazioni di Optimole - le immagini WebP di WordPress sono abilitate di default

L’area delle impostazioni di Optimole – le immagini WebP di WordPress sono abilitate di default

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.

Aumentate la velocità del sito ⬆️ e diminuite le dimensioni delle immagini ⬇️. Ecco come sfruttare il formato WebP sul vostro sito #WordPress 💥Click to Tweet

Riepilogo

Le immagini del vostro sito WordPress costituiscono una parte considerevole della dimensione dei file di una pagina media. Se riuscite a trovare il modo di ridurre le dimensioni delle vostre immagini, potete velocizzare il vostro sito senza modificare l’esperienza dei vostri visitatori.

WebP è un moderno formato immagine che può offrire una riduzione del 25% circa delle dimensioni del file rispetto ai file JPEG o PNG di partenza.

La maggior parte dei browser moderni supporta WebP e circa il 77% degli utenti di Internet ha un browser che supporta WebP. Tuttavia, alcuni browser, in particolare Safari, non offrono ancora il supporto di WebP, quindi non è possibile servire immagini WebP a tutti i visitatori.

Per risolvere questo problema, potete utilizzare un plugin di WordPress che converte le immagini in WebP e serve le versioni WebP ai visitatori i cui browser supportano questo formato, mentre utilizza le immagini originali ai visitatori i cui browser non lo supportano.

Tre plugin che possono aiutarvi in questo sono:

Per altre soluzioni tecniche per ottimizzare le immagini, consultate la nostra guida completa all’ottimizzazione delle immagini per le prestazioni web.

Avete domande su come utilizzare WebP su WordPress? Scrivetele nei commenti.


Se ti è piaciuto questo articolo, allora apprezzerai la piattaforma di hosting WordPress di Kinsta. Metti il turbo al tuo sito web e ricevi supporto 24×7 dal nostro team di veterani di WordPress. La nostra infrastruttura potenziata da Google Cloud è centrata su scaling automatico, performance e sicurezza. Permettici di mostrarti la differenza di Kinsta! Scopri i nostri piani