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.

(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.

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.

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.

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:

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. 👍

Sul blog Kinsta utilizziamo Imagify, quindi vi mostriamo come funziona. C’è un piano gratuito, ma anche i loro piani pro hanno prezzi molto ragionevoli. Noi ottimizziamo un bel po’ di immagini e il piano “Lite” (1 GB al mese) è sufficiente. Pagando annualmente sono meno di 4,25 dollari al mese.

Imagify ha tre diversi livelli di ottimizzazione:

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.

Alle prese con i tempi di inattività e problemi di WordPress? Kinsta è la soluzione di hosting progettata per farvi risparmiare tempo! Scopri i nostri servizi
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.

Speed test con immagini non compresse

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.

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.


Risparmia tempo e costi e massimizza le prestazioni del sito con:

  • Aiuto immediato dagli esperti dell’hosting WordPress, 24/7.
  • Integrazione di Cloudflare Enterprise.
  • Copertura globale del pubblico con 28 data center in tutto il mondo.
  • Ottimizzazione del sito con il nostro Monitoraggio delle Prestazioni delle Applicazioni integrato.

Tutto questo e molto altro, in un piano senza contratti a lungo termine, con migrazioni assistite e una garanzia di 30 giorni di rimborso. Scopri i nostri piani o contattaci per trovare il piano che fa per te.