Come ridurre il peso delle immagini senza perdite visibili di qualità

Le tre leve, in ordine

1. Dimensioni. Quanti pixel contiene l’immagine. Dimezzare larghezza e altezza elimina tre quarti dei pixel e il peso del file segue da vicino.
2. Formato. Come vengono codificati quei pixel. Sbagliare, per esempio conservando una fotografia come PNG o un logo come JPG, può costare diverse volte i byte necessari.
3. Impostazione della qualità. Quanti dettagli elimina un codificatore con perdita. Utile, ma la più piccola delle tre leve e l’unica che può davvero danneggiare l’aspetto dell’immagine.

L’ordine conta perché le leve si moltiplicano. Una foto 4000×3000 in PNG può pesare 12MB. Ridurla a 1200×900 la porta a circa un decimo. JPG riduce ancora molto. Solo allora qualità da 95 a 82 agisce su un piccolo resto, non copre un problema da risolvere ridimensionando.

Procedi nell’ordine opposto e ottieni il risultato peggiore: un’immagine schiacciata a qualità 40 per raggiungere un peso obiettivo, ancora con quattro volte i pixel necessari, visibilmente piena di artefatti e più grande del dovuto. Se un’immagine appare brutta dopo la compressione, di solito è stato saltato il primo passaggio.

Leva 1: ridimensiona prima di comprimere

Scegli le dimensioni in base a dove l’immagine viene davvero mostrata, non a ciò che produce la fotocamera.

Due moltiplicatori da ricordare. Gli schermi ad alta densità richiedono circa il doppio della larghezza in pixel CSS per un risultato nitido: un’immagine visualizzata larga 600 px dovrebbe avere circa 1200 px nel file. Oltre 2x, invece, i benefici crollano: 3x è quasi indistinguibile da 2x, pur comportando più del doppio dei byte.

Leva 2: abbina il formato al contenuto

Una versione breve della decisione, trattata in dettaglio nella nostra guida al confronto dei formati:

• Fotografie → WebP con perdita o JPG quando conta la compatibilità. Una fotografia memorizzata in PNG è l’errore di formato più comune e più costoso, spesso con un peso da cinque a dieci volte superiore al necessario.
• Grafica piatta, loghi, schermate, pixel art → PNG, idealmente PNG con palette. JPG sulla grafica piatta produce artefatti ad anello visibili intorno a ogni bordo e un file più grande del PNG. Anche WebP con perdita è spesso più grande di un PNG con palette in questo caso.
• Qualsiasi elemento che richieda trasparenza → PNG o WebP con perdita se il contenuto è fotografico. JPG non ha un canale alfa e riempirà la trasparenza con un colore uniforme.

Un esempio reale: una scheda social PNG di 606KB riesportata JPG a qualità 82 è diventata 81KB, una riduzione dell’87% cambiando un menu. Era una fotografia in un formato per grafica piatta. Nella direzione opposta, convertire sfondi di pagina sfumati da PNG a WebP li ha ridotti di circa il 57%: contenuti uniformi senza bordi netti sono proprio ciò che la codifica con perdita gestisce meglio.

Leva 3: la qualità e quando smette di aiutare

Per JPG e WebP con perdita, la qualità è un numero da 0 a 100 che controlla quanto aggressivamente il codificatore quantizza. La relazione tra quel numero e il peso del file è fortemente non lineare e conoscere la forma della curva indica dove posizionarsi.

Passare da 100 a 90 spesso elimina metà del file senza perdite percepibili. Da 90 a 80 elimina un’altra buona parte, ancora invisibilmente sui contenuti fotografici. Da 80 a 70 risparmia molto meno iniziando a farsi notare. Sotto 60, ogni ulteriore passo costa qualità visibile per benefici sempre minori. È la curva dei rendimenti decrescenti ed è il motivo per cui qualità 80 è un valore predefinito così comune: si trova proprio nel punto di equilibrio.

Il contenuto sposta il punto di equilibrio. Fotografie complesse e dettagliate nascondono bene gli artefatti e tollerano 70. Immagini con grandi aree uniformi, come cieli, fondali da studio e sfumature, mostrano prima le bande e richiedono 85. Qualsiasi elemento con testo o bordi netti non dovrebbe essere in un formato con perdita.

Quando PNG richiede la quantizzazione della palette

PNG non ha un cursore di qualità, ma ha una leva quasi mai usata: ridurre il numero di colori. Un PNG truecolor memorizza quattro byte per pixel; uno con tavolozza un indice di un byte in una tabella fino a 256 colori. Per immagini con davvero pochi colori, la versione con tavolozza è diverse volte più piccola e, se tutti i colori entrano nella tabella, matematicamente identica.

Buoni candidati:

• Loghi, icone e illustrazioni piatte con pochi colori.
• Pixel art, solitamente già creata con una tavolozza limitata.
• Screenshot di interfacce, composti principalmente da aree uniformi e testo.
• Grafici e diagrammi.

Candidati inadatti: fotografie, sfumature uniformi e immagini con bordi antialias morbidi contro molti sfondi. Quantizzarli introduce bande e un buon quantizzatore usa dithering per nasconderle, aggiungendo rumore che si comprime male e annulla parte del risparmio.

Qui il canale alfa richiede attenzione. Il PNG con tavolozza supporta la trasparenza per ogni voce della tavolozza, quindi un bordo antialias parzialmente trasparente consuma voci per ciascun livello di fusione. Un’icona con un’ombra morbida può consumare gran parte delle 256 voci per le gradazioni dell’ombra. Controlla il risultato su uno sfondo contrastante prima di distribuirlo.

Elimina i metadati

Le immagini di fotocamere e telefoni contengono blocchi EXIF: impostazioni di esposizione, modello dell’obiettivo, date e ore, miniature e spesso coordinate GPS. Gli strumenti di design aggiungono propri blocchi. Solitamente sono decine di kilobyte e talvolta molti di più quando è presente un profilo colore incorporato o una miniatura di anteprima.

Su una foto di 2MB è trascurabile. Su una miniatura di 40KB, 15KB di EXIF sono più di un terzo del file. C’è anche un motivo oltre al peso: le coordinate GPS in una foto pubblicata dicono a tutti dove è stata scattata, un problema di privacy spesso riscoperto a proprie spese.

Due elementi da conservare intenzionalmente: il profilo colore, se l’immagine non è già in sRGB, perché rimuoverlo altera i colori, e i campi di copyright se ti affidi a essi. Nota che qualsiasi strumento nel browser che ricodifica attraverso una tela rimuove automaticamente i metadati come effetto collaterale, poiché la tela contiene solo pixel e nient’altro.

Ricette per obiettivi comuni

Sotto un limite di 25 MB per gli allegati email

Di solito si tratta di un gruppo di foto del telefono. Ridimensiona ciascuna a 2000 px sul lato lungo ed esporta JPG a qualità 85. Una tipica foto da 12 megapixel arriva a circa 500 KB, quindi quaranta rientrano nel limite. Se te ne servono di più, passa a 1600 px prima di abbassare la qualità: il destinatario le guarda su uno schermo, non stampa un poster.

Sotto un limite di 100 KB per moduli o caricamenti

Comune per foto del profilo, caricamenti di documenti e candidature di lavoro. Procedi dall’alto: ridimensiona alla massima dimensione visualizzata, spesso 800px o meno, esporta JPG a qualità 80 e controlla. Se è ancora troppo grande, passa a 70, poi riduci ulteriormente le dimensioni. Evita di scendere sotto qualità 60: un’immagine di 600px a qualità 75 appare molto migliore di una di 1200px a qualità 45, a parità di dimensione del file.

Immagini per pagine web

Punta a meno di 200KB per immagine di contenuto e meno di 500KB per un’immagine principale. Distribuisci più dimensioni tramite srcset così i telefoni non scaricano la versione desktop. Carica in modo differito ciò che è sotto la prima schermata. Controlla anche cosa richiede effettivamente la pagina: un errore comune è un CMS che serve l’originale da 4000 px con una larghezza CSS di 600 px, dove l’intero problema è un’impostazione del modello, non il file immagine.

Budget delle texture di gioco

Si applicano regole diverse, perché conta la memoria GPU, non il peso del download. La memoria GPU dipende dalle dimensioni e dal formato della texture, non dal peso del PNG compresso sul disco: un PNG molto ottimizzato e uno gonfio occupano la stessa VRAM una volta caricati. Mantieni la grafica sorgente senza perdita, usa dimensioni potenze di due quando il flusso lo richiede e lascia alle impostazioni di importazione del motore la compressione GPU. Ottimizzare il PNG influisce solo sulle dimensioni dell’installazione.

Domande frequenti