Secondo HTTP Archive, a dicembre 2018 le immagini costituivano oltre il 40% del peso medio della pagina web, sia su desktop che su dispositivi mobili. È un valore enorme! 😮 Per quel che riguarda il nuovo mobile-first index e le prestazioni web, l’ottimizzazione delle immagini gioca un ruolo cruciale nella velocità di caricamento del vostro sito WordPress. La compressione delle immagini è una delle ottimizzazioni più semplici da implementare, ma avrà il maggiore impatto sulle prestazioni dei vostri siti. In sintesi, l’ottimizzazione delle immagini comporta la diminuzione delle dimensioni dei file immagine attraverso due modalità di compressione: lossy e lossless. WEBP supporta entrambi i metodi di compressione!

Oggi analizzeremo entrambi questi tipi di compressione delle immagini e vi daremo alcuni consigli su quale utilizzare. La scelta dipenderà dal tipo di attività che gestite.

Compressione Lossy

La prima forma di compressione è detta lossy (con perdita di dati). La compressione lossy comporta l’eliminazione di alcuni dati dell’immagine. Questo significa che potreste vedere una degradazione (una riduzione della qualità cui alcuni si riferiscono con “immagine pixelata”). Quindi dovete stare attenti a quanto state riducendo la vostra immagine. Non solo per la qualità, ma anche perché non potrete invertire il processo. Naturalmente, uno dei grandi vantaggi della compressione lossy, e motivo per cui è uno dei metodi di compressione più utilizzati, è che si può ridurre la dimensione del file in modo molto consistente.

  • JPEG e GIF sono entrambi formati immagine lossy.
  • Le JPEG sono ottime per i siti che hanno bisogno di notevole velocità di caricamento, in quanto è possibile regolare il livello di qualità per raggiungere un buon equilibrio tra qualità dell’immagine e dimensione del file.

(Lettura consigliata: JPG e JPEG: Il Formato di File Immagine Più Comune)

WordPress Comprime Automaticamente le Immagini

Sapevate che WordPress comprime automaticamente le vostre JPEG quando le caricate nella libreria media? Di default, WordPress comprimeva automaticamente le immagini fino al 90% della dimensione originale. Tuttavia, a partire da WordPress 4.5, hanno portato questo valore al 82% per migliorare le prestazioni su tutta la linea. Se vi state chiedendo perché le vostre immagini sembrano un po’ pixelate su una nuova installazione di WordPress, questo è il motivo.

Anche se la compressione automatica è una fantastica funzionalità, abbiamo visto che spesso l’82% non è affatto sufficiente per avere un impatto reale sulle prestazioni dei siti. Pertanto, se volete potete disabilitare questa opzione aggiungendo il seguente filtro al file functions.php del vostro tema. Ricordate di fare sempre un backup prima di modificare il vostro sito.

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Se volete aumentare il rapporto di compressione automatico di WordPress, potete aggiungere il filtro e ridurre la percentuale del file originale, ad esempio al 70%.

add_filter( 'jpeg_quality', create_function( '', 'return 70;' ) );

Ricordate che queste impostazioni non avranno alcun effetto sulle immagini già caricate. Per applicare le nuove impostazioni ai file presenti nella libreria media, dovrete utilizzare un plugin come Regenerate Thumbnails. O, meglio ancora, potete evitare di modificare il tema e utilizzare semplicemente un plugin WordPress di ottimizzazione delle immagini (cosa che approfondiremo più avanti) o comprimere ancora di più le immagini prima di caricarle.

Comprimere le Immagini con Save for Web (Software)

Per regolare le impostazioni di qualità di un’immagine potete utilizzare strumenti come Adobe Photoshop, Affinity Photo, Affinity Designer, o altri editor di immagini (vedi sotto). Nella maggior parte degli strumenti, a questa funzionalità si accede dalla voce “Salva su web” o da “Impostazioni Esportazione”.

Cambiare la qualità di una foto
Cambiare la qualità di una foto

