6 Metodi per ottimizzare le immagini su WordPress
Quanto spazio occupano le immagini in un sito web?
In media le immagini occupano il 21% del peso di un sito web. E’ molto importante ridurre il peso delle immagini per velocizzare il caricamento delle pagine e per risparmiare spazio web del tuo piano hosting.
1. Ridimensiona le immagini
Quando carichiamo nel nostro sito web un’immagine stock, una foto scattata con il cellulare o la fotocamera o uno screenshot, le dimensioni sono spesso eccessive e non necessarie. Uno dei modi più veloci per ridimensionarle consiste nell’utilizzare un plugin gratuito come Imsanity.
Con Imsanity puoi impostare una larghezza e un’altezza massima per le pagine/post, per la cartella Media e per le immagini del tema. Puoi anche impostare la qualità e convertire le immagini BMP e PNG in JPG.
2. Converti le immagini PNG in JPG
Oltre ad Imsanity, per convertire le immagini da PNG a JPG puoi utilizzare un plugin gratuito come PNG to JPG.
E’ un plugin molto semplice da usare che permette di scegliere se convertire tutte le immagini PNG o solo quelle prive di trasparenze.
3. Comprimi il peso delle immagini
Per ridurre il peso delle immagini puoi usare un plugin gratuito come reSmush.
Ti basterà solo scegliere la qualità dell’immagine e attivare l’ottimizzazione nella fase di upload.
4. Converti tutte le immagini nei formati più recenti
Se hai avuto l’occasione di testare il tuo sito web con Google PageSpeed Insights avrai notato l’errore “Pubblica immagini in formati più recenti“. JPEG 2000, JPEG XR, e WebP sono formati di immagini che hanno una compressione e qualità maggiore rispetto alle immagini meno recenti come JPEG e PNG. Salvare o convertire le immagini in questi formati più recenti significa ottenere un sito più veloce che consuma meno dati. Questo lo puoi fare tramite il plugin gratuito WebP Express.
Questo plugin ti permette di convertire le immagini presenti nella cartella uploads e nel tema. Leggi il mio articolo / tutorial “Pubblica le immagini nei formati più recenti (clicca qui per aprirlo)” per scoprire come configurare anche le impostazioni più avanzate che permettono maggiore compatibilità nei vari browser e sistemi operativi.
Convertire le immagini nei formati più recenti presenta un altro vantaggio positivo: le immagini in formato WebP scaricate dal tuo sito web non possono essere caricate in un altro sito WordPress e questo ti permetterà di evitare furti di contenuti dal tuo sito web.
5. Carica le immagini in modo differito
Uno degli altri metodi per aumentare la velocità di caricamento di una pagina web consiste nel caricare le immagini in modo differito (lazy loading). Questo lo puoi ottenere tramite un plugin gratuito che si chiama Lazy Load by WP Rocket. Con questo plugin gratuito e leggero le immagini verranno caricate gradualmente solo quando si scorre la pagina verso il basso.
Tramite questo plugin potrai anche caricare in modo differito gli Iframes e i video e sostituire i video embed di Youtube con una miniatura.
6. Sfrutta il caching del browser (Leverage browser caching)
Quando un utente visita il tuo sito web memorizza le risorse visualizzate nella cache del browser. Per conservare le immagini nella cache per un periodo più lungo (finché non vengono cambiate) bisogna impostare il tempo di scadenza modificando il file .htaccess o tramite un plugin come Add Expire Headers.
Abbiamo visto come ridurre una delle risorse che occupano più spazio in un sito web come le immagini. Grazie a questi plugin noterai una riduzione netta del peso delle pagine e del tempo di caricamento.
Se sai come modificare il file .htaccess nel tuo piano hosting puoi anche copiare e incollare questo codice invece di installare il plugin Add expire headers:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 year"
ExpiresByType text/html "access 1 year"
ExpiresByType application/pdf "access 1 year"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 year"
</IfModule>
## EXPIRES CACHING ##
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=31556952, public"
</filesMatch>Ora puoi testare di nuovo il tuo sito web su Google PageSpeed Insights e su GTMetrix per accertarti di aver ottimizzato abbastanza le immagini.
