Le immagini sono spesso tra le risorse più visibili di una pagina Web e tra le più costose da trasferire. Una fotografia di diversi megabyte può finire in una card larga poche centinaia di pixel. Una hero image può diventare l’elemento principale del caricamento percepito. Una galleria può moltiplicare richieste e decodifiche.
Ottimizzare non significa quindi comprimere il più possibile. Significa fornire la buona immagine, nella variante corretta, al momento giusto e con la qualità necessaria.
Non esiste un pulsante magico “ottimizza”
Un’immagine può essere troppo pesante per molte ragioni:
- dimensioni eccessive;
- formato inadatto;
- compressione insufficiente;
- assenza di varianti responsive;
- caricamento con priorità sbagliata;
- spazio non riservato nel layout.
Una vera strategia affronta l’intera catena.
Il pipeline globale
sorgente master
→ ruolo dell’immagine
→ dimensioni utili
→ formato adatto
→ compressione
→ varianti responsive
→ integrazione HTML
→ priorità / lazy loading
→ misura realeOgni fase condiziona le successive. Comprimere un originale da 6.000 px prima di chiedersi se ne servano solo 1.200 significa ottimizzare il problema sbagliato.
1. Capire il ruolo dell’immagine
Una fotografia editoriale, una hero, una miniatura, un avatar, un logo, uno screenshot e un’icona hanno esigenze diverse.
Una hero visibile subito può influenzare l’LCP e deve essere disponibile rapidamente. Un’immagine dopo migliaia di parole può invece essere caricata in ritardo. Un’icona vettoriale può essere più adatta in SVG che in un formato fotografico.
2. Partire da una sorgente master
Conserva una versione di alta qualità e genera le varianti da quella:
→ 480 px
→ 800 px
master originale → 1200 px
→ 1600 px
→ 2000 pxNon generare una variante grande partendo da una miniatura già ridotta: i dettagli persi non vengono recuperati.
3. Scegliere le dimensioni necessarie
Il ridimensionamento è spesso il guadagno più importante. Se l’originale è 6000 × 4000 ma l’immagine appare al massimo a 900 CSS px, servire sempre l’originale è raramente giustificato.
Considera anche la densità dello schermo, ma non usare il DPR come scusa per inviare sempre il file massimo. Prepara alcuni livelli ragionevoli e lascia al browser la scelta quando necessario.
4. Scegliere il formato dal contenuto
Per fotografie, WebP, AVIF e JPEG possono essere adatti. Per screenshot e grafica con contorni netti, WebP lossless o PNG possono funzionare meglio. Per loghi e forme geometriche, SVG è spesso naturale.
Il formato non deve essere scelto perché “moderno”, ma perché produce un buon compromesso tra qualità, peso, compatibilità e costo di produzione.
5. Comprimere dopo il ridimensionamento
Una volta stabilite le dimensioni, regola la compressione. Con formati lossy, confronta visivamente dettagli difficili come capelli, fogliame, testo e gradienti.
I valori di qualità non sono confrontabili direttamente tra codec o encoder. “80” in due strumenti non significa la stessa qualità visiva.
6. Preparare immagini responsive
srcset e sizes permettono al browser di scegliere tra più larghezze. Il CSS decide come l’immagine appare; le risorse responsive decidono quale file viene trasferito.
Una configurazione corretta evita sia di inviare 2.000 px a un telefono che di mostrare una miniatura sfocata su uno schermo ad alta densità.