Come preparare le immagini per un sito web veloce

Quando un sito si carica lentamente, la reazione più comune è sospettare dell'hosting, del codice o di qualche plugin pesante — e a volte il problema è davvero lì. Ma nella stragrande maggioranza dei casi reali, il principale responsabile sono le immagini: poche foto non ottimizzate possono pesare più di tutto il resto della pagina messo insieme. Prima di cambiare server o toccare il codice, vale la pena rivedere questa checklist.

Perché le immagini sono quasi sempre il collo di bottiglia

L'HTML, il CSS e il JavaScript di una pagina normale pesano, nel complesso, poche centinaia di kilobyte nella maggior parte dei siti. Le immagini, invece, superano facilmente diversi megabyte se non sono state ottimizzate — una singola foto hero non compressa può pesare più di tutto il resto della pagina. Per questo ottimizzare le immagini offre di solito il miglioramento di velocità più grande a fronte dello sforzo più piccolo, rispetto a ottimizzazioni del codice che richiedono molto più lavoro per un risparmio minore.

La checklist, in ordine di impatto

1) Formato corretto. WebP o AVIF al posto di JPG o PNG di default — a qualità visiva equivalente, di solito pesano parecchio meno. Lo trattiamo nel dettaglio nellaguida ai formati.

2) Dimensione in pixel adeguata allo spazio reale. Se l'immagine viene mostrata a 800 pixel di larghezza, non ha senso servire un file da 4000 pixel — il browser deve scaricare ed elaborare tutto quell'eccesso di dati solo per ridimensionarlo visivamente in seguito.

3) Compressione al punto giusto. Né non compressa (peso inutile) né eccessivamente compressa (artefatti visibili) — l'intervallo di qualità che offre il miglior equilibrio, di cui parliamo nell'articolo su come ridurre il peso di un JPG senza perdere qualità.

4) Caricamento differito (lazy loading). L'attributo nativo loading="lazy"dell'HTML stesso evita che il browser carichi immagini che l'utente non arriva mai a vedere — senza bisogno di alcuna libreria esterna, basta aggiungere quell'attributo alle immagini che si trovano fuori dalla schermata iniziale.

5) Dimensioni dichiarate nell'HTML. Indicare width e heightnel tag dell'immagine permette al browser di riservare lo spazio esatto prima che l'immagine finisca di caricarsi, evitando che il resto del contenuto "salti" — un fattore che Google misura specificamente come CLS (Cumulative Layout Shift), un'altra delle metriche dei Core Web Vitals.

Come applicare tutto questo in un colpo solo

I punti 1, 2 e 3 si risolvono in un solo passaggio conil compressore di SMALLIMG: carichi il lotto di immagini del sito, scegli il formato di output, la larghezza massima e la qualità, e scarichi tutto pronto per essere caricato. I punti 4 e 5 sono modifiche che si fanno direttamente nell'HTML o nel template del tuo sito — la maggior parte dei sistemi di gestione dei contenuti moderni (WordPress incluso, dalla versione 5.5) attiva già il caricamento differito di default, quindi a volte basta solo verificare che non sia disattivato.