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

È superfluo ricordare quanto sia utile ed esteticamente gradevole inserire delle immagini all’interno dei propri post. Un’immagine può infatti contribuire a rendere più accattivante una pagina, a rafforzare un concetto o a spiegare con maggiore efficacia un messaggio.

Inserire una o più immagini in un articolo, senza provvedere a ottimizzarle può però avere spiacevoli effetti sul tempo di caricamento della pagina, un aspetto da tenere sempre sotto controllo. 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 il sistema, oltre a creare diverse versioni di quell’immagine, effettua una compressione che tende a diminuire la qualità di tale immagine.

WordPress è normalmente 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 ottimizzi già le immagini prima di caricarle, ad esempio con programmi come Photoshop o app come ImageOptim potresti evitare di utilizzare la compressione di WordPress e ottenere immagini di migliore qualità sul tuo sito.

In questo articolo ti segnalo anche alcuni plugin che possono essere molto utili per ridurre la dimensioni delle immagini presenti nelle pagine del tuo sito.

Come disabilitare la compressione dei file JPEG effettuata da WordPress

È possibile installare dei plugin appositamente pensati per questo scopo ma, a mio avviso, la soluzione più pratica è quella di inserire la seguente riga di testo nel file functions.php del tema che utilizzi sul tuo sito WordPress:

add_filter( 'jpeg_quality', 'alt_image_quality' );
add_filter( 'wp_editor_set_quality', 'alt_image_quality' );
function alt_image_quality( $quality ) {
    return 100;
}

Come incrementare il livello di compressione delle immagini JPEG

Se invece vuoi aumentare il livello di compressione delle immagini, per ottenere file dalle dimensioni più contenute, ti basterà modificare la riga riportata precedentemente in questo modo:

add_filter( 'jpeg_quality', 'alt_image_quality' );
add_filter( 'wp_editor_set_quality', 'alt_image_quality' );
function alt_image_quality( $quality ) {
    return 60;
}

60 significa che ora la compressione viene effettuata al 60%. Puoi anche provare valori inferiori, ma aspettati ovviamente una qualità delle immagini decisamente bassa.

È poi utile precisare che tali modifiche avranno effetto solo sulle immagini caricate da ora in avanti. Quelle già caricate non risentono infatti di tali interventi. Per rigenerare nuovamente tutte le immagini precedentemente caricate sul tuo sito WordPress ti potrebbe tornare utile il plugin Regenerate Thumbnails, che ha appunto lo scopo di ricreare tutte le miniature delle immagini presenti su WordPress.

Plugin WordPress per ottimizzare e ridurre il peso delle immagini

Esistono inoltre numerosi plugin che ti consentono di ottimizzare la dimensioni delle immagini caricate sul tuo sito WordPress, riducendone il peso ma mantenendo comunque una buona qualità dell’immagine. Vediamone alcuni.

Smush Image Optimization, Compression, and Lazy Load

Questo plugin non richiede alcun lavoro di configurazione particolare e consente di ottimizzare facilmente le dimensioni delle immagini presenti sul tuo sito WordPress. Sfruttando le WPMU DEV WordPress Smush API il plugin consente di risparmiare parecchi Kb riducendo il peso di ogni singola immagine caricata sul tuo sito.

Chiaramente meno le immagini di partenza sono ottimizzate, maggiore sarà il risparmio in termini di dimensioni che potrai ottenere con WP Smush.

Ecco alcuni esempi:

Immagine non ottimizzata precedentemente e ottimizzata con WP Smush (Dimensione ridotta del 32,5% da 63,5 Kb a 42,87 Kb)

Immagine ottimizzata precedentemente con Photoshop (Jpeg quality 60) e successivamente con WP Smush (Dimensione ridotta del 4,1% da 25,9 Kb a 24,86 Kb):

Immagine ottimizzata precedentemente con Photoshop (Jpeg quality 30) e successivamente con WP SmushIt (Dimensione ridotta del 5,4% da 12,9 Kb a 12,27 Kb):

Ricordate inoltre che anche una minima percentuale di ottimizzazione può fare la differenza se rapportata alla quantità di immagini presenti e al numero di accessi del vostro blog. Ogni immagine non ottimizzata significa un consumo inutile di banda e tempi di attesa più lunghi per i visitatori del tuo sito.

WP Smush è disponibile anche in versione Pro, ma già la versione gratuita è più che adeguata per le normali esigenze.

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.

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

Imagify è il plugin che utilizzo. È semplicissimo da configurare e utilizzare e dalle prove che ho effettuato è quello che permette di raggiungere i più elevati livelli di compressione delle immagini.

ShortPixel

ShortPixel è una delle migliori soluzioni per l’ottimizzazione delle immagini e mette a disposizione tutta una serie di plugin per la gestione delle immagini su WordPress. Il plugin più diffuso è sicuramente ShortPixel Image Optimizer, che permette di ottimizzare tutte le immagini presenti su un sito WordPress. Esiste però anche ShortPixel Adaptive Images, che oltre a ottimizzare le immagini ti 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.

Kraken Image Optimizer

Una soluzione a pagamento, ma molto efficiente in termini di ottimizzazione delle dimensioni delle immagini è quella offerta da Kraken e dalle sue API, utilizzabili su WordPress grazie a un apposito plugin. Puoi provare l’efficienza dell’ottimizzazione caricando un’immagine sul sito Kraken e verificare che in molti casi è in grado di ridurre notevolmente le dimensioni delle immagini.

Il plugin consente di provare gratuitamente il sistema di ottimizzazione di Kraken fino a un massimo di 100 Mb di immagini, poi è necessario sottoscrivere un piano a pagamento.

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 per l’ottimizzazione delle immagini, senza gravare quindi sul tuo server. Tale servizio cloud esterno è a pagamento, ma può essere interessante valutarlo se sul tuo sito sono presenti enormi quantità di immagini.

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, soprattutto nella versione standard non permette di raggiungere livelli di ottimizzazione particolarmente elevati, ma ha il vantaggio di essere gratuito e di non richiedere alcuna registrazione.

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

EWWW-Image-Optimizer

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

Altri plugin WordPress per la gestione delle immagini

Ti segnalo inoltre un utile plugin per sostituire le immagini già caricate su WordPress senza dover ricreare i collegamenti all’immagine precedente o dover modificare manualmente tutti i post nei quali tale immagine era presente.

Leggi anche: utilizzo degli attributi TITLE e ALT, come ottimizzare le immagini per i motori di ricerca.

Se ti è piaciuto e hai trovato utile questo articolo, eccone altri che potrebbero interessarti

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