Compressione sì — ma attenzione. Oggi scendiamo un livello e parliamo di posterizzazione (o banding): quelle strisce visibili nei gradienti quando un’immagine viene compressa troppo o nel formato sbagliato.
Cosa succede nei gradienti
Guarda un cielo al tramonto, uno sfondo che passa dal nero al bianco, un’ombra morbida: idealmente il colore cambia in modo fluido, pixel dopo pixel. Con la compressione lossy — soprattutto su formati moderni come WebP o AVIF — a volte quel passaggio diventa a gradini. Compaiono bande, striature, «scale» di colore invece di una transizione regolare.
Non è un bug del tuo monitor. È il compromesso tra peso del file e fedeltà cromatica. Più comprimi, più i gradienti soffrono — e WebP/AVIF, per quanto ottimi per foto e illustrazioni piatte, non sono immuni.
WebP e AVIF: quando vanno benissimo
Per la stragrande maggistanza delle immagini di un sito — prodotti, team, articoli del blog, screenshot — WebP (e in futuro AVIF) è la scelta giusta: file leggeri, caricamento veloce, qualità percepita ottima. È il formato che consiglio quasi sempre.
Quasi sempre. Non sempre.
Quando conviene restare a JPEG (o persino PNG)
Se l’immagine ha gradienti ampi, cieli, sfumature, ombre delicate, forzare WebP con compressione aggressiva può produrre banding evidente. In quei casi:
- JPEG a qualità alta (85–92%) spesso preserva i gradienti meglio di un WebP troppo spinto
- PNG — pesantissimo, lo so — resta l’ultima riserva per grafiche con trasparenza e sfumature dove non accetti compromessi visivi
Costruire un sito web non significa «standardizzare tutto a WebP e chiudere». Significa scegliere formato e qualità immagine per immagine, non applicare la stessa ricetta ovunque.
Prestazioni vs grafica: il compromesso onesto
Ogni byte risparmiato aiuta la velocità. Ma un hero con banding visibile danneggia la percezione del brand più di 200 ms in più di caricamento. Il lavoro del professionista è bilanciare le due cose — non vincere PageSpeed a qualunque costo.
Approfondimenti utili sullo stesso tema:
- Sito fai da te: ottimizzazione immagini e altri passi
- Manutenzione WordPress e GTmetrix: cosa cambia davvero
PageSpeed e GTmetrix: avviso, non verdetto
Qui entra un argomento correlato. Un’immagine che hai deciso di tenere in JPEG ad alta qualità — perché il WebP bandava — verrà probabilmente segnalata da Google PageSpeed Insights o GTmetrix come «usa formati next-gen» o «immagine troppo pesante».
Non è un errore. È una scelta.
Gli strumenti di audit misurano regole generali, non il tuo gradiente. Ti dicono «comprimi di più» senza vedere le strisce sullo sfondo. A volte, da sviluppatore, si sceglie il bello e non solo il funzionale — e si accetta un voto leggermente più basso in cambio di un sito che non sembra cheap.
Non significa ignorare la performance. Significa non lasciarsi guidare ciecamente da un punteggio quando sai perché quella singola immagine è così com’è.
Regole pratiche
- Foto, prodotti, contenuti «normali» → WebP, qualità 80–85, ridimensiona prima di caricare
- Gradienti, cieli, sfondi hero → prova WebP; se banding, torna a JPEG alto o PNG
- Trasparenza → PNG o WebP lossless (più pesante)
- Controlla a occhio — zoom al 100%, non fidarti solo del peso in kilobyte
- PageSpeed rosso su un’immagine → verifica se è un vero problema o una scelta consapevole
Bello o funzionale?
La risposta onesta: dipende dall’immagine. Su un blog post con foto prodotto, funzionale vince. Sullo sfondo della home, dove il visitatore fissa il gradiente per tre secondi, il bello conta.
Sei d’accordo? A volte conviene sacrificare un punto su GTmetrix per non consegnare un sito con strisce sul cielo. Io sì — e lo dico ai clienti prima di comprimere tutto alla cieca.
Hai immagini che «si rovinano» dopo la compressione o PageSpeed che ti segnala errori che non capisci? Scrivimi — spesso si risolve scegliendo formato giusto, non installando altri plugin.