Penso che sia noto a tutti quanto sia importante ottimizzare le immagini per migliorare la velocità del nostro sito WordPress. Quindi se vuoi imparare a ottimizzare le immagini per il tuo sito web mettiti comodo e continua a leggere, altrimenti guardati una bella serie TV.
Cominciamo subito con una piccola curiosità: che succede se digiti su Google “Come ottimizzare immagini WordPress?” te lo dico io, ti verranno fuori moltissimi articoli che ti elencano quali sono i migliori plugin per ottimizzare immagini.
Non mi sono ancora presentato: mi chiamo Luca e da circa 10 anni mi occupo di Realizzazione siti web a Roma (super veloci). Se hai già letto il mio articolo “Perché il mio sito è lento?” saprai già che, un uso eccessivo di plugin oltre a mettere a rischio la sicurezza del nostro sito, può comprometterne anche le sue performance.
Comunque senza dilungarci troppo, visto che ci sono già moltissimi articoli che sponsorizzano svariati plugin adatti allo scopo, in quest’articolo ti spiegherò come lavorare alle immagini del tuo sito senza usare nessun plugin.
Sicuramente non sarà un processo automatico, quindi dovrai perdere qualche minuto del tuo tempo, ma credimi ne varrà la pena. Quindi cominciamo subito!
Quanto devono pesare le immagini per il web?
Chiariamo subito questo punto: le immagini per il web devono pesare il giusto! E’ chiaro comunque che, meno pesano e meglio è ma, si deve sempre rapportare questo valore alle dimensioni effettive che occupano nella nostra pagina ed al loro formato.
Facciamo un esempio pratico:
Sul nostro sito abbiamo un’immagine che occupa uno spazio reale di 756 x 432 px.
L’errore più comune che molti fanno è proprio quello di non curarsi di questo dato, caricando un immagine che ha come dimensione originale per esempio: 1920 x 864 px.
Ok, cosa succede adesso? Semplice, il template adatterà l’immagine alle dimensioni di 756 x 432 px ma la sua dimensione effettiva resterà sempre 1920 x 864 px. Quindi nel concreto sarà più pesante di quello che dovrebbe essere, facendo lavorare di più il server ed il browser e dilatando i tempi di attesa per il rendering.
Risultato finale? pessima esperienza di navigazione per il nostro visitatore, Google si accorge dell’errore e ne tiene conto nella valutazione delle performance (sito più lento).
Quindi prima di preoccuparti del peso, preoccupati delle dimensioni e ricordati di dare sempre all’immagine che stai caricando le stesse dimensioni che occuperà effettivamente nella pagina.
Ad ogni modo anche dopo aver dato le giuste dimensioni alle immagini Google potrebbe segnalarti ancora che sono troppo pesanti. E allora come si fa a dare il giusto peso alle immagini per il web? scegliendo uno dei formati che Google stesso ci suggerisce per alleggerire ulteriormente il peso dell’immagine. Io ad esempio uso il formato Webp.
Come caricare immagini in formato Webp su WordPress
Se hai effettuato un test delle performance al tuo sito web utilizzando Google page speed o Google light house potresti aver già ricevuto come suggerimento quello di usare dei formati più recenti come ad esempio il formato Webp.
Ma perché usare questo formato? Perché consentono una compressione migliore rispetto ai vecchi formati (JPEG o PNG) accelerandone i Download. Quindi migliorano anche i tempi di caricamento delle nostre pagine.
Si Luca, so già che il formato Webp è migliore del vecchi JPEG, ma WordPress non lo supporta.
Si è vero! anche se si vocifera che prossimamente arriverà una nuova versione di WP che lo dovrebbe integrare ad oggi è proprio come dici tu. Ma non è detto però che non lo possa nel frattempo integrare tu.
Come? copiando ed incollando questo codice sul file function.php del tuo tema.
//caricare immagini webp
function cc_mime_types($mimes)
{
$mimes[‘webp’] = ‘image/webp’;return $mimes;
}
add_filter(‘upload_mimes’, ‘cc_mime_types’);
Importante:
- Prima di ogni modifica esegui sempre un Backup;
- Applica sempre tutte le modifiche al tuo childe Theme.
Quali software usare per l’editing delle immagini
Anche se non approfondirò questo argomento, voglio comunque suggerirti 2 programmi che puoi usare per l’ottimizzazione delle tue immagini.
- GIMP: nel caso volessi istallarlo sul tuo PC (software con licenza Open Source che supporta anche il formato Webp).
- PHOTOPEA: nel caso volessi lavorare on line (sito web: https://www.photopea.com/).
Se magari hai già un software con cui ti trovi bene a lavorare ma, non supporta il formato Webp puoi sempre usare CONVERTIO (SITO WEB: https://convertio.co/it/).
Conclusione
Spero di averti spiegato in maniera semplice e chiara come ottimizzare le immagini del tuo sito WordPress per aumentare anche la sua velocità. Se ai dubbi o non ti senti sicuro di potercela fare, contattami.
Categoria: Template e Plugin | scritto da: Corona Web Consulting