In breve
- 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.
In questa pagina
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.
linear-gradient(90deg, #14101f 0%, #2a2147 100%)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, 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.
Impostazione per foto
Note
Impostazione per foto
Note
Impostazione per foto
Note
Impostazione per foto
Note
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 mostra quanta usarne.
Una sfumatura scura e pulita a 1920×1080 è l’immagine che più facilmente forma bande dopo la compressione.
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. 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 e WebP contro PNG e JPG 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.
# 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.webpSe 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 mostra come sovrapporre sfumature a una piccola texture di grana, e ottimizzare le immagini per il web spiega cosa cerca Lighthouse.
Le domande più frequenti
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.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo