Le pagine web caricano molte risorse: stili CSS per la grafica, file Javascript per i plugin, file dei font per i caratteri, e appunto le immagini. Se usiamo immagini troppo pesanti, la pagina si caricherà più lentamente e questo può risultare in un posizionamento peggiore, soprattutto su Google per quanto riguarda i Core Web Vitals.
Per questo motivo è consigliato utilizzare più formati e più dimensioni per ogni immagine. In genere si usano i formati JPEG, PNG e WEBP. Le dimensioni possono essere inferiori ai 1920px di larghezza (gli schermi Full HD sono 1920×1080) e i 1080px di altezza.
Chiaramente, per un piccolo sito web è meno importante. Se usiamo una sola immagine nel nostro articolo avremo pochi problemi di prestazioni.
Scrivere però un articolo con una decina di immagini JPEG 1000×1000, dove ognuna pesa 2MB, significherà che l’utente dovrà scaricare oltre 20MB per caricare la pagina. Questo può significare il raggiungimento di tempi di caricamento lunghi, anche di svariati secondi, soprattutto su reti internet più lente.
La soluzione più semplice, alla portata di chiunque, è di convertire le immagini in una versione più leggera. Un JPEG solitamente non ha bisogno della massima qualità. Carichiamo una versione con qualità inferiore, così il peso sarà molto minore ma la differenza visiva sarà quasi impercettibile.
Usando Photoshop possiamo salvare l’immagine con qualità 7. Con GIMP possiamo esportare le immagini in qualità 60. Controlliamo di aver ottenuto un buon compromesso tra peso e qualità visiva e carichiamo la nostra immagine nel sito.
Da qualche tempo ormai si stanno diffondendo sempre di più nuovi formati di immagini, WEBP e AVIF, che usano una compressione che permette di ridurre di molto, anche del 50%, il peso di una immagine. Questo diventa importante per rendere la pagina web più veloce da caricare.
Per quanto riguarda larghezza e altezza, un buon compromesso in genere è tra i 600x600px e i 1000x1000px. Dipende anche dal tipo di contenuto: un prodotto potrebbe richiedere una immagine più grande, anche per esigenze grafiche, mentre un banner a schermo intero o un hero probabilmente richiederà una dimensione di circa 1920x600px.
Possiamo riuscire a convertire facilmente JPEG e PNG in WEBP eAVIF, quest’ultimo un po’ meno diffuso, anche se sta prendendo piede un po’ alla volta. I programmi più usati in genere sono Photoshop e GIMP, quindi vediamo velocemente cosa possiamo fare con questi software.
CMS come WordPress spesso fanno queste operazioni di conversione in automatico. È opportuno comunque verificarlo. È possibile anche usare dei plugin per il proprio CMS per ottimizzare le immagini in modo automatico e programmatico, come LiteSpeed Cache per WordPress, oppure EWWW Image Optimizer.
Le librerie di conversione immagini
Una breve digressione tecnica per i più curiosi (o nerd): in genere le conversioni di questo genere vengono effettuate tramite librerie disponibili gratuitamente, che in alcuni casi si possono anche installare sul proprio PC ed eseguire da riga di comando: libwebp e libavif per i nuovi formati citati, ma anche libjpeg e libpng per i formati vecchi.
Allo stesso modo si possono generalmente installare anche sul proprio server e poi programmare un cron per eseguire in modo schedulato la conversione in massa di immagini, ad esempio tramite ImageMagick. Ecco un esempio di comando per la conversione da PNG a WebP:
