Come comprimere le immagini per un sito e velocizzare le pagine

Perché il peso delle immagini conta

Una foto scattata direttamente con lo smartphone può pesare diversi megabyte. Se la inserisci in un articolo, un visitatore con connessione mobile deve scaricarla per intero anche se viene mostrata larga solo poche centinaia di pixel. Il risultato è una pagina lenta, più visitatori che se ne vanno e traffico dati sprecato.

La velocità è legata anche ai Core Web Vitals che Google utilizza. Uno di questi è l'LCP (Largest Contentful Paint), che misura quanto rapidamente compare l'elemento visibile più grande. Molto spesso quell'elemento è l'immagine principale, quindi il suo peso influisce direttamente sul punteggio. Google definisce buono un LCP di 2,5 secondi o meno.

Scegliere il formato: WebP o JPG

Il JPG è adatto alle fotografie e funziona ovunque. Il WebP di solito produce un file più leggero a parità di qualità visiva, spesso di circa un quarto o più, e ormai tutti i principali browser lo supportano. Per i nuovi siti il WebP è normalmente una buona scelta predefinita.

Il PNG è la scelta giusta per screenshot, loghi e grafiche con bordi netti o trasparenza. Le foto salvate in PNG diventano insolitamente pesanti, quindi convertile piuttosto in JPG o WebP. Anche i file HEIC degli smartphone vanno convertiti prima di finire su un sito web.

Impostare la qualità

Per i formati con perdita (JPG, WebP), una qualità di circa 75-85 sulla scala da 0 a 100 è di solito sufficiente per le foto. Sotto circa 70 iniziano a comparire zone a blocchi e rumore attorno ai bordi, mentre sopra 90 il file cresce molto per una differenza che l'occhio nota a malapena.

Il metodo migliore è provare: esporta alcune versioni e confrontale a schermo alla dimensione con cui verranno effettivamente mostrate. Le immagini con ampie aree uniformi o testo sottile mostrano prima gli artefatti di compressione e possono richiedere un'impostazione più alta.

Ridimensionare alla dimensione visualizzata

Comprimere senza ridimensionare è solo metà del lavoro. Se un'immagine viene mostrata larga 800 px, non ha senso servire un file da 4000 px. Ridurre una grande foto da 4000 a 1600 px di larghezza abbassa il peso del file di diverse volte, perché il numero di pixel scende con il quadrato della larghezza.

Per mantenere le immagini nitide sugli schermi ad alta densità, prepara una versione larga circa il doppio di quella visualizzata. Per uno spazio di 800 px, di solito basta un file da 1600 px.

Immagini responsive e caricamento

L'attributo srcset permette al browser di scegliere un file di dimensione adatta allo schermo. Esempio:

<img src="photo-800.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 800px" width="800" height="533" alt="Description" loading="lazy">

L'attributo loading="lazy" indica al browser di scaricare l'immagine solo quando il visitatore scorre in prossimità di essa, quindi usalo per le immagini sotto la prima schermata. Non applicare il lazy loading all'immagine principale visibile in alto, perché può peggiorare l'LCP.

Gli attributi width e height permettono al browser di riservare lo spazio in anticipo, così la pagina non sussulta durante il caricamento. Questo migliora la metrica CLS (Cumulative Layout Shift).

Una checklist pratica prima della pubblicazione

• Immagine ridimensionata alla larghezza con cui viene realmente mostrata (non più del doppio circa).
• Formato scelto: WebP o JPG per le foto, PNG o WebP per le grafiche con trasparenza.
• Qualità intorno a 75-85, verificata a occhio sullo schermo.
• Attributi width e height impostati.
• Le immagini sotto la prima schermata usano loading="lazy".
• Nomi di file descrittivi (per esempio kaunas-old-town.webp) e testo alt significativo.
• Peso effettivo dei file scaricati verificato negli strumenti per sviluppatori del browser (scheda Rete).

Come misurare il risultato

Prima di ottimizzare, annota quanto pesa la pagina. Negli strumenti per sviluppatori del browser (F12, scheda Rete, filtro Img) puoi vedere la dimensione di ogni immagine e il totale. Dopo l'ottimizzazione, ripeti la misurazione con la cache disattivata (Disable cache) in modo che il confronto sia corretto.

Esempio: un articolo ha cinque foto da 3 MB ciascuna, circa 15 MB in tutto. Se riduci ognuna a 1600 px di larghezza e la salvi in WebP con qualità 80, spesso pesa circa 100-250 KB, e tutte insieme meno di 1,5 MB. La cifra esatta dipende dal contenuto della foto, quindi misura sempre di persona.

Errori comuni

• Ridimensionare solo con il CSS: se carichi un file da 4000 px e lo mostri largo 400 px, il browser scarica comunque l'intero file.
• Ricompressioni ripetute: ogni nuovo salvataggio di un JPG aggiunge perdite. Esporta sempre dall'originale.
• Usare il PNG per le foto: il file può essere diverse volte più grande di un JPG o di un WebP.
• Lazy loading sulla prima immagine: l'immagine principale in alto deve caricarsi subito.
• Testo alt mancante: conta per l'accessibilità e aiuta i motori di ricerca a capire l'immagine.