Come comprimere le immagini per il web senza perdere qualità

Le immagini sono di solito la cosa più pesante di una pagina web. Una singola foto non ottimizzata appena uscita dalla fotocamera di un telefono può pesare diversi megabyte — più di tutto il testo, il codice e lo stile di un sito messi insieme. Comprimere le immagini è il cambiamento a maggiore impatto che la maggior parte delle persone può fare per la velocità della pagina e, fatto bene, è invisibile ai visitatori. Questa guida spiega come funziona la compressione delle immagini e come ridurre i file senza un calo di qualità percepibile.

Perché la dimensione dell'immagine conta

Ogni kilobyte in più sono dati che il browser di un visitatore deve scaricare prima di poter mostrare la tua pagina. Su una connessione desktop veloce potrebbe non notarsi, ma sulle reti mobili aumenta direttamente il tempo di caricamento, frustra gli utenti e danneggia il posizionamento — Google usa segnali di esperienza di pagina come la velocità di caricamento tra i fattori di ranking. Immagini più piccole significano pagine più veloci, bollette di banda più basse e visitatori più contenti.

Compressione con perdita vs. senza perdita

Ci sono due modi fondamentalmente diversi per rendere più piccolo un file immagine.

Compressione senza perdita

I metodi senza perdita impacchettano i dati in modo più efficiente senza buttare via nulla — decomprimendo ottieni una copia identica pixel per pixel dell'originale. È sicuro, ma i risparmi sono modesti, tipicamente il 10–50%. PNG usa la compressione senza perdita, ed è per questo che è ottimo per loghi, screenshot e grafica con bordi netti e colori piatti.

Compressione con perdita

I metodi con perdita scartano informazioni che l'occhio umano difficilmente noterà — sottili variazioni di colore, dettagli fini in zone affollate — per ottenere risparmi molto maggiori, spesso il 70–90%. JPEG e WebP usano la compressione con perdita. Il compromesso è controllato da un'impostazione di qualità: qualità più bassa significa file più piccolo ma artefatti più visibili. Per le fotografie, la compressione con perdita a un livello di qualità sensato è quasi sempre la scelta giusta.

Scegliere il formato giusto

Il formato che scegli conta quanto il livello di compressione:

• JPEG — il cavallo di battaglia delle fotografie. Ampiamente supportato ovunque. Buona compressione, ma niente trasparenza.
• PNG — il migliore per grafica con linee nette, testo o trasparenza (loghi, icone, screenshot). Senza perdita, quindi le foto vengono pesanti.
• WebP — un formato moderno che di solito produce file più piccoli del 25–35% rispetto a JPEG a parità di qualità visiva, e supporta la trasparenza come PNG. Supportato da tutti i browser attuali. Per la maggior parte delle immagini web di oggi, WebP è il miglior default.
• SVG — non è affatto un formato di foto compressa, ma per loghi e icone semplici un SVG vettoriale resta nitidissimo a qualsiasi dimensione e spesso pesa solo pochi kilobyte.

Quanta qualità puoi sacrificare?

Per i formati con perdita, la qualità di solito si esprime su una scala 0–100. Controintuitivamente, la parte alta di quell'intervallo è uno spreco: la differenza tra qualità 100 e qualità 80 è spesso impossibile da vedere, eppure la qualità 80 può dimezzare la dimensione del file. Un punto di partenza pratico:

• Qualità 75–85 — il punto ideale per la maggior parte delle foto web. Grandi risparmi, nessuna perdita visibile nella visualizzazione tipica.
• Qualità 60–75 — va bene per grandi immagini di sfondo o miniature dove la nitidezza assoluta non è critica.
• Sotto 60 — i risparmi si appiattiscono mentre gli artefatti (cieli a blocchi, aloni sui bordi) diventano evidenti. Di solito non ne vale la pena.

L'approccio migliore è confrontare, non indovinare. Comprimi a una data qualità, guarda il risultato alla dimensione a cui verrà davvero mostrato, e abbassa la qualità a scatti finché non inizi appena a vedere una differenza — poi risali di uno scatto.

Ridimensiona prima di comprimere

La compressione può fare ben poco se l'immagine è molto più grande del necessario. Una foto larga 4000 pixel mostrata in una colonna larga 800 pixel porta cinque volte più pixel di quanti chiunque ne vedrà mai. Ridimensionare l'immagine più o meno alle dimensioni a cui è mostrata — e poi comprimere — è spesso il singolo risparmio più grande di tutti. Il nostro ridimensionatore di immagini gestisce ritaglio, rotazione e ridimensionamento in un solo passaggio, interamente nel tuo browser.

Un flusso di lavoro semplice

1. Ridimensiona l'immagine alla dimensione più grande a cui sarà mostrata.
2. Scegli WebP se puoi, JPEG per la massima compatibilità, PNG per grafica con trasparenza.
3. Comprimi a qualità ~80 e guarda il risultato alla dimensione di visualizzazione.
4. Abbassa la qualità finché non noti una differenza, poi risali di un passo.

Gli ultimi tre passi li fai in pochi secondi con il nostro compressore di immagini: trascina una o più immagini e vengono compresse all'istante sul tuo dispositivo — nulla viene caricato su un server, quindi è sicuro per le foto private. Confronta le dimensioni prima e dopo, e scarica quando sei soddisfatto del risultato.