Se facciamo un piccolo confronto dei tassi di compressione lossy, possiamo vedere che il 50% è ottimo. Il 33% comincia a diventare un po’ sfocato su alcuni dettagli dello sfondo (ma sarà abbastanza impercettibile), e il 5% ovviamente non è accettabile. È solo un esempio del perché l’82% automatico di WordPress non è sufficiente. Si può e si dovrebbe comprimere a tassi molto più elevati per diminuire maggiormanete le dimensioni dei file.

  • originale.JPG 2,82 MB (2.000 px per 1463 px)
  • lossy-compressed-1.JPG: 227 KB (2.000 px per 1463 px) riduzione del 91,95%
  • lossy-compressed-2.JPG: 185 KB (2,000 px per 1463 px) riduzione del 93.44%
  • lossy-compressed-3.JPG: 5 KB (2,000 px per 1463 px) riduzione del 99.82%
Confronto della compressione lossy
Confronto della compressione lossy

Supponiamo di scegliere quella compressa al 50%. La dimensione del file è di 227 KB, che è sicuramente molto più piccola del file originale di oltre 2 MB. Ma non è ancora sufficiente se questa è solo una delle oltre 15 altre immagini presenti su una pagina. In generale, è meglio mantenere tutte le immagini sotto i 100 KB, se possibile. Nei miei casi, dovreste poter riuscire ad ottenere dimensioni molto minori. Quindi anche per questo è importante ridimensionare le vostre immagini. L’immagine ridimensionata al 50% a 1251 px per 916 px è solo 95 KB.

Ma ricordate, potreste non voler ridimensionare le vostre immagini fino in fondo perché a partire da WordPress 4.4 c’è il supporto delle immagini reattive (non ridimensionate dai CSS). WordPress crea automaticamente diverse dimensioni per ogni immagine caricata nella libreria media. Includendo le dimensioni disponibili di un’immagine in un attributo srcset, i browser possono scegliere di scaricare la dimensione più appropriata e ignorare le altre. Qui sotto di vede un esempio del codice.

Esempio di immagini reattive con srcset
Esempio di immagini reattive con srcset

Quindi, essendoci al giorno d’oggi sempre più display HiDPI, è importante trovare un buon compromesso. Diciamo 2x o 3x la dimensione della colonna del vostro sito o della div, ma sempre meno della dimensione originale. Il browser mostrerà l’immagine corretta in base alla risoluzione del dispositivo.

Google Raccomanda la Compressione Lossy

Usate Google PageSpeed Insights? Se è così, probabilmente avete familiarità con l’avviso che dice di “Ottimizzare le immagini”. Nel 2017, Google ha aggiornato la documentazione e ora consiglia di utilizzare la compressione lossy per accelerare i siti web.

Avviso di ottimizzazione delle immagini in Google PageSpeed Insights
Avviso di ottimizzazione delle immagini in Google PageSpeed Insights

Se volete sbarazzarvi di questi avvisi e placare Google, uno dei modi più semplici è quello di utilizzare la compressione lossy.

Compressione Lossless

È il momento di passare alla seconda forma di compressione, definita lossless. La compressione lossless, a differenza della lossy, non riduce la qualità dell’immagine. Come è possibile? Di solito si fa rimuovendo i metadati non necessari (dati generati automaticamente dal dispositivo che cattura l’immagine). Il più grande svantaggio di questo metodo è che non vedrete una riduzione significativa della dimensione del file. In altre parole, nel tempo occuperete molto spazio su disco.

  • RAW, BMP, GIF e PNG sono formati immagine lossless.
  • Potete eseguire una compressione lossless sul vostro desktop utilizzando strumenti come Photoshop, FileOptimizer o ImageOptim.
  • Alcuni plugin applicheranno la compressione Gzip alle immagini (minimizzandole).

Gli utenti Kinsta possono sfruttare la funzione di minificazione del codice integrata nel cruscotto di MyKinsta. Questo permette ai clienti di abilitare facilmente la minificazione automatica di CSS e JavaScript con un semplice clic il che può contribuire a velocizzare un sito senza alcuno sforzo manuale.

Se facciamo un piccolo confronto tra i tassi di compressione, vedremo che quando si usa la compressione lossless non si perde qualità. Tuttavia, nell’esempio la dimensione del file immagine è stata ridotta solo del 10,84%, contro oltre il 90% della compressione lossy.

  • original.JPG: 227 KB (2.000 px per 1463 px)
  • lossless-compresses.JPG: 203 KB (2.000 px per 1463 px)
