# Ottimizzare le immagini per il web senza perdere qualità
[Canonical HTML page](https://gradiently.design/it/guide/lighthouse-image-performance)
Le immagini sono di solito la parte più pesante di una pagina e il motivo per cui Lighthouse si lamenta. Ecco un metodo che funziona: dimensioni in pixel giuste, formato giusto, markup responsive e indicazioni di caricamento, senza perdite visibili.
## The short version
- Per ottimizzare le immagini per il web, esporta ogni immagine alla dimensione in cui viene mostrata, circa raddoppiata per gli schermi ad alta densità, invece di caricare l’originale.
- AVIF e WebP producono file molto più leggeri di JPEG e PNG a parità di qualità visiva, e ogni browser attuale supporta WebP.
- Gli attributi srcset e sizes permettono al browser di scaricare l’immagine più piccola che resti comunque nitida su ogni schermo.
- Carica in lazy loading le immagini sotto la piega con loading="lazy", ma carica subito l’immagine hero con fetchpriority="high", perché di solito decide il Largest Contentful Paint.
- Imposta sempre width e height sulle immagini, così il browser riserva lo spazio e il layout non salta durante il caricamento.
Per **ottimizzare le immagini per il web** senza perdite visibili bastano cinque mosse: esporta ogni immagine alla dimensione in pixel in cui viene mostrata (circa il doppio per gli schermi nitidi), scegli un formato moderno come AVIF o WebP, comprimi a una qualità moderata e confronta a occhio, servi più dimensioni con `srcset` e carica in lazy loading tutto ciò che sta sotto la piega. Questi passaggi risolvono la maggior parte degli avvisi sulle immagini di Lighthouse e di solito alleggeriscono la pagina in modo drastico, perché la foto originale uscita da una fotocamera o da un programma di grafica è molte volte più grande di quanto serva allo schermo.
## Passo 1: esporta alla dimensione che mostri
Un’immagine mostrata a 800 pixel di larghezza non ha bisogno di essere larga 4.000 pixel. Lighthouse segnala le immagini sovradimensionate perché i pixel in più vengono scaricati, decodificati e poi scartati. Misura quanto è larga l’immagine nel tuo layout al massimo, poi esporta a circa il doppio di quella larghezza per telefoni e portatili ad alta densità. Oltre il doppio raramente si vede più nitido e costa sempre byte.
| Immagine | Mostrata a | Larghezza di esportazione |
| --- | --- | --- |
| Hero a tutta larghezza | Fino a 1920 px | 1920 px, più versioni più piccole |
| Immagine di un articolo | Circa 720 px | 1440 px |
| Miniatura di una card | Circa 360 px | 720 px |
| Avatar | 48 px | 96 px |
| Immagine Open Graph | Fuori dal sito | 1200×630 esatti |
Obiettivi tipici. L’hero a tutta larghezza è l’eccezione al raddoppio: 1920 px coprono la maggior parte degli schermi e i display molto grandi ricevono un’immagine un po’ morbida a un costo ragionevole.
- Hero del sito 1920×1080: 1920 × 1080
- Banner del blog 1200×600: 1200 × 600
- Anteprima link 1200×630: 1200 × 630
Tre dimensioni comuni di immagini web disegnate in scala. Progetta alla dimensione finale, così nulla viene ritagliato o ridimensionato dopo l’esportazione.
## Passo 2: scegli il formato giusto
Il formato conta più di qualsiasi cursore di compressione. AVIF di solito dà il file più piccolo, WebP si avvicina ed è supportato ovunque nei browser attuali, mentre JPEG e PNG restano i ripieghi sicuri. [WebP contro PNG](https://gradiently.design/it/guide/webp-images) e [PNG contro JPG](https://gradiently.design/it/guide/png-vs-jpeg) approfondiscono ciascuna coppia.
| Formato | Ideale per | Note |
| --- | --- | --- |
| AVIF | Foto, sfumature, hero grandi | File più piccoli; codifica più lenta |
| WebP | Quasi tutto | Con e senza perdita, trasparenza, ampio supporto |
| JPEG | Foto, come ripiego | Niente trasparenza; bande sulle sfumature morbide |
| PNG | Screenshot, grafiche piatte, trasparenza | Senza perdita e pesante per le foto |
| SVG | Loghi, icone, illustrazioni | Vettoriale, minuscolo se semplice; vedi [SVG contro PNG](https://gradiently.design/it/guide/svg-vs-png) |
Scegli in base al contenuto, non all’abitudine. Le sfumature morbide sono il caso più difficile per JPEG, ed è qui che WebP e AVIF aiutano di più.
> **Le sfumature si comprimono male** Le transizioni di colore morbide mostrano la compressione come gradini visibili. Aggiungi un po’ di grana prima di esportare, come descritto in [banding nelle sfumature](https://gradiently.design/it/guide/gradient-banding), e il codificatore potrà lavorare di più senza che nessuno se ne accorga. Meglio ancora, disegna le sfumature del web in CSS.
Una sfumatura hero in circa 70 byte: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 50%, #0ea5e9 100%)`
Questa sfumatura, scritta in CSS, costa meno di una singola riga della pagina. Esportata come immagine 1920×1080, la stessa cosa peserebbe molti kilobyte. Vedi [prestazioni dei gradienti CSS](https://gradiently.design/it/guide/css-gradient-performance).
## Passo 3: comprimi, poi guarda
I formati con perdita hanno un’impostazione di qualità, e il valore giusto dipende dall’immagine. Parti da circa 75-80 per WebP e da circa 50-60 per AVIF, esporta e confronta con l’originale al 100% di zoom. Abbassa finché non vedi una differenza, poi risali di un passo. Volti, testo fine e sfumature richiedono più qualità dei paesaggi ricchi di dettagli. [Compressione delle immagini](https://gradiently.design/it/guide/image-compression) spiega cosa scarta il codificatore.
Già che ci sei, elimina i metadati come i dati della fotocamera e le miniature incorporate. La maggior parte degli strumenti di esportazione lo fa con una sola casella, e toglie byte che nessuno vede.
## Passo 4: markup responsive con srcset e sizes
Con più larghezze esportate, lascia scegliere al browser. `srcset` elenca i file e le loro larghezze; `sizes` dice al browser quanto sarà larga l’immagine. Il browser scarica poi il file più piccolo che sia abbastanza nitido per quello schermo.
```html
```
Il browser usa la prima sorgente che supporta. L’elemento img è sia il ripiego sia il posto per alt, width, height e indicazioni di caricamento.
Per un’immagine dentro una colonna, descrivi il layout in `sizes`, per esempio `sizes="(min-width: 1024px) 720px, 100vw"`. Sbagliare `sizes` è il motivo più comune per cui una configurazione responsive scarica comunque il file grande.
## Passo 5: le indicazioni di caricamento che contano
```html
```
Width e height permettono al browser di riservare lo spazio dal rapporto d’aspetto, così nulla si sposta all’arrivo delle immagini. Il CSS può comunque rendere l’immagine fluida con max-width: 100% e height: auto.
### Errori comuni
- `loading="lazy"` sull’immagine hero
- Niente width e height, quindi la pagina salta
- Un unico file enorme per ogni schermo
- Un JPEG di un logo piatto o di uno screenshot
- Sfondi sfumati salvati come immagini
### Meglio così
- L’hero si carica subito con `fetchpriority="high"`
- Imposta entrambi gli attributi su ogni img
- `srcset` con tre o quattro larghezze
- SVG o PNG per le grafiche piatte
- Sfumature CSS, con grana se serve
Queste indicazioni corrispondono direttamente ai Core Web Vitals. L’immagine hero è spesso l’elemento del Largest Contentful Paint, che secondo [web.dev](https://web.dev/articles/lcp) dovrebbe comparire entro 2,5 secondi, e le dimensioni mancanti sono una causa classica di spostamento del layout. Se il tuo hero è un video e non un’immagine, vale lo stesso ragionamento in [video di sfondo per i siti web](https://gradiently.design/it/guide/video-background-website).
## Una checklist prima di pubblicare
1. **Misura lo spazio** Trova la larghezza massima a cui ogni immagine viene mostrata nel tuo layout.
2. **Esporta alle dimensioni giuste** Da una a due volte la larghezza dello spazio, più versioni più piccole per i telefoni.
3. **Scegli il formato** AVIF o WebP per foto e sfumature, SVG per i loghi, PNG solo quando conviene.
4. **Comprimi a occhio** Abbassa la qualità finché vedi un cambiamento, poi rialzala di un passo.
5. **Scrivi il markup** `srcset`, `sizes`, `width`, `height`, `alt` e lazy loading sotto la piega.
6. **Provalo** Esegui Lighthouse in una finestra in incognito e controlla i controlli sulle immagini e l’elemento LCP.
Molto di tutto questo è più facile quando l’immagine nasce già alla sua dimensione finale. In Gradiently progetti una volta sola e Pro ridimensiona a ogni formato in un passaggio, poi esporta PNG, JPG o SVG alle dimensioni esatte fino a 4K, così hero, banner e [immagine Open Graph](https://gradiently.design/it/guide/open-graph-tags) partono ciascuno dalla dimensione che la pagina mostrerà.
## FAQ
### Come ottimizzo le immagini per il web senza perdere qualità?
Esporta alla dimensione mostrata, usa AVIF o WebP, abbassa la qualità solo finché non vedi una differenza e servi più dimensioni con srcset. La maggior parte della perdita visiva viene da una compressione pesante, non dal ridimensionamento.
### Qual è il miglior formato immagine per i siti web?
WebP è la scelta moderna più sicura e AVIF di solito è ancora più leggero. Usa SVG per loghi e icone e tieni JPEG o PNG come ripiego.
### Devo caricare tutte le immagini in lazy loading?
No. Usa il lazy loading per le immagini sotto la piega, ma carica subito l’immagine hero, perché ritardarla rallenta il Largest Contentful Paint.
### Che dimensione devono avere le immagini di un sito?
Circa il doppio della larghezza a cui vengono mostrate, per schermi ad alta densità nitidi. Un hero a tutta larghezza di 1920 px copre la maggior parte dei display.
### Perché Lighthouse dice che le mie immagini non hanno la dimensione giusta?
Il file ha più pixel dello spazio che occupa nella pagina. Esporta una versione più piccola e usa srcset e sizes perché il browser scelga quella giusta.
```
Width e height permettono al browser di riservare lo spazio dal rapporto d’aspetto, così nulla si sposta all’arrivo delle immagini. Il CSS può comunque rendere l’immagine fluida con max-width: 100% e height: auto.
### Errori comuni
- `loading="lazy"` sull’immagine hero
- Niente width e height, quindi la pagina salta
- Un unico file enorme per ogni schermo
- Un JPEG di un logo piatto o di uno screenshot
- Sfondi sfumati salvati come immagini
### Meglio così
- L’hero si carica subito con `fetchpriority="high"`
- Imposta entrambi gli attributi su ogni img
- `srcset` con tre o quattro larghezze
- SVG o PNG per le grafiche piatte
- Sfumature CSS, con grana se serve
Queste indicazioni corrispondono direttamente ai Core Web Vitals. L’immagine hero è spesso l’elemento del Largest Contentful Paint, che secondo [web.dev](https://web.dev/articles/lcp) dovrebbe comparire entro 2,5 secondi, e le dimensioni mancanti sono una causa classica di spostamento del layout. Se il tuo hero è un video e non un’immagine, vale lo stesso ragionamento in [video di sfondo per i siti web](https://gradiently.design/it/guide/video-background-website).
## Una checklist prima di pubblicare
1. **Misura lo spazio** Trova la larghezza massima a cui ogni immagine viene mostrata nel tuo layout.
2. **Esporta alle dimensioni giuste** Da una a due volte la larghezza dello spazio, più versioni più piccole per i telefoni.
3. **Scegli il formato** AVIF o WebP per foto e sfumature, SVG per i loghi, PNG solo quando conviene.
4. **Comprimi a occhio** Abbassa la qualità finché vedi un cambiamento, poi rialzala di un passo.
5. **Scrivi il markup** `srcset`, `sizes`, `width`, `height`, `alt` e lazy loading sotto la piega.
6. **Provalo** Esegui Lighthouse in una finestra in incognito e controlla i controlli sulle immagini e l’elemento LCP.
Molto di tutto questo è più facile quando l’immagine nasce già alla sua dimensione finale. In Gradiently progetti una volta sola e Pro ridimensiona a ogni formato in un passaggio, poi esporta PNG, JPG o SVG alle dimensioni esatte fino a 4K, così hero, banner e [immagine Open Graph](https://gradiently.design/it/guide/open-graph-tags) partono ciascuno dalla dimensione che la pagina mostrerà.
## FAQ
### Come ottimizzo le immagini per il web senza perdere qualità?
Esporta alla dimensione mostrata, usa AVIF o WebP, abbassa la qualità solo finché non vedi una differenza e servi più dimensioni con srcset. La maggior parte della perdita visiva viene da una compressione pesante, non dal ridimensionamento.
### Qual è il miglior formato immagine per i siti web?
WebP è la scelta moderna più sicura e AVIF di solito è ancora più leggero. Usa SVG per loghi e icone e tieni JPEG o PNG come ripiego.
### Devo caricare tutte le immagini in lazy loading?
No. Usa il lazy loading per le immagini sotto la piega, ma carica subito l’immagine hero, perché ritardarla rallenta il Largest Contentful Paint.
### Che dimensione devono avere le immagini di un sito?
Circa il doppio della larghezza a cui vengono mostrate, per schermi ad alta densità nitidi. Un hero a tutta larghezza di 1920 px copre la maggior parte dei display.
### Perché Lighthouse dice che le mie immagini non hanno la dimensione giusta?
Il file ha più pixel dello spazio che occupa nella pagina. Esporta una versione più piccola e usa srcset e sizes perché il browser scelga quella giusta.