Come ottimizzare le immagini su WordPress

Consigli e plugin per ridurre i tempi di caricamento delle pagine ottimizzando le immagini

Scritto da Tiziano Fogliata
Aggiornato il

WordPress rende molto semplice caricare una o più immagini all’interno di pagine e articoli. Proprio questa semplicità però, può causare conseguenze spiacevoli per quanto riguarda la velocità di caricamento delle pagine.

Inserire una o più immagini in un articolo, senza provvedere a ottimizzarle può avere effetti disastrosi sul tempo di caricamento della pagina. Quindi, se non vuoi che le pagine del tuo sito siano lente da caricare, ti consiglio di continuare la lettura ;)

Quando carichi un’immagine su un sito realizzato con WordPress, oltre a creare diverse versioni di quell’immagine (più avanti parleremo anche di questo problema), WordPress effettua una compressione dell’immagine, anche se non in modo particolarmente brillante.

WordPress è impostato per applicare un livello qualitativo di compressione pari al 90% del file originale. Dalla versione 4.5 il livello di qualità è stato ulteriormente ridotto a 82, così da incrementare la compressione e ridurre ancor di più le dimensioni dei file.

Se però ottimizzi già le immagini prima di caricarle, ad esempio con programmi come ImageOptim, potresti evitare di utilizzare la compressione di WordPress e ottenere immagini di migliore qualità sul tuo sito.

La qualità dell’ottimizzazione delle immagini effettuata direttamente WordPress non è infatti delle migliori. Può infatti succedere che le varie miniature delle immagini generate da WordPress abbiano un peso maggiore rispetto al file ottimizzato originale che è stato caricato.

Nell’esempio riportato nell’immagine sottostante, il file esempio-01.jpg è un’immagine da 1920×1080 pixel che ho provveduto a ottimizzare prima di caricare su WordPress. La versione “esempio-01-1536×1024.jpg” creata da WordPress, che ha una dimensione minore in termini di pixel, è però molto più pesante in termini di KB. In altre parole, la versione più piccola dell’immagine, generata da WordPress, pesa di più rispetto al file originale caricato.

WordPress genera diverse versioni ridotte di un’immagine caricata

Ecco perché è meglio affidarsi a plugin o a software specifici per l’ottimizzazione delle immagini ed effettuare alcune modifiche alla gestione delle immagini predefinita di WordPress.

In questo articolo vedo di fornirti alcuni consigli utili e segnalarti quei plugin che possono aiutarti e semplificare il lavoro di ottimizzazione delle immagini sul tuo sito.

Il comportamento standard di WordPress

Prima di tutto vediamo come si comporta WordPress quando carichiamo un’immagine.

Partiamo da due file di esempio.

  • Un’immagine JPEG da da 3481×5222 pixel da 2,7 MB (nell’esempio il file originale si chiama originale.jpg)
  • La stessa immagine ridimensionata a 1600×2400 pixel e ottimizzata prima di caricarla su WordPress (nell’esempio il file originale si chiama z_originale-pre-ottimizzata.jpg)

Ecco i risultati nell’immagine sottostante:

Le diverse miniature create da WordPress

Come puoi notare, WordPress di default crea numerosi file derivati dall’immagine originale. Dal file originale.jpg ha creato ben 7 versioni. Dal file z_originale-pre-ottimizzata.jpg sono state create 6 versioni.

Ora, è facile rendersi conto di come questo vada ad occupare parecchio spazio aggiuntivo sul server. Spesso poi, si tratta di immagini che non vengono nemmeno utilizzate sul sito.

Inoltre, come nel caso dell’immagine già ottimizzata prima del caricamento (il file z_originale-pre-ottimizzata.jpg) è facile vedere come le versioni create da WordPress abbiano una dimensione in KB superiore rispetto a quella del file originale.

Come impostazione predefinita, WordPress crea una serie di immagini derivate per ogni nuova immagine caricata:

  • una immagine di dimensione miniatura
  • un’immagine di dimensione media
  • un’immagine di dimensione grande

