Ridimensionamento, compressione, WebP, AVIF e buone pratiche: un metodo completo per alleggerire le immagini di un sito senza degradarne inutilmente il risultato.
Un’immagine da diversi megabyte può essere perfetta per la stampa e sproporzionata per una pagina Web. Ottimizzare non significa degradare il file finché diventa leggero, ma eliminare ciò che la visualizzazione non richiede: dimensioni eccessive, formato inadatto, qualità troppo alta o metadati superflui.
La strategia più efficace segue generalmente questo ordine: ridimensionare, scegliere il formato, comprimere, controllare visivamente e servire al browser la variante corretta.
Una fotografia da 6000 × 4000 pixel contiene 24 milioni di pixel. Se non viene mai mostrata oltre 1200 px di larghezza, conservare la dimensione originale obbliga il browser a scaricare e decodificare dati inutili.
Prima della compressione chiediti qual è la larghezza massima di visualizzazione, se esiste una variante mobile e se serve supportare schermi ad alta densità.
Due immagini da 1600 × 900 possono avere pesi molto diversi. Le dimensioni descrivono i pixel; il peso dipende anche da contenuto, formato e livello di compressione.
Una fotografia complessa si comprime diversamente da un logo con poche aree uniformi. Per questo un’unica impostazione non è ottimale per tutti i file.
| Contenuto | Scelta frequente | Motivo |
|---|---|---|
| Fotografia | WebP, AVIF, JPEG | buona compressione con perdita |
| Screenshot / interfaccia | WebP o PNG | dettagli e campiture nette |
| Logo / icona vettoriale | SVG | indipendente dalla risoluzione |
| Trasparenza | WebP, AVIF, PNG | canale alpha |
| Compatibilità massima | JPEG / PNG | formati storici molto diffusi |
WebP è ampiamente supportato e può gestire compressione con o senza perdita, trasparenza e animazione. AVIF può offrire un’ottima efficienza. JPEG e PNG restano utili come formati di fallback o per casi specifici.
La compressione lossless conserva i dati codificati esattamente. La compressione lossy elimina o approssima alcune informazioni per ottenere file molto più piccoli.
Per una fotografia Web, una compressione ragionevole può ridurre fortemente il peso senza differenze visibili alla dimensione reale di utilizzo. Il valore corretto non è quindi «qualità 100», ma la qualità sufficiente per il contesto.
Non ha senso zoomare al 400% e cercare difetti invisibili nella pagina. Controlla l’immagine alla dimensione prevista e osserva aree difficili come capelli, fogliame, testo, gradienti e dettagli fini.
Se 100 kB in meno non producono differenze percepibili in condizioni reali, il guadagno è utile. Se compaiono aloni o perdita di dettagli importanti, la compressione è eccessiva.
Passare da 4000 × 3000 a 800 × 600 riduce i pixel da 12 milioni a 480.000. È una diminuzione enorme prima ancora di scegliere il codec.
Comprimere prima l’immagine gigante e lasciarla poi ridurre dal browser significa ottimizzare il file sbagliato.
Un telefono non deve necessariamente scaricare la stessa immagine di un desktop ad alta densità. srcset, sizes e <picture> permettono al browser di scegliere la risorsa più adatta e anche di proporre formati moderni con fallback.
Il principio è semplice: non far pagare a ogni visitatore il costo della variante più pesante.
Screenshot e diagrammi possono soffrire una compressione fotografica aggressiva. Contorni e caratteri rendono gli artefatti molto visibili. In questi casi prova WebP lossless, PNG o una qualità più alta. Se il contenuto può essere vettoriale, SVG può essere ancora più adatto.
Una fotografia può contenere EXIF, modello di fotocamera, data e talvolta coordinate. Per una pubblicazione Web questi dati possono essere inutili o sensibili. Rimuovili quando opportuno, ma conserva le informazioni necessarie al flusso di lavoro e al corretto colore.
Dieci immagini da 900 kB rappresentano 9 MB. Portarle a una media di 180 kB significa scendere a circa 1,8 MB: un risparmio di 7,2 MB sulla sola pagina.
Su rete mobile questa differenza può cambiare sensibilmente il tempo di caricamento e il consumo dati.
Per una singola immagine basta un ridimensionatore o un convertitore. Se lo stesso processo si ripete, ha senso formalizzare la sequenza nel Workspace:
import → ridimensionamento → conversione → compressione → esportazione
L’ordine conta: ridimensionare dopo una prima compressione può introdurre una ricompressione inutile.
Verifica dimensioni, formato, qualità visiva, trasparenza, nitidezza del testo, metadati, varianti responsive e dimensioni dichiarate nella pagina. Il file migliore non è sempre il più piccolo: è il file più piccolo che svolge correttamente il suo ruolo visivo e funzionale.
Raccolta
11 / 14
Riduci il peso di un’immagine scegliendo dimensioni, formato e qualità adeguati senza introdurre degradazioni visive inutili.
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.
Scegli il formato immagine adatto a foto, screenshot, trasparenza o interfacce senza sacrificare inutilmente qualità e prestazioni.