Se il tuo sito carica lentamente, le immagini sono il primo posto dove guardare. Non il codice, non il server, non i font. Le immagini.
Una foto scattata con uno smartphone moderno pesa mediamente 4-8 MB. Caricata così com’è su un sito web, costringe i tuoi visitatori ad aspettare secondi preziosi. E ogni secondo in più di attesa costa visitatori, e visitatori costano clienti.
La buona notizia è che risolvere il problema richiede meno di un’ora e gli strumenti migliori sono gratuiti.
Perché le immagini pesano così tanto
Le immagini escono dalle fotocamere in formato JPEG o PNG, salvate alla massima qualità possibile. Ha senso per la fotografia, non ha senso per il web.
Sul web nessuno ha bisogno di stampare le tue foto in formato A0. Lo schermo di uno smartphone ha una risoluzione massima di circa 1080px di larghezza. Servire un’immagine da 4000px di larghezza a uno smartphone è come spedire un camion per consegnare una busta.
I tre problemi principali sono:
- Dimensioni eccessive — immagini più larghe di quanto il contenitore possa mostrare
- Formato sbagliato — JPEG e PNG dove basterebbe WebP
- Qualità inutilmente alta — 100% di qualità dove il 75% è indistinguibile ad occhio nudo
Il formato che cambia tutto: WebP
WebP è un formato moderno sviluppato da Google specificamente per il web. A parità di qualità visiva, pesa il 25-35% in meno rispetto a JPEG e il 26% in meno rispetto a PNG.
È supportato da tutti i browser moderni. Non c’è nessun motivo valido per non usarlo nel 2025.
Per convertire le tue immagini in WebP hai tre strade:
Squoosh — lo strumento più semplice. Vai su squoosh.app, trascina la tua immagine, scegli WebP come formato di output e scarica. Gratuito, funziona nel browser, nessuna installazione.
ImageOptim — per Mac, ottimo per processare più immagini in batch. Trascina una cartella intera e ottimizza tutto in automatico.
Sharp — per chi usa Node.js nel proprio progetto. Una libreria che permette di automatizzare la conversione e il ridimensionamento in fase di build.
Le dimensioni giuste per ogni contesto
Regola base: l’immagine non deve mai essere più larga del contenitore in cui viene mostrata.
Per un blog come questo, una buona struttura è:
- Cover articolo — 1200px di larghezza, qualità 80%
- Immagini nel testo — 800px di larghezza, qualità 75%
- Thumbnail in griglia — 600px di larghezza, qualità 70%
Applicando queste dimensioni, un’immagine che pesava 5 MB può scendere a 80-150 KB senza che nessuno noti la differenza.
L’attributo loading=“lazy”
Oltre alla compressione, c’è un’altra ottimizzazione fondamentale che non richiede nessun tool esterno: il caricamento lazy.
Per default, il browser carica tutte le immagini della pagina appena la apri, anche quelle che si trovano in fondo e che l’utente potrebbe non vedere mai. Con un solo attributo HTML puoi dire al browser di caricarle solo quando stanno per entrare nel viewport:
<img src="foto.webp" alt="Descrizione" loading="lazy" width="1200" height="800">Nota: specifica sempre width e height. Senza di essi il browser non sa quanto spazio riservare per l’immagine durante il caricamento, causando il fastidioso effetto di spostamento dei contenuti che Google penalizza con il Core Web Vital CLS.
Il workflow completo in 4 passaggi
Applicato sistematicamente, questo è il processo che uso su ogni progetto:
- Ridimensiona — porta l’immagine alla larghezza massima necessaria prima di qualsiasi altra operazione
- Converti in WebP — usa Squoosh o ImageOptim
- Comprimi — punta a un peso finale sotto i 150 KB per le immagini grandi, sotto i 50 KB per le thumbnail
- Aggiungi lazy loading — su tutte le immagini tranne quella above the fold (la prima visibile senza scroll)
Per la prima immagine above the fold, al contrario, aggiungi loading="eager" e considera di aggiungere anche fetchpriority="high" per dire al browser di caricarla con priorità massima.
Quanto puoi guadagnare in velocità
Per darti un’idea concreta: su un sito recente su cui ho lavorato, le immagini non ottimizzate pesavano complessivamente 12 MB. Dopo l’ottimizzazione, lo stesso set di immagini pesava 890 KB.
Il tempo di caricamento su connessione mobile è passato da 8,2 secondi a 1,4 secondi.
Google PageSpeed è passato da 34 a 91.
Stessa identica pagina. Stesse identiche immagini. Solo ottimizzate correttamente.
Questo è il tipo di lavoro che non si vede, ma che fa tutta la differenza.
← Torna agli Insights