Perché l'ottimizzazione delle immagini è importante
Immagini grandi o caricate tardi possono ritardare il contenuto principale e peggiorare LCP. Parti dai file realmente richiesti e misurane il contributo. Ridurre i trasferimenti può migliorare il caricamento, ma non garantisce posizionamenti o aumenti precisi delle conversioni.
Scelta del formato dell'immagine
Confronta JPEG, PNG, WebP e AVIF su immagini rappresentative a qualità accettabile. Il file più piccolo dipende da immagine, codificatore e impostazioni. Verifica i browser supportati e aggiungi un formato alternativo quando serve. SVG è adatto alla grafica vettoriale appropriata.
| Formato | Vantaggi | Limiti | Usi tipici |
|---|---|---|---|
| JPEG | Spesso efficiente per le fotografie | Compressione con perdita, senza trasparenza alfa | Foto |
| PNG | Codifica senza perdita e trasparenza | Le foto possono essere pesanti | Grafica con dettagli senza perdita |
| WebP | Con o senza perdita, trasparenza | Verificare browser meno recenti e dimensione finale | Foto, grafica, animazione |
| AVIF | Può comprimere bene a qualità utile | Verificare costo di codifica e compatibilità | Foto e grafica |
| SVG | Grafica vettoriale scalabile | Non sostituisce le fotografie raster | Icone, loghi, illustrazioni |
Immagini responsive: srcset e sizes
Elenca le varianti in srcset e descrivi la larghezza nel layout con sizes. Il browser sceglie in base a questi dati e alle condizioni del dispositivo. Le larghezze seguenti sono esempi da adattare al CSS reale. L’esempio è per un’immagine fuori dalla vista iniziale: sostituisci il testo alternativo illustrativo e usa le proporzioni reali.
<img
src="example-400w.jpg"
srcset="example-400w.jpg 400w, example-800w.jpg 800w, example-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Lago di montagna"
width="1200"
height="800"
loading="lazy"
/>
Caricamento differito delle immagini fuori schermo
loading="lazy" consente al browser di rimandare un’immagine finché si avvicina all’area visibile. Il download può iniziare prima che appaia; il momento dipende dal browser e dalle condizioni.
- Rimandare immagini non critiche può ridurre i trasferimenti iniziali e le richieste concorrenti.
- Non rimandare l’immagine principale visibile all’apertura, soprattutto il probabile elemento LCP: potrebbe peggiorare LCP.
- Riserva spazio con dimensioni o proporzioni corrette per ridurre gli spostamenti del layout.
Esempio di immagine sotto la vista iniziale. Le dimensioni sono illustrative: usa quelle del file effettivo.
<img src="example.webp" alt="Lago di montagna" width="1200" height="800" loading="lazy" />
Strumenti e servizi per l'ottimizzazione
| Strumento | Descrizione | Collegamento |
|---|---|---|
| TinyPNG | Servizio online per la compressione di PNG e JPEG | TinyPNG |
| ImageOptim | Ottimizzazione delle immagini su macOS | ImageOptim |
| Squoosh | Uno strumento potente di Google | Squoosh |
Consigli pratici ed esempi
- Confronta i formati a qualità accettabile e aggiungi un’alternativa se necessaria.
- Allinea
srcsetesizesal layout effettivo e ai dispositivi. - Usa
loading="lazy"per le immagini fuori schermo, senza ritardare il probabile elemento LCP. Il caricamento differito nativo di solito non richiede Intersection Observer; la logica personalizzata deve risolvere un’esigenza precisa. - Automatizza dimensioni e compressione nella compilazione o distribuzione e controlla il risultato.
- Confronta PageSpeed Insights e i Web Vitals pertinenti, inclusi LCP e CLS, prima e dopo in condizioni confrontabili.
Verifica il risultato pubblicato
Controlla il file selezionato, i byte trasferiti, la qualità e la priorità di caricamento. Ripeti su layout mobili e desktop rappresentativi. Verifica che l’immagine principale compaia presto e che il layout rimanga stabile.
Riduci i byte superflui preservando contenuto e qualità utili al lettore.
Usa il nostro test di velocità per indagare la pagina, poi verifica le modifiche alle immagini nel browser. Distingui i miglioramenti misurati dalle ipotesi non verificate.