Compressione lossless
Confronto della compressione lossless

Qual è il Metodo di Compressione Migliore?

In realtà la risposta è che dipende da voi. Per la maggior parte degli utenti, è consigliabile utilizzare la compressione lossy, dato che si può facilmente comprimere un’immagine di ben oltre il 70% (a volte anche oltre il 90%!) senza una gran perdita di qualità. Moltiplicatelo per 15 immagini sulla stessa pagina e capirete perché la compressione riveste un ruolo così significativo nel ridurre il tempo di caricamento del vostro sito. Non solo, la compressione lossy vi permetterà di utilizzare minore spazio su disco. Il che a sua volta significa che potreste risparmiare soldi sull’hosting.

La compressione lossless è per coloro che non possono permettersi perdite di qualità. I fotografi, i food blogger e le modelle sono solo alcuni esempi che mi vengono in mente tra coloro che si affidano a immagini perfette al pixel per guadagnarsi da vivere. In questi casi, è essenziale ospitare le immagini su un CDN. A causa delle dimensioni, potreste anche aver bisogno di scaricarle su un servizio di storage di terze parti come Amazon S3 o Google Cloud Storage.

Come Utilizzare la Compressione Lossy in WordPress

Non preoccupatevi se avete ancora le idee confuse sulle differenze tra lossy e lossless. Ci sono un sacco di ottimi plugin di WordPress per l’ottimizzazione delle immagini che applicano automaticamente la compressione lossy.

Prima di adottare uno strumento di terze parti, però, è bene considerare che alcuni host includono strumenti o servizi per aiutarvi a ottimizzare le immagini direttamente dal vostro cruscotto di hosting. Ad esempio, Kinsta offre a tutti i clienti una funzione gratuita di ottimizzazione delle immagini che crea copie WebP delle immagini di un sito (memorizzate senza costi aggiuntivi), quindi consegna al visitatore il più piccolo dei due file. Questo accelera i tempi di caricamento e migliora l’esperienza dell’utente, soprattutto perché è abbinato al velocissimo CDN di Kinsta.

Se il vostro host non fornisce un servizio di questo tipo, allora potreste provare uno strumento di ottimizzazione delle immagini di terze parti. Tra le opzioni più diffuse ci sono:

Nota: tutti i plugin elencati utilizzano i propri server di terze parti per comprimere le immagini. Dovreste sempre comprimere le immagini in blocco off-site per avere buone prestazioni. 👍

Imagify è una delle opzioni più popolari che abbiamo elencato. Ha un piano gratuito, ma anche i piani pro hanno prezzi molto ragionevoli. È possibile ottimizzare un gran numero di immagini utilizzando solo il piano “Lite” (1 GB al mese) e offre opzioni di pagamento mensili o annuali a basso costo.

Imagify ha tre diversi livelli di ottimizzazione:

  • Normale: Questa modalità utilizza la compressione lossless, il che significa che le vostre immagini non perderanno qualità, ma non saranno nemmeno ridotte di molto in termini di dimensioni.
  • Aggressivo: Questa modalità utilizza la compressione lossy e offre un drastico risparmio sul peso iniziale, con una piccola riduzione della qualità dell’immagine. Nella maggior parte dei casi non si nota nemmeno.
  • Ultra: Questa modalità utilizza la compressione lossy e applica tutte le ottimizzazioni disponibili per raggiungere la massima compressione dell’immagine. Questo permetterà un enorme risparmio sul peso iniziale, ma molto probabilmente si noterà anche una certa degradazione dell’immagine.
Impostazioni di Imagify
Impostazioni di Imagify

Da Kinsta utilizziamo la modalità Aggressive e normalmente vediamo un risparmio del 60-70%, a seconda dell’immagine. Nota: in realtà utilizziamo molto più PNG che JPEG perché la maggior parte delle nostre immagini sono icone e illustrazioni, non foto.

Risparmio di file di compressione immagine
Risparmio nella compressione dei file immagine

È possibile attivare l’opzione di ottimizzazione automatica delle immagini al momento dell’upload (cosa che consigliamo per non dimenticarsene) o utilizzare il loro ottimizzatore di immagini in blocco nella libreria media. Potete anche fare back up delle immagini originali. Questo vi permette di convertire la vostra immagine ad altri livelli di ottimizzazione in un secondo momento o anche di ripristinare l’immagine originale. Se non utilizzate questa funzione, vi consigliamo di tenerla disattivata per risparmiare spazio su disco.

In genere dovreste ridimensionare le vostre immagini in anticipo, ma Imagify ha la funzione Ridimensiona immagini più grandi nel caso in cui ve ne dimentichiate o non avete tempo. Oltre alla compressione lossy, questa è un altra ottima funzionalità per risparmiare sulle dimensioni dei file!

Imagify ridimensiona le immagini
Imagify ridimensiona le immagini

In effetti, abbiamo di recente utilizzato la funzione di ottimizzazione comulativa delle immagini su tutta la nostra libreria media di WordPress. Come potete vedere, abbiamo eliminato oltre 700 MB! È tantissimo quando si tratta di prestazioni front-end.

Ottimizzazione delle immagini in blocco
Risparmio di spazio con l’ottimizzazione cumulativa delle immagini

Speed Test

Facciamo un piccolo test! Dato che vediamo costantemente utenti che caricano immagini a piena risoluzione senza compressione, faremo un piccolo test sull’impatto che questo ha sulle prestazioni complessive di un sito.

Test 1 – Originale non compresso

Abbiamo prima caricato 10 immagini non compresse. Abbiamo poi eseguito 5 test su Pingdom e fatto la media. Possiamo vedere che il tempo di caricamento totale è di 3,04 secondi, con una dimensione totale della pagina di 28,4 MB.

  • uncompressed-1.jpg (2,82 MB)
  • uncompressed-2.jpg (2,82 MB)
  • uncompressed-3.jpg (2,82 MB)
  • uncompressed-4.jpg (2.82 MB)
  • uncompressed-5.jpg (2.82 MB)
  • uncompressed-6.jpg (2.82 MB)
  • uncompressed-7.jpg (2.82 MB)
  • uncompressed-8.jpg (2.82 MB)
  • uncompressed-9.jpg (2.82 MB)
  • uncompressed-10.jpg (2.82 MB)
Speed test con immagini non compresse (Pingdom)
Speed test con immagini non compresse (Pingdom)

Test 2 – Compresso

Abbiamo poi caricato di nuovo le stesse immagini, ma questa volta abbiamo abilitato “ottimizzazione automatica” nel plugin Imagify. Abbiamo poi eseguito di nuovo 5 test su Pingdom e fatto la media.

  • compressed-1.jpg (69,3 KB)
  • compressed-2.jpg (69.3 KB)
  • compressed-3.jpg (69.3 KB)
  • compressed-4.jpg (69.3 KB)
  • compressed-5.jpg (69.3 KB)
  • compressed-6.jpg (69.3 KB)
  • compressed-7.jpg (69.3 KB)
  • compressed-8.jpg (69.3 KB)
  • compressed-9.jpg (69.3 KB)
  • compressed-10.jpg (69.3 KB)

Il tempo di caricamento totale è ora di 522 ms con una dimensione totale della pagina di 901.4 KB. Quindi le nostre immagini compresse lossy hanno diminuito il tempo di caricamento della pagina dell’82,83%! 😮 Anche la dimensione totale della pagina è stata ridotta di un enorme 96,83%. E le nostre immagini sono ancora di alta qualità grazie a Imagify.

Speed test compressed
Speed test compresso (Pingdom)

Riepilogo

Una volta determinata la qualità delle immagini di cui avete bisogno sul vostro sito, potete scegliere se usare la compressione lossy o lossless. Di nuovo, per coloro che sono più preoccupati per la velocità e meno per la qualità, si consiglia la compressione lossy. Ricordate che le immagini lossy possono essere belle se trovate il giusto equilibrio. Se avete bisogno di immagini perfette al pixel, allora dovreste sempre optare per la compressione lossless.

Quali sono le vostre considerazioni sulle due modalità di compressione? Preferite la compressione lossy o lossless sul vostro sito WordPress? Scrivetecelo nei commenti.

Brian Jackson

Brian ha una grande passione per WordPress, lo usa da più di dieci anni e sviluppa anche un paio di plugin premium. Brian ama i blog, i film e le escursioni. Entra in contatto con Brian su Twitter.