Come alleggerire le immagini del tuo sito senza perdere qualità
Aggiornato:
Le immagini sono di solito la parte più pesante di una pagina web, e le pagine pesanti si caricano lentamente sul telefono e perdono visitatori. Due modifiche risolvono quasi tutto: le dimensioni giuste e il formato giusto. Abbiamo misurato ogni passaggio su 17 foto per mostrare quanto fa risparmiare davvero ciascuno e in che ordine farli.
Prima di tutto, ridimensiona
Una foto appena scattata col telefono è larga circa 4.000 pixel, mentre la colonna di un blog la mostra a circa 800, cioè 1.600 pixel reali su uno schermo ad alta densità di telefono o portatile. Servirla a piena dimensione spreca gran parte del download, e nessun formato può compensarlo.
Gli strumenti di compressione per JPG, PNG e WebP possono limitare la dimensione per te: il livello Bilanciata porta il lato più lungo a un massimo di 2.560 pixel, il livello Forte a 1.600, e nessuno dei due ingrandisce mai un'immagine più piccola. Forte va bene per quasi tutte le immagini dentro un articolo; Bilanciata per le foto che riempiono uno schermo largo.
Quanto ha fatto risparmiare ogni passaggio
Siamo partiti da 17 fotografie di circa 12 megapixel salvate come JPG di alta qualità, 1,5 MB in media, e le abbiamo passate negli strumenti di questo sito. La sola conversione in WebP le ha dimezzate. Il ridimensionamento ha fatto molto di più. Ridimensionare e poi convertire in WebP ha portato la foto media a 56 KB, il 96% in meno rispetto all'inizio.
| Versione | Lato lungo | Dimensione media | Risparmio |
|---|---|---|---|
| JPG originale (qualità 92) | fino a 4.032 px | 1,5 MB | — |
| WebP, Alta (85), dimensione piena | fino a 4.032 px | 750 KB | 50% |
| Comprimi JPG: Bilanciata | 2.560 px | 300 KB | 80% |
| Comprimi JPG: Forte | 1.600 px | 91 KB | 94% |
| Bilanciata, poi WebP | 2.560 px | 157 KB | 90% |
| Forte, poi WebP | 1.600 px | 56 KB | 96% |
L'ordine giusto
- Apri Comprimi JPG (o Comprimi PNG per gli screenshot) e scegli Forte, oppure Bilanciata per le foto a tutta larghezza. Carica fino a 20 immagini alla volta e scaricale.
- Apri JPG in WebP e carica i file compressi.
- Non toccare l'opzione di qualità e scarica le versioni WebP.
L'errore che annulla il risparmio
Quando converti in WebP un JPG già compresso senza scegliere la qualità, il WebP mantiene il livello di qualità di quel JPG, ed è questo che lo ha reso dal 38 al 47% più leggero nel nostro test. Scegliere Alta (85) a quel punto chiede più qualità di quanta ne abbia ancora il JPG compresso: i JPG del livello Forte convertiti con qualità Alta sono usciti un po' più pesanti dei JPG stessi, 100 KB in media invece di 91. Scegli Alta (85) o Massima (95) solo quando converti dalla foto originale a piena qualità.
Conserva gli originali
Tieni le foto originali come copie master. Potrai sempre generare nuove versioni per il web con un'altra dimensione o qualità, ma non recuperare il dettaglio da una copia troppo compressa. Poi controlla il risultato dove lo vedono i tuoi visitatori, sul telefono: se lì si vede bene, va bene così.
Oltre al file
Due piccole aggiunte nella pagina fanno caricare ancora meglio le immagini leggere. Indica nell'HTML larghezza e altezza di ogni immagine, così la pagina non salta durante il caricamento. E aggiungi loading="lazy" alle immagini più in basso, così il browser le scarica solo quando il visitatore si avvicina. Tutti i browser attuali supportano entrambe le cose.
Come abbiamo fatto la prova
Le 17 foto sono le fotografie Unsplash incluse in Edubuntu, ridotte a 4.032 pixel sul lato lungo quando erano più grandi e salvate in JPG con qualità 92. Ogni passaggio ha usato gli strumenti di questo sito con le impostazioni indicate, attraverso lo stesso codice e la stessa versione di ImageMagick dei nostri server. Le foto piene di dettagli si riducono meno di quelle tranquille, quindi il tuo risparmio varierà intorno a queste medie.
Per saperne di più: web.dev — Choose the right image format