1. Servi le dimensioni giuste
Non caricare un'immagine molto più grande dello spazio che riempie. Una foto scattata col telefono può essere larga 4000 pixel, ma se il tuo layout la mostra in una colonna di 800 pixel, il browser scarica comunque ogni pixel in più e poi ne scarta la maggior parte.
Prima ridimensiona, poi comprimi. Per un layout che mostra un'immagine larga 800 pixel, è spesso sensato esportarla a circa 1600 pixel di larghezza così resta nitida sugli schermi ad alta densità, ma raramente di più.
2. Scegli un formato efficiente
Usa WebP o JPG per le foto, e PNG o WebP per le grafiche con trasparenza. Usa SVG per loghi e icone semplici, perché si scala a qualsiasi dimensione partendo da un file piccolo.
I file WebP sono spesso sensibilmente più piccoli di JPG o PNG a qualità visiva simile, e i browser attuali in genere lo supportano. Il PNG è meglio riservarlo a grafiche nitide, screenshot e immagini che richiedono colori esatti.
3. Comprimi
Usa una qualità di circa 75-85 percento per le foto. Confronta il risultato con l'originale a dimensione piena per verificare che appaia ancora buono, prestando attenzione a sfumature morbide, cieli e toni della pelle, dove gli artefatti compaiono per primi.
Una qualità più bassa fa risparmiare più spazio, ma c'è un punto oltre il quale compare l'effetto a blocchi. Fermati subito prima che si veda. Se hai dubbi, scegli la qualità più alta per l'immagine principale e una più bassa per le piccole miniature, dove i difetti si notano meno.
4. Carica solo ciò che serve e riserva lo spazio
Aggiungi l'attributo loading="lazy" alle immagini sotto la parte visibile della pagina, in modo che si carichino quando il visitatore scorre vicino a esse. Non applicare il caricamento differito all'immagine principale in cima alla pagina, perché ritarderebbe il contenuto più visibile.
Dai a ogni immagine gli attributi width e height in modo che il browser possa riservare lo spazio prima che il file arrivi. Questo evita che la pagina salti mentre le immagini si caricano, cosa fastidiosa quando qualcuno sta cercando di leggere o di toccare un pulsante. Gli stessi attributi aiutano anche il browser a calcolare le proporzioni corrette quando il CSS rende l'immagine fluida.
Un esempio pratico (illustrativo)
Immagina un articolo di blog con una foto principale appena uscita dalla fotocamera: 4000 per 3000 pixel, un JPG di diversi megabyte. La pagina la mostra larga 900 pixel.
Ridimensionarla a 1800 pixel di larghezza ridurrebbe di solito il file a una piccola frazione delle sue dimensioni. Comprimere a circa 80 percento e convertire in WebP spesso lo riduce ancora di più. Il risultato potrebbe essere di poche centinaia di kilobyte invece di diversi megabyte, senza alcuna differenza visibile alla dimensione in cui viene mostrata. I numeri esatti variano da foto a foto, quindi controlla sempre il tuo file.
Procedura passo dopo passo
- Trova la dimensione massima con cui l'immagine viene mostrata nella pagina.
- Ridimensiona l'originale a circa il doppio di quella larghezza, oppure alla larghezza visualizzata solo per gli schermi piccoli.
- Converti in WebP o JPG e comprimi a circa 75-85 percento.
- Confronta con l'originale e abbassa la qualità solo finché appare uguale.
- Aggiungi width, height e, sotto la parte visibile, loading="lazy" nella tua pagina.
- Ricarica la pagina e controlla che nulla appaia sfocato o si sposti.
Prova le tue pagine con uno strumento come PageSpeed Insights prima e dopo, e guarda per prima l'immagine più grande della pagina. Piccole modifiche a quella singola immagine spesso fanno la differenza maggiore.
Errori comuni
- Comprimere più e più volte un JPG già molto compresso, aggiungendo ogni volta un danno visibile. Parti sempre dall'originale.
- Applicare il caricamento differito a tutte le immagini, compresa quella in cima.
- Usare il PNG per le foto, che di solito crea file molto grandi.
- Ridurre le immagini solo con il CSS, così il browser scarica comunque il file intero.
- Omettere width e height, il che provoca salti nel layout.
Lista di controllo rapida
- Dimensioni giuste per il layout
- WebP o JPG per le foto, SVG per i loghi semplici
- Qualità intorno a 75-85 percento, verificata a occhio
- Caricamento differito solo sotto la parte visibile
- Width e height impostati su ogni immagine
- Pagine provate prima e dopo
Farlo con DoneImg nel tuo browser
Apri lo strumento Ridimensiona, imposta la larghezza che ti serve e scarica il risultato. Poi apri Comprimi, scegli WebP o JPG e regola il cursore della qualità tenendo d'occhio le dimensioni del file. Se ti serve un formato diverso, gli strumenti di conversione gestiscono JPG, PNG e WebP.
Tutto funziona nel tuo browser, quindi le immagini vengono elaborate sul tuo dispositivo e nulla viene caricato su un server. Questo lo rende un modo sicuro per preparare foto di prodotti non ancora pubblicate o immagini di clienti. Puoi ripetere gli stessi passaggi per ogni immagine di una pagina e conservare gli originali in una cartella separata nel caso ti serva esportarli di nuovo a una dimensione diversa in seguito.