Come ridurre il peso delle immagini per rendere il tuo sito più veloce

La velocità del sito è uno dei fattori SEO più rilevanti quindi per avere un buon posizionamento sui motori di ricerca occorre migliorare ciò che rallenta il caricamento delle pagine. Ridurre il peso delle immagini è uno dei fattori più impattanti da questo punto vista quindi va monitorato con attenzione. Ricordiamo infatti che la maggioranza di chi naviga in Internet abbandona i siti che non si caricano entro 4-5 secondi, una buona percentuale addirittura entro 2-3 secondi. Per questo Google penalizza i siti più lenti e sembra che in futuro questa politica sarà rafforzata ulteriormente.

Di cosa parleremo nell'articolo

• Squoosh di Google: una delle migliori web app per ottimizzare le immagini web
• Come usare Squoosh per ridurre il peso delle immagini
• Quale tipo di compressione e formato scegliere per ogni immagine
• Quando è utile ridimensionare l'immagine

Squoosh di Google: una delle migliori web app per ottimizzare le immagini web

Uno degli aspetti che impattano di più in termini di velocità del sito è il peso delle immagini che spesso sono ampiamente sovradimensionate rispetto alle necessità anche di molti KB o addirittura MB. Il team di Google è attento a questo tema e per contribuire a migliorare le prestazioni del web ha sviluppato un'applicazione per l'ottimizzazione delle immagini, semplice da usare, efficace e gratuita. Se non siamo grafici esperti quindi Squoosh di Google ci viene in aiuto perché comprime le immagini in modo efficiente trovando il miglior compromesso tra qualità percepita e velocità di caricamento. Squoosh è un'applicazione web (web-app) quindi viene eseguita all'interno browser, come un qualsiasi sito. Una volta caricata possiamo anche usarla in modalità offline, staccando la connessione Internet. Un vantaggio in più per chi lavora su mobile (tablet o smartphone) e desidera risparmiare traffico.

Come usare Squoosh per ridurre il peso delle immagini

Per iniziare a ottimizzare il peso delle immagini vai sul sito di Squoosh https://squoosh.app/ e segui queste semplici indicazioni:

• carica un'immagine trascinandola nella finestra o cliccando su Select an image;
• alla schermata successiva scegli la funzione che ti serve: puoi comprimere, convertire in un altro formato e ridimensionare l’immagine;
• quando hai finito, clicca sull'icona di download per salvare l'immagine localmente.

Uno degli aspetti di Squoosh che preferisco, è che mostra le modifiche all'immagine in tempo reale usando uno schermo diviso in due parti: man mano che lavori vedi contemporaneamente l'immagine originale, l'immagine modificata e il peso del file quando lo salverai. L'immagine è una sola in proporzione 1:1 con una barra verticale (slider) che la attraversa. Basta trascinare la barra verso destra o sinistra per muoverti tra l'immagine originale e quella ottimizzata. Se muovi la barra completamente verso destra vedi solo l'immagine originale, al contrario con la barra tutta a sinistra vedi solo l'immagine ottimizzata.

Quale tipo di compressione e formato scegliere per ogni immagine

La risposta, come puoi immaginare, è: dipende! Squoosh supporta diversi tipi di compressione per convertire il file in altrettanti formati grafici:

• OptiPNG per ottimizzare e convertire in PNG, BMP GIF, PNM e TIFF in PNG
• MozJPEG per ottimizzare e convertire in JPG, TARGA, BMP e PPM in JPEG
• WebP un nuovo formato per il web sviluppato da Google che sta lavorando per farlo diventare il nuovo standard per le immagini web. WebP infatti ottimizza le immagini meglio degli altri sistemi a parità di qualità. Inoltre rispetto al JPG supporta sia l'animazione che la trasparenza. Ad oggi è ancora poco conosciuto e i browser non lo supportano a sufficienza.

I formati grafici più utilizzati ad oggi sono JPG, PNG e GIF, ognuno con le proprie caratteristiche e quindi adatto in alcune situazione e meno in altre. In generale ti consiglio di preferire il PNG per i disegni con colori uniformi e le immagini vettoriali, soprattutto se ti serve lo sfondo trasparente. Se bastano 256 colori puoi scegliere anche il formato GIF. A proposito di GIF prova anche a ridurre il numero di colori utilizzati nella palette. Se l’immagine è composta da pochi colori infatti è inutile salvare nel file informazioni su tutti i colori disponibili. Se l’immagine da ottimizzare è una fotografia scegli il formato JPG. Ricorda che la compressione JOG, come la GIF, comporta sempre la perdita di dati, quindi fai attenzione a calibrare i diversi fattori per mantenere un buon rapporto tra ottimizzazione e qualità finale. Qui può aiutarti lo slider che mostra fianco a fianco l’immagine originale e quella ottimizzata.

Quando è utile ridimensionare l'immagine

Controllate se le immagini sul vostro sito sono visualizzate nella dimensione originale o se il browser le ridimensiona. Ad esempio, se caricate un'immagine di 4000x3000 px ma la larghezza del sito è impostata a 1290 px il browser potrebbe ridimensionarla per visualizzarla correttamente. Il peso del file resta comunque quello originale e quindi molto più pesante del necessario. In questo caso potete ridimensionare l'immagine al massimo di cui avete bisogno. Ottimizzare le immagini per ridurne il peso è solo uno dei tanti fattori SEO che influiscono sul posizionamento di una pagina nella SERP di Google. Se vuoi avviare una strategia SEO per il tuo sito, contattami e raccontami le tue esigenze. Posso offriti una consulenza SEO o un corso di formazione specifico per la tua azienda.