a queste si sono poi aggiunte altre immagini usate per le versioni responsive:

  • la versione retina dell’immagine di dimensione media
  • la versione retina dell’immagine di dimensione grande
  • la versione scaled per creare un’immagine larga ( o alta) al massimo 2560 pixel

Se carichi su WordPress un’immagine che ha un lato di dimensione maggiore di 2560 pixel, viene creata automaticamente un’immagine “scaled” ridimensionata a 2560 pixel nel suo lato di dimensione maggiore.

Queste immagini vengono utilizzate da WordPress in modo da fornire l’immagine della dimensione più adatta al dispositivo usato dal visitatore (pc desktop, tablet o smartphone). È evidente però che se le immagini ridimensionate sono più pesanti dell’originale, questo non porta grandi vantaggi.

È facile capire come questa proliferazione di immagini, moltiplicata per il numero di immagini caricate su un sito vada ad occupare una gran quantità di spazio.

Per questo motivo, un primo consiglio è quello di limitare il numero di immagini derivate create da WordPress.

Come evitare che WordPress crei le varie miniature delle immagini

Esistono diversi modi per farlo. Uno dei più semplici è quello di impostare a zero la dimensione delle immagini nella sezione Impostazioni » Media di WordPress.

Impostando a zero la dimensione in larghezza e in altezza, quella dimensione non viene più generata in automatico.

Impostazioni media di WordPress relative alle immagini

Oppure è possibile usare un plugin come Disable Media Sizes che permette di scegliere quali dimensioni disattivare.

Impostazioni del plugin Disable Media Sizes

In questo articolo scritto da Jeff Starr (l’autore del plugin) trovi tutti i dettagli e anche il codice, se preferisci inserirlo manualmente anziché installare il plugin.

È molto difficile consigliare un’impostazione che vada bene in tutte le situazioni. È necessario valutare caso per caso. Direi però che la Dimensione Miniatura e la Dimensione Media possono essere disattivate nella maggior parte delle situazioni.

Considera inoltre, che molti temi aggiungono ulteriori versioni delle immagini, in modo da obbligare WordPress a creare miniature adatte alle dimensioni delle immagini utilizzate in quel particolare tema.

Plugin WordPress per ottimizzare e ridurre il peso delle immagini

Dato che, come hai potuto vedere, WordPress di default non permette di ottenere un livello soddisfacente di ottimizzazione e compressione del peso delle immagini, la strada migliore è quella di ricorrere a specifici plugin di ottimizzazione.

Questi ti permettono sia di ridurre il peso dell’immagine originale caricata sul sito, sia di tutte le eventuali versioni create da WordPress.

Ho sottoposto i vari plugin a un semplice test: ottimizzare una fotografia in formato JPG. Il file originale è grande 2400×1476 pixel e pesa 1.187 KB.

reSmush.it Image Optimizer

Un plugin che ti permette di ottimizzare tutte le immagini del tuo sito a patto che la dimensione di ogni singola immagine non superi i 5 MB. reSmush.it permette di definire il livello di ottimizzazione/compressione dell’immagine, che di default è impostato su 92 (su una scala da 0 a 100).

Il principale vantaggio di questo plugin è che è completamente gratuito. Il livello di ottimizzazione che è possibile ottenere non è però particolarmente elevato.

Nel test effettuato, reSmush.it ha permesso di ottenere un risparmio del 2,14% rispetto al file originale. Aumentando il livello di compressione è possibile spremere qualche punto in più, sacrificando però anche la qualità del risultato finale.

Imagify

Imagify è un servizio che fa parte della famiglia di WP Rocket, uno dei migliori plugin per velocizzare un sito WordPress, e permette di ottimizzare facilmente e in modo estremamente efficace le immagini caricate nella libreria media di WordPress.

Imagify offre anche la possibilità di generare la versione WebP delle immagini. WebP è il formato di compressione sviluppato da Google che consente di ridurre ulteriormente la loro dimensione. Purtroppo però non è supportato da tutti i browser e per questo motivo sono necessari accorgimenti particolari per utilizzarlo.

Ecco il risultato di un’ottimizzazione effettuata con Imagify

Il servizio è utilizzabile anche in versione gratuita, ma in questo caso le immagini non possono essere di dimensioni superiori a 2 MB. Per accedere alla versione gratuita è necessario registrarsi e ottenere una chiave API.

Il piano gratuito prevede anche una quantità massima di immagini che possono essere ottimizzate, che non deve eccedere i 25 MB al mese. Se hai necessità di ottimizzare quantitativi superiori di immagini, è necessario sottoscrivere un piano a pagamento.

ShortPixel

ShortPixel è una delle soluzioni per l’ottimizzazione delle immagini più diffuse e mette a disposizione tutta una serie di plugin per la gestione delle immagini su WordPress. ShortPixel Image Optimizer è il plugin che permette di ottimizzare le immagini presenti su un sito WordPress.

Esiste anche ShortPixel Adaptive Images che, oltre a ottimizzare le immagini, mette anche a disposizione la CDN di ShortPixel. In pratica le immagini non vengono ottimizzate e salvate sul tuo server, ma vengono conservate e distribuite dai server di ShortPixel.

Anche ShortPixel, come Imagify, permette la conversione delle immagini nel formato WebP. Puoi creare un account gratuito per l’ottimizzazione di 100 immagini gratis ogni mese.

ShortPixel è il plugin che consiglio a chi privilegia il maggior livello possibile di compressione.

Interfaccia del plugin Shortpixel

Questo plugin permette di scegliere tra 3 diversi livelli di compressione. Quello Lossy è il livello che offre il maggior livello di compressione, quello Lossless offre il minor livello di compressione ma permette di mantenere inalterata la qualità dell’immagine. Il livello Glossy è una via di mezzo tra i due.

ShortPixel, come puoi vedere nell’immagine, permette di ridimensionare le immagini caricate perché non superino una certa risoluzione. Questo evita la conservazione sul server di immagini inutilmente grandi, con conseguente occupazione eccessiva di spazio.

ShortPixel inoltre mette a disposizione anche uno strumento online gratuito per l’ottimizzazione delle immagini.

EWWW Image Optimizer

Si tratta di un plugin che consente di ottimizzare le immagini che hai già caricato sul tuo sito WordPress, sia quelle che andrai a caricare in futuro. Esiste anche una versione cloud di questo plugin, ossia che consente di sfruttare un servizio esterno (Compress API) per l’ottimizzazione delle immagini, senza gravare quindi sul tuo server. Tale servizio cloud esterno è a pagamento e fornisce livelli di ottimizzazione decisamente migliori rispetto a quelli che si possono ottenere sfruttando solo le risorse del server che ospita il sito.

Il plugin consente di ottimizzare sia immagini in formato JPG che PNG e si integra anche con altri plugin come ad esempio NextGen Gallery e FooGallery.

EWWW Image Optimizer, nella versione standard gratuita, non permette di raggiungere livelli di ottimizzazione particolarmente elevati. Suggerisco però di acquistare l’accesso alla Compress API di EWWW per poter sfruttare al meglio questo plugin.

Come ShortPixel e Imagify, anche EWWW offre la conversione delle immagini nel formato WebP.

Livelli di ottimizzazione delle immagini disponibili con EWWW

Sono supportati anche i principali Content Delivery Network come Amazon S3, Azure Storage, Cloudinary, DreamSpeed CDN, Cloudflare, MaxCDN e Sucuri CloudProxy.

EWWW permette di impostare una risoluzione massima di archiviazione per le immagini caricate su WordPress. Questo per evitare che venga occupato inutilmente spazio sul server con immagini eccessivamente grandi e pesanti. Inoltre è anche possibile disattivare la creazione di determinate dimensioni di immagini, per evitare che WordPress le crei in automatico.

Il test di compressione con questo plugin è stato effettuato usando il livello di compressione JPEG Premium Plus, che è il livello di compressione lossy più elevato supportato da questo plugin.

Risultati della prova

