# Compressione immagini senza rovinare le sfumature

[Canonical HTML page](https://gradiently.design/it/guide/image-compression)

Le foto reggono una compressione forte. Le sfumature no. Ecco perché un passaggio morbido diventa a strisce e le impostazioni esatte per mantenerlo liscio con un file leggero.

## The short version

- La compressione delle immagini riduce il peso dei file senza perdita, memorizzando gli stessi pixel in modo più efficiente, oppure con perdita, scartando dettagli.
- Le sfumature morbide soffrono di più la compressione con perdita, perché i colori vicini vengono fusi in bande e blocchi visibili.
- Le sfumature scure e delicate formano bande per prime, perché un’immagine a 8 bit ha pochissimi valori distinti tra due colori scuri vicini.
- Un leggero strato di grana o dithering nasconde il banding meglio di qualsiasi impostazione di qualità, perché spezza i gradini.
- Per grafiche con sfumature esporta in PNG o WebP senza perdita, oppure in JPG con qualità 90 o superiore e sottocampionamento del croma disattivato.

La **compressione delle immagini** riduce un file in due modi. Quella senza perdita memorizza esattamente gli stessi pixel in modo più efficiente, come zippare un documento. Quella con perdita scarta i dettagli che prevede non noterai. Le fotografie nascondono bene la perdita perché sono piene di texture. Le sfumature morbide non nascondono nulla: comprimi troppo un passaggio delicato e si spezza in strisce, macchie e blocchi. La soluzione è un mix di formato giusto, qualità giusta e un po’ di grana.

## Perché le sfumature si rompono quando le comprimi

Un’immagine standard memorizza 256 livelli per ciascun canale di rosso, verde e blu. Sembrano tanti, finché non guardi una sfumatura scura e delicata. Passando da `#14101f` a `#2a2147` su un hero largo 1920 pixel, il canale rosso sale di soli 22 livelli. Ogni livello deve estendersi per circa 87 pixel, quindi sei già a un passo dalle bande visibili prima ancora di comprimere.

Una sfumatura con pochissimi gradini: `linear-gradient(90deg, #14101f 0%, #2a2147 100%)`

Colori scuri vicini su un’area ampia: il classico rischio di banding. Su un buon schermo puoi già vedere deboli gradini verticali qui.

La compressione con perdita semplifica poi l’immagine in piccoli blocchi e fonde i colori quasi identici. In una foto i pixel vicini raramente sono uguali, quindi cambia poco. In una sfumatura quasi ogni vicino è quasi uguale, quindi intere strisce di colore collassano in una. Questo è il [banding delle sfumature](https://gradiently.design/it/guide/gradient-banding), e le sfumature scure e pastello lo mostrano di più.

### Fa bande facilmente

- Sfumature scure tra colori vicini
- Pastelli chiari su un’area ampia
- Superfici digitali perfettamente pulite
- Formati larghi come un hero 1920×1080

### Regge bene

- Sfumature luminose con colori distanti
- Sfumature con grana o texture
- Foto e illustrazioni ricche di dettagli
- Immagini piccole con tratti di colore brevi

## Le impostazioni di qualità che contano

Ogni formato ha un comando principale e alcuni nascosti. Questi punti di partenza sono prudenti per grafiche con sfumature e testo; le foto di solito possono scendere. Giudica sempre al 100% di zoom su un buon schermo, mai su una miniatura.

| Formato | Impostazione per grafiche con sfumature | Impostazione per foto | Note |
| --- | --- | --- | --- |
| PNG | Senza perdita, colore pieno | Raramente la scelta migliore | Evita di ridurre a 256 colori le sfumature |
| JPG | Qualità da 90 a 95, sottocampionamento off (4:4:4) | Qualità da 80 a 85 | Non modificare e risalvare un JPG più volte |
| WebP | Senza perdita, oppure con perdita 85-90 | Con perdita 75-80 | Il miglior default per il tuo sito |
| AVIF | Con perdita ad alta qualità, da testare con cura | Qualità media | File più piccoli, codifica più lenta |

I valori di qualità non sono confrontabili tra formati e nemmeno tra programmi, quindi considerali punti di partenza per i test.

### Sottocampionamento del croma

La maggior parte dei codificatori JPG memorizza il colore a metà risoluzione rispetto alla luminosità, scritto 4:2:0. Nelle foto l’occhio quasi non se ne accorge, ma lettere colorate e sfumature sature hanno bordi morbidi e sbavati. Molti strumenti lo nascondono tra le opzioni avanzate; disattivarlo (4:4:4) costa un po’ di peso e mantiene nitidi i bordi del colore.

### Quantizzazione del PNG

Gli ottimizzatori di PNG spesso riducono il peso limitando l’immagine a una tavolozza di 256 colori o meno. Ottimo per loghi piatti, pessimo per le sfumature, che richiedono migliaia di tonalità. Se un PNG compresso all’improvviso mostra bande, quasi sempre la causa è la quantizzazione.

## La grana: il miglior rimedio al banding

Aggiungere un sottile strato di rumore sembra controintuitivo, ma è la cura più affidabile. La grana sparge pixel un po’ più chiari e più scuri, così l’occhio fonde i gradini in una rampa liscia, e il compressore ha una texture da conservare invece di tratti piatti da fondere. Inoltre fa sembrare una sfumatura digitale una superficie vera. [Sfumature con grana](https://gradiently.design/it/guide/grainy-gradients) mostra quanta usarne.

Un hero largo e scuro per un sito con una sfumatura liscia e un titolo breve, che mostra il rischio di banding

Una sfumatura scura e pulita a 1920×1080 è l’immagine che più facilmente forma bande dopo la compressione.

Un hero largo per un sito con una sfumatura granulosa e texturizzata dietro lo stesso titolo

Con una grana fine nella superficie, lo stesso tipo di sfumatura sopravvive alla compressione e sembra un materiale.

Sul web puoi aggiungere la grana in CSS o SVG invece di inciderla in una grande immagine, così il download resta minuscolo. Vedi [texture rumore in CSS](https://gradiently.design/it/guide/css-noise-texture). I Mark di Gradiently portano la grana come parte del materiale, quindi un design fatto con uno ha già la texture che aiuta a sopravvivere alla ricompressione di una piattaforma.

## Un metodo per comprimere qualsiasi immagine

1. **Ridimensiona alla dimensione di visualizzazione** Il risparmio maggiore sono i pixel che non ti servivano. Un post Instagram da 1080×1350 va esportato a 1080×1350, non largo 4000 pixel.
2. **Scegli il formato in base al contenuto** Testo, loghi e sfumature: PNG o WebP senza perdita. Foto: JPG, WebP o AVIF. [PNG o JPG](https://gradiently.design/it/guide/png-vs-jpeg) e [WebP contro PNG e JPG](https://gradiently.design/it/guide/webp-images) approfondiscono.
3. **Parti da una qualità alta, poi abbassala** Parti da 90, scendi di cinque in cinque e confronta al 100%. Fermati al passo prima di vedere un cambiamento nella sfumatura più scura.
4. **Comprimi una sola volta, dal master** Conserva un master non compresso. Ogni nuova esportazione parte da lì, mai da un JPG precedente.
5. **Controlla il file finale dove vive** Carica un post di prova o apri la pagina su un telefono. Piattaforme e CDN possono ricomprimere ancora.

## Strumenti di compressione di cui fidarsi

L’app web Squoosh di Google ti permette di confrontare formati e impostazioni fianco a fianco con un cursore, il modo più veloce per capire cosa fa ogni comando. Per intere cartelle di immagini, i codificatori da riga di comando fanno lo stesso lavoro in blocco.

```bash
# JPG at quality 92 with full colour resolution (ImageMagick)
magick hero.png -quality 92 -sampling-factor 4:4:4 hero.jpg

# Lossless WebP for a gradient graphic
cwebp -lossless hero.png -o hero.webp

# Lossy WebP for a photo
cwebp -q 78 photo.png -o photo.webp
```

Eseguili su un master non compresso, mai su un file già passato da una compressione con perdita.

Se la tua sfumatura è lo sfondo di un sito, l’immagine più leggera è nessuna immagine: una sfumatura CSS non costa alcun download e non forma bande per la compressione, anche se può ancora mostrare gradini a 8 bit nelle sfumature scure e larghe. [Sfondi CSS](https://gradiently.design/it/guide/css-background-image) mostra come sovrapporre sfumature a una piccola texture di grana, e [ottimizzare le immagini per il web](https://gradiently.design/it/guide/lighthouse-image-performance) spiega cosa cerca Lighthouse.

## FAQ

### Come comprimo le immagini senza perdere qualità?

Ridimensiona alla dimensione con cui l’immagine viene mostrata, usa PNG o WebP senza perdita per le grafiche e JPG, WebP o AVIF con perdita ad alta qualità per le foto. Confronta al 100% di zoom prima di abbassare l’impostazione.

### Perché la compressione causa banding nelle sfumature?

La compressione con perdita fonde i colori quasi identici, e una sfumatura liscia è fatta quasi solo di vicini quasi identici, quindi i tratti di colore collassano in strisce visibili.

### Qual è la migliore qualità JPEG?

Circa 80-85 per le fotografie e 90-95 per grafiche con testo o sfumature. I valori cambiano da strumento a strumento, quindi controlla il risultato al 100% di zoom.

### Aggiungere grana riduce davvero il banding?

Sì. Una grana fine spezza i gradini tra i colori così l’occhio legge una rampa liscia, e dà al compressore una texture da conservare invece di aree piatte da fondere.

### Devo comprimere i file PNG?

L’ottimizzazione PNG senza perdita è sempre sicura. Evita di ridurre un PNG con sfumatura a una tavolozza di 256 colori, che causa banding.