Come far caricare più in fretta le immagini di un sito
I cinque interventi che alleggeriscono le immagini di qualunque sito, in ordine di impatto.
Nella maggior parte dei siti le immagini rappresentano gran parte di ciò che un visitatore scarica. Una sola foto da telefono non ottimizzata può pesare più di tutto il resto della pagina. Sistemare le immagini è di solito il miglioramento di velocità più grande e meno costoso, e una pagina veloce si posiziona meglio, trattiene di più e converte di più.
1. Carica le immagini alla dimensione con cui si vedono
Una foto uscita da un telefono è larga 4000 pixel o più. Una colonna di contenuto supera raramente i 1200 pixel, e una scheda o una miniatura molto meno. Ogni pixel in eccesso viene scaricato e poi buttato via dal browser. Ridimensiona prima di caricare: circa 2000 pixel per i banner a tutta larghezza, per restare nitidi sugli schermi ad alta densità, 1200 o 1600 per le immagini nel contenuto e 600 o 800 per le schede. Lo strumento di ridimensionamento lavora su un’intera cartella in un colpo solo.
2. Comprimi
Con le dimensioni giuste, la compressione fa il resto. Una foto salvata a qualità 80 è identica a una a qualità 100 in una pagina web e spesso pesa un terzo. Il compressore di immagini lavora in blocco e mostra il risparmio per ogni file.
3. Usa il WebP
Il WebP è supportato da tutti i browser attuali e pesa in genere dal 25 al 35 per cento in meno di un JPG a pari qualità visiva, con in più la trasparenza, il che lo rende un sostituto anche di molti PNG. Converti con JPG in WebP o PNG in WebP. L’AVIF è ancora più leggero, ma è più lento da codificare e meno accettato dai sistemi di caricamento, quindi la scelta pratica resta il WebP.
4. Scegli il formato in base al contenuto
| Contenuto | Formato migliore |
|---|---|
| Fotografie | WebP, oppure JPG dove il WebP non è accettato |
| Loghi e icone | SVG se ce l’hai, altrimenti PNG o WebP |
| Screenshot con testo | PNG o WebP senza perdita |
| Animazioni semplici | Un video breve invece di una GIF |
5. Aiuta il browser a caricarle con intelligenza
- Caricamento differito. Le immagini sotto la prima schermata dovrebbero caricarsi solo quando il visitatore ci si avvicina scorrendo. La maggior parte delle piattaforme lo fa da sola; in HTML puro aggiungi loading="lazy" ai tag img non visibili all’inizio.
- Dimensioni. Dai a ogni immagine larghezza e altezza perché la pagina non salti mentre le immagini arrivano. Lo spostamento del layout fa parte dei Core Web Vitals di Google.
- Prima l’immagine principale. La grande immagine in alto, quella che di solito conta come Largest Contentful Paint, non deve mai essere in caricamento differito. Deve caricarsi il prima possibile.
Che differenza fa
Una pagina tipo con dieci foto uscite dal telefono può pesare 30 MB. Ridimensionata a larghezze sensate e compressa, la stessa pagina scende di solito intorno ai 2 MB. Convertita in WebP, circa 1,4 MB. Su rete mobile è la differenza tra una pagina che compare in un secondo e una che molti visitatori abbandonano.
Verificare i risultati
PageSpeed Insights di Google e il pannello Lighthouse negli strumenti per sviluppatori di Chrome elencano le immagini troppo grandi, quelle che dovrebbero essere in WebP e l’elemento del Largest Contentful Paint. Misura prima e dopo, e parti dalle pagine che ricevono più traffico.