Nel semplice test effettuato, utilizzando la stessa immagine con i vari plugin risulta che ShortPixel è il plugin che permette di spremere al massimo le immagini, ottenendo la dimensione più ridotta. Ma è necessario tenere presente anche del risultato in termini qualitativi.

Nell’immagine usata come campione:

Esito del confronto tra i plugin
  • Imagify ha permesso di ottenere una riduzione del 24% utilizzando il livello di compressione Smart, senza significative perdite di qualità.
  • ShortPixel in modalità Glossy ha ridotto la dimensione del 59% con alcune lievi perdite in termini di qualità, visibili a occhio nudo.
  • ShortPixel in modalità Lossy ha ridotto la dimensione del 78% con perdite di qualità ben visibili a occhio nudo.
  • EWWW con la compressione JPEG Premium Plus ha permesso di ottenere una riduzione del 43% senza un percepibile peggioramento qualitativo dell’immagine.

Il livello di compressione che è possibile ottenere e soprattutto l’eventuale peggioramento in termini qualitativi dipende molto dal tipo di immagine di partenza.

Tenendo conto del livello di compressione e del risultato finale raggiunto, personalmente io preferisco utilizzare EWWW acquistando il servizio Compress API.

Altri plugin utili

Ti segnalo anche alcune soluzioni che possono essere utili per la gestione delle immagini su WordPress.

Imsanity

Questo plugin non effettua operazioni di ottimizzazione sulle immagini ma consente di evitare che nella libreria del tuo sito WordPress vengano conservate immagini di dimensioni pachidermiche ;)

Utile soprattutto in caso di blog gestito da più autori, questo plugin si occupa del ridimensionamento delle immagini caricate dai vari utenti del sito. Se ad esempio alcuni collaboratori tendono a caricare immagini in formato jpg con risoluzioni tipo 7000×5000 pixel dal peso di diversi Megabyte, questo plugin consente di riportare tali immagini a dimensioni più umane, risparmiando così parecchio spazio sul server.

imsanity-wordpress

Cloudinary

Se hai un sito nel quale le immagini rappresentano la componente principale e sono il vero punto di forza della tua presenza sul Web, allora una soluzione come Cloudinary può essere davvero interessante. Il servizio, che mette a disposizione anche un plugin per WordPress, offre una serie di funzionalità interessanti per la gestione delle immagini.

Questo servizio fornisce spazio di archiviazione e CDN velocizzando così i tempi di caricamento dei contenuti. La vera potenza di Cloudinary risiede però nelle funzionalità di manipolazione delle immagini.

In base al dispositivo usato dal visitatore, Cloudinary fornisce l’immagine con le dimensioni appropriate, evitando così che un utente che si collega da smartphone con una banda ridotta debba scaricare la versione più pesante di un’immagine.

I vantaggi però non si fermano a questo. Questo servizio offre anche la possibilità di applicare alle immagini numerosi effetti e manipolazioni, come ad esempio il crop “intelligente” delle immagini. Questo significa permette di tagliare e ridimensionare in automatico le immagini senza tagliare a metà un un volto o il soggetto principale della foto.

Nell’immagine sottostante è possibile vedere alcuni degli effetti che è possibile ottenere con Cloudinary.

cloudinary

Articoli che ti suggerisco…

4 commenti su “Come ottimizzare le immagini su WordPress”

  1. Ciao! Scusa ma inserisco la stringa nel file function-php ma mi restituisce questo errore:
    Fatal error: Call to undefined funzione add_filter () in /home/agenzias/public_html/jm-studio/wp-includes/functions.php on line 44

    Come posso fare?

    Grazie

    Rispondi
  2. Ciao noi utilizziamo Kraken sia nella versione di plugin wordpress che in quella gratuita direttamente dal loro sito. Abbiamo provato diverse alternative in passato ma abbiamo adottato questa soluzione da un paio di anni e ci troviamo bene.

    Rispondi
    • Ciao, sì anche Kraken è molto buono. Io uso spesso la loro interfaccia web che è comoda per le ottimizzazioni al volo e non richiede alcuna registrazione.

      Rispondi

Lascia un commento