Guida

Ottimizzare le immagini del tuo sito perché carichi veloce

Le immagini sono metà del peso di un sito medio. Quattro decisioni, nessun ridisegno, e la pagina cala tra il 40% e il 70%.

In un sito medio le immagini sono tra il 50% e il 70% di tutto ciò che il browser scarica. Se la tua pagina è lenta, quasi sempre la colpa è lì e non nel codice. La buona notizia è che sistemarlo non richiede di essere sviluppatori: quattro decisioni ben prese risolvono gran parte del problema.

1. Servi la dimensione che si vede davvero

L'errore numero uno è caricare la foto così come è uscita dalla fotocamera. Un'immagine larga 4032 px mostrata in una colonna di 760 px scarica cinque volte più dati del necessario. Prima di caricare qualsiasi cosa, guarda la larghezza reale dello spazio in cui va l'immagine e ridimensiona a quella larghezza, o al doppio se la vuoi nitida su schermi ad alta densità.

Riferimenti che funzionano bene nella maggior parte dei temi:

• Immagine a tutta larghezza (copertina): 1920 px.
• Immagine dentro un articolo: 1280 px.
• Scheda o elenco: 800 px.
• Miniatura: 400 px.
• Avatar: 200 px.

2. Usa il WebP

A parità di qualità percepita, il WebP pesa tra il 25% e il 35% in meno del JPG. Lo capiscono tutti i browser in uso oggi. Convertire le immagini di un sito in WebP è, di gran lunga, il miglioramento con il miglior rapporto sforzo/risultato: non cambi il design, non tocchi il codice e la pagina perde un terzo del peso.

Se il tuo sistema di pubblicazione non converte da solo, puoi convertire in blocco in WebP prima di caricare.

3. Caricamento differito per ciò che non si vede

Le immagini che stanno sotto la prima schermata non hanno bisogno di essere scaricate finché il visitatore non ci arriva. Basta aggiungere un attributo al tag:

<img src="foto.webp" alt="…" loading="lazy" decoding="async">

Con un'eccezione importante: l'immagine principale della prima schermata NON deve avere loading="lazy". È proprio quella che vuoi arrivi il prima possibile, perché di solito è quella che Google misura come Largest Contentful Paint. A quella dai fetchpriority="high".

4. Riserva lo spazio perché la pagina non salti

Se un'immagine non dichiara le sue dimensioni, il browser non sa quanto spazio lasciarle e il contenuto salta quando finisce di caricare. Quel salto viene misurato (Cumulative Layout Shift) e penalizza. La soluzione è una riga: metti sempre width e height nel tag, con i valori reali del file. Il CSS può continuare a scalare l'immagine; quello che conta è che il browser conosca la proporzione fin dal primo momento.

Le tre metriche che Google guarda

Un flusso di lavoro ripetibile

1. Raccogli in una cartella tutte le immagini che caricherai.
2. Ridimensionale in blocco alla larghezza della tabella qui sopra.
3. Convertile in WebP con qualità 78–82.
4. Rinominale con parole descrittive e trattini: scarpa-running-blu.webp, non IMG_4821.webp. Il nome del file è un segnale reale per la ricerca di immagini.
5. Caricale e scrivi un alt che descriva l'immagine per chi non può vederla. Non è un riempimento di parole chiave: è accessibilità, e come effetto collaterale posiziona.

I passaggi 2 e 3 si fanno in una sola volta nel compressore: scegli la dimensione massima, WebP come formato di uscita e un livello di qualità, lasci cadere le trenta immagini e scarichi lo ZIP.

Quanto ci si può aspettare

Su siti reali, applicare questi quattro punti lascia la pagina tra il 40% e il 70% più leggera. Una home che pesava 4 MB scende a 1,2 MB, e il tempo prima che si veda qualcosa si dimezza sulle connessioni mobili. Non serve ridisegnare nulla: è puro lavoro di preparazione dei file.