Guida al rapporto di compressione immagine: qualità e dimensioni

Ultimo aggiornamento: June 28, 2026

Il rapporto di compressione delle immagini ti dice quanto è diventata piccola un'immagine dopo l'esportazione. È utile, ma solo se accoppi il numero a un controllo visivo. Un rapporto 12:1 può essere eccellente per una foto con sfondo sfocato e inaccettabile per uno screenshot di prodotto contenente testo piccolo.

Questa guida ti fornisce la formula, i normali intervalli di qualità e una checklist di pubblicazione per WebP, JPEG, PNG e AVIF. Usala quando hai bisogno di pagine più piccole senza rendere le immagini "mushy" (molle/sfocate).

Risposta rapida: qual è un buon rapporto di compressione delle immagini?

Un buon rapporto di compressione delle immagini è la riduzione di byte più alta che appare comunque nitida alla dimensione di visualizzazione finale. Calcolalo così: dimensione originale del file divisa per dimensione del file compresso. Un'immagine da 4 MB compressa a 500 KB ha un rapporto 8:1.

Per le foto web, un obiettivo pratico è spesso tra 5:1 e 12:1 dopo il ridimensionamento ed esportazione in WebP o AVIF. Per screenshot, loghi e immagini UI ricche di testo, i rapporti più bassi sono normali perché bordi nitidi e colori piatti richiedono protezione. PNG lossless o WebP lossless possono produrre solo tra 1.2:1 e 3:1.

Non giudicare la compressione solo dal rapporto. Ispeziona volti, bordi di prodotti, gradienti e testo piccolo. Se gli utenti possono vedere blocchi, ringing (alone), sbavature o banding, il rapporto è troppo aggressivo anche se la dimensione del file sembra attraente.

Come si calcola il rapporto di compressione delle immagini?

Utilizza la dimensione originale in byte e la dimensione finale in byte dopo tutti i passaggi reali di pubblicazione: ritaglio (crop), ridimensionamento (resize), eliminazione dei metadati, conversione del formato e impostazione della qualità. Se calcoli prima del ridimensionamento, il numero è solitamente fuorviante.

Usa il conteggio esatto dei byte quando stai ottimizzando un pipeline di build. Usa KB o MB arrotondati quando stai documentando impostazioni editoriali. La decisione non cambia: più piccolo è utile solo finché l'immagine comunica ancora il suo scopo.

Le linee guida di Google per le immagini sottolineano sia la velocità che la qualità: le immagini spesso determinano il peso della pagina, ma immagini sfocate o poco chiare sono dannose per gli utenti e per i preview di ricerca. Raccomanda anche elementi immagine HTML navigabili (crawlable), testo alt descrittivo e formati supportati come JPEG, PNG, WebP, SVG e AVIF in Google Images best practices.

Quale rapporto usare per WebP, JPEG, PNG e AVIF?

Il giusto rapporto dipende dal contenuto dell'immagine. Le fotografie si comprimono molto perché piccoli cambiamenti di texture sono difficili da notare. Screenshot e diagrammi si comprimono meno perché testo, linee e bordi UI rendono gli artefatti evidenti.

La guida dei formati immagine di MDN nota che WebP può essere lossy o lossless, mentre WebP lossy e WebP lossless utilizzano diverse rappresentazioni interne. Ecco perché non esiste un singolo "WebP ratio"; l'impostazione corretta dipende dal fatto che il contenuto possa tollerare la perdita. Consulta la guida ai tipi e formati di file immagine di MDN per il comportamento dei formati.

Per questo articolo, ho codificato grafiche locali da 1400 x 788 con ImageMagick e WebP. I file pubblicati sono di 23 KB, 28 KB, 35 KB e 40 KB. Sono insolitamente piccoli perché gli asset sono diagrammi puliti, non foto; usa i numeri come prova che i grafici piatti si comprimono in modo diverso dai dettagli fotografici.

Per compromessi di formato più ampi, confronta questo articolo con AVIF vs WebP Comparison. Se hai bisogno dei dettagli dell'algoritmo dietro gli artefatti, leggi How Image Compression Works.

Perché le impostazioni di qualità smettono di risparmiare molto dopo un certo punto?

La maggior parte degli encoder ha una forte vittoria iniziale e un doloroso compromesso finale. Passare da un file fotografico originale a WebP q80 può rimuovere molti dati invisibili. Passare da q70 a q55 può salvare meno byte ma rendere più facili da notare gli artefatti.

L'effetto pratico è semplice: la curva delle dimensioni si appiattisce mentre la curva della qualità continua a scendere. Ecco perché WebP q75-85 è un intervallo di partenza comune per foto di articoli e prodotti. Non è una regola per ogni file; è un buon primo test prima di ispezionare il risultato.

Usa questo ordine quando ottimizzi la qualità:

1. Ridimensiona alla larghezza renderizzata massima che effettivamente servi.
2. Esporta un WebP a q85, uno a q80 e uno a q75.
3. Aprili accanto all'originale alla dimensione di visualizzazione prevista.
4. Controlla volti, testo, bordi dei prodotti, ombre e gradienti uniformi.
5. Scegli la versione più piccola che non appare degradata.
6. Registra il rapporto risultante per quel tipo di contenuto.

Se l'immagine è probabile che sia l'elemento Largest Contentful Paint (LCP), la compressione è solo parte della soluzione. La guida web.dev LCP raccomanda di dare priorità alle immagini LCP probabili con fetchpriority="high" e di controllare la scoperta delle risorse nel waterfall di rete in Optimize Largest Contentful Paint.

Come dovresti confrontare i rapporti di compressione tra formati?

Confronta i formati a qualità visibile abbinata, non a numeri di slider abbinati. JPEG q82, WebP q78 e AVIF q55 possono tutti essere risultati ragionevoli dalla stessa fonte. I numeri sono controlli dell'encoder, non punteggi universali di qualità.

È qui che i team spesso leggono male i rapporti. Un JPEG a 5.7:1 può essere peggio di un WebP a 8:1 se entrambi sembrano uguali sullo schermo. Un WebP lossless a 2:1 può essere migliore di un WebP lossy a 10:1 se l'asset è uno screenshot di una tabella prezzi.

Per lavori batch, genera più output dallo stesso master e tieni la decisione visibile nei nomi dei file o nei log di build. La Batch Resize Guide copre il flusso di lavoro "ridimensiona prima", e Complete Image Optimization Checklist fornisce un ultimo passaggio pre-pubblicazione.

Quando un alto rapporto di compressione è un cattivo segno?

Un alto rapporto è un segnale di avvertimento quando l'immagine ha dettagli che le persone ispezionano. I proprietari di negozi notano la texture del prodotto. I designer notano il tipo smussato. Gli acquirenti notano i bordi dei gioielli fangosi. In questi casi, il "file più piccolo" può costare più di quanto risparmia.

Gli alti rapporti meritano un'ispezione extra quando l'immagine include:

• Etichette di prodotto, testo dell'imballaggio, ingredienti o numeri seriali.
• Screenshot UI, dashboard, codice o tabelle prezzi.
• Volti, texture della pelle, capelli, gioielli, tessuti o cibo.
• Gradienti uniformi, cieli, ombre, neon o sfondi scuri.
• Linee sottili, icone, bordi trasparenti o marchi aziendali.
• Immagini che verranno zoomate, ritagliate o riutilizzate in annunci.

Per l'e-commerce, usa un controllo più rigoroso di quello che useresti per un'immagine blog decorativa. Una miniatura di categoria può tollerare più perdita rispetto all'immagine prodotto principale. Se lo stesso master alimenta entrambi, crea esportazioni separate invece di forzare un singolo rapporto per servire ogni slot.

Quale flusso di lavoro offre la migliore dimensione senza perdita visibile di qualità?

Usa il rapporto di compressione come una misurazione, non come prima impostazione. La qualità dell'output dipende più dalla sorgente, dal ritaglio, dalle dimensioni dei pixel e dalla scelta del formato che dal numero finale del rapporto.

Usa questa sequenza di pubblicazione:

1. Mantieni un file master che non sia stato ricodificato ripetutamente.
2. Ritaglia per il caso d'uso finale prima di ridimensionare.
3. Ridimensiona alla larghezza renderizzata massima, con varianti responsive se necessario.
4. Scegli il formato in base al contenuto: WebP o AVIF per foto, lossless per grafiche ricche di testo.
5. Esporta due o tre candidati di qualità.
6. Rimuovi i metadati dalle copie pubbliche a meno che non sia legalmente o editorialmente richiesto.
7. Confronta i candidati alla dimensione renderizzata su desktop e mobile.
8. Controlla l'immagine LCP probabile separatamente dalle immagini sotto la piega (below-fold).
9. Pubblica su un URL CDN stabile e verifica HTTP 200.
10. Registra byte, rapporto e impostazione finali in modo che il batch successivo sia più veloce.

Se stai puntando a un budget di dimensioni rigoroso, inizia con il flusso di lavoro in Compress Image to 100KB o Compress Image to 200KB. Per le pagine mobile, abbina la decisione sul rapporto con la Mobile Image Optimization Guide.

Come si combinano il rapporto di compressione e SEO?

Il rapporto di compressione aiuta l'SEO indirettamente. Immagini più piccole riducono la dimensione del trasferimento, il che può migliorare le prestazioni di caricamento, specialmente quando l'immagine compressa è anche dimensionata correttamente. Ma i motori di ricerca e gli utenti hanno ancora bisogno di un'immagine utile, un URL stabile, testo circostante leggibile e alt text descrittivo.

Non inviare un'immagine minuscola che appare rotta nei preview di ricerca o nelle schede social. Google raccomanda esplicitamente di scegliere un'immagine rappresentativa per i metadati ed evitare immagini generiche per dati strutturati o og:image quando esiste un'immagine più rilevante. L'immagine dovrebbe essere veloce e chiara.

Per un post blog, questo significa solitamente:

• Usare una copertina WebP unica nel frontmatter e nei dati Open Graph.
• Mantenere la copertina leggibile nella dimensione del preview social.
• Posizionare l'immagine vicino al testo che spiega il punto chiave.
• Usare alt text descrittivo, non riempimento di parole chiave (keyword stuffing).
• Servire l'asset finale da un URL CDN navigabile.
• Evitare di sostituire gli URL delle immagini indicizzate a meno che l'asset non sia sbagliato.

Il rapporto è una riga nel record di pubblicazione. Dovrebbe stare accanto alla larghezza renderizzata, al formato, all'impostazione di qualità, alla dimensione in byte e alle note visive.

Checklist del rapporto di compressione

Prima di pubblicare, esegui questa breve revisione:

L'obiettivo utile non è la "compressione massima". È un'impostazione riproducibile che mantiene la pagina leggera e l'immagine affidabile. In caso di dubbio, usare il file più piccolo solo dopo che il controllo visivo ha superato il test.