Riduci il peso di un’immagine scegliendo dimensioni, formato e qualità adeguati senza introdurre degradazioni visive inutili.
Comprimere un’immagine “senza perdere qualità” può significare due cose. La compressione senza perdita conserva esattamente i dati codificati; una compressione con perdita ben regolata riduce molto di più il peso accettando differenze che non sono visibili o rilevanti nell’uso finale.
Sul Web, la seconda interpretazione è spesso quella più pratica.
Un’immagine 4000×3000 contiene 12 milioni di pixel. Ridurla a 1200×900 significa scendere a 1,08 milioni di pixel: oltre il 90% in meno prima ancora di cambiare codec.
Il ridimensionamento riduce l’informazione spaziale; la compressione codifica quell’informazione in modo più efficiente.
Per questo eliminare dimensioni inutilmente grandi è spesso il primo guadagno da cercare.
Una semplice approssimazione RGB per 4000×3000 a 8 bit per canale è:
4000 × 3000 × 3 = 36.000.000 byte
Un JPEG può pesare molto meno perché sfrutta ridondanze e proprietà della percezione visiva.
Una codifica lossless permette di ricostruire esattamente i dati codificati. Sfrutta ripetizioni e strutture prevedibili invece di eliminare dettagli. PNG è l’esempio più comune sul Web; anche WebP offre una modalità lossless.
Attenzione: se prima dell’encoding hai ridimensionato, quantizzato colori o eliminato alpha, il workflow ha già modificato l’immagine. “PNG lossless” descrive la codifica, non l’intera storia del file.
JPEG, WebP lossy e AVIF possono approssimare parte dell’informazione per ottenere file molto più piccoli. Su fotografie è spesso efficace perché l’occhio tollera alcune variazioni meglio di altre.
Quando si esagera compaiono blocchi, aloni, bordi artificiali, perdita di texture e banding. L’obiettivo è fermarsi prima che questi difetti diventino fastidiosi nell’uso reale.
Non usare la versione compressa come unica sorgente. Conserva il file dell’apparecchio, un export di alta qualità, un PNG master o l’originale vettoriale.
Così potrai produrre nuove larghezze, codec o ritagli senza partire da una versione già degradata.
Questo flusso è rischioso:
originale → JPEG ridotto → nuovo JPEG → WebP
Ogni codifica con perdita lavora sulle approssimazioni della precedente. Meglio generare ogni derivato direttamente dal master.
Una fotografia in PNG può restare enorme anche “ottimizzata”, perché PNG conserva esattamente i pixel codificati. La stessa foto in JPEG, WebP o AVIF può diventare molto più leggera.
Una schermata con testo piccolo può invece degradarsi male in JPEG e funzionare meglio in PNG o WebP lossless.
Consulta PNG, JPEG, WebP o AVIF prima di cercare il valore di qualità perfetto.
Un valore 80 in un encoder non equivale necessariamente a 80 in un altro, né tra codec differenti. Bisogna confrontare peso e resa visiva, non soltanto il numero del cursore.
Controlla soprattutto volti, testo, linee sottili, gradienti, texture fini e bordi ad alto contrasto.
Le fotografie tollerano generalmente bene codec lossy moderni. Screenshot, grafica piatta e testo possono beneficiare di lossless o di impostazioni più conservative.
Per un logo geometrico, considera direttamente SVG invece di comprimere un raster.
La compressione da sola non basta. Il browser dovrebbe ricevere anche dimensioni appropriate al dispositivo. Produci varianti responsive e lascia che srcset e sizes aiutino a scegliere la risorsa corretta.
Il vero obiettivo non è creare “il file più piccolo”, ma la più piccola rappresentazione che conserva ciò di cui l’utente ha bisogno.
Raccolta
7 / 14
Scopri come srcset e sizes consentono al browser di scegliere un’immagine adatta alla larghezza di visualizzazione, alla densità di pixel e al contesto responsive.
Costruisci una strategia completa per le immagini Web: dimensioni, formato, compressione, responsive, caricamento, stabilità visiva e misurazione.
Scegli il formato immagine adatto a foto, screenshot, trasparenza o interfacce senza sacrificare inutilmente qualità e prestazioni.