Compressione delle immagini
La compressione delle immagini riduce le dimensioni del file senza influire in modo percepibile sulla qualità visiva. Poiché le immagini rappresentano spesso la parte più consistente del peso di una pagina, una compressione efficace è uno dei modi più rapidi per migliorare la velocità del sito.
L'importanza della compressione delle immagini
Le immagini di grandi dimensioni rallentano:
- Il tempo di caricamento della pagina
- Le prestazioni su dispositivi mobili
- Il Largest Contentful Paint (LCP)
Osservazione del settore: su molti siti di contenuti ed e-commerce, le immagini costituiscono il 50-70% della dimensione totale della pagina.
Esempio:
Un catalogo online ha compresso le immagini dei prodotti ed è passato al formato WebP. La dimensione media della pagina è diminuita di oltre il 60% e il tempo di caricamento da mobile è migliorato da 4,1s a 2,3s.
Best practice per la compressione
- Utilizzare formati moderni (WebP o AVIF)
- Ridimensionare le immagini alle dimensioni di visualizzazione effettive
- Applicare una compressione senza perdita (lossless) o con perdita controllata (lossy)
- Evitare di servire immagini a grandezza naturale ridotte tramite CSS
La compressione dovrebbe avvenire prima del caricamento, non solo al momento della distribuzione.
Errori comuni con le immagini
- Caricare immagini grezze dalla fotocamera
- Utilizzare il formato PNG per contenuti fotografici
- Affidarsi esclusivamente al ridimensionamento automatico del CMS