Cos'è la compressione delle immagini?
La compressione di un'immagine riduce le dimensioni del relativo file. La compressione delle immagini può essere "lossy" o "lossless".
Obiettivi di apprendimento
Dopo aver letto questo articolo sarai in grado di:
- Definire la compressione delle immagini
- Spiegare perché la compressione è importante per l'ottimizzazione delle immagini
- La compressione delle immagini lossy e lossless a confronto
- Comprendere i metodi e gli algoritmi di compressione delle immagini più comuni
Argomenti correlati
Cos'è l'ottimizzazione delle immagini?
Cos'è la latenza?
Cos'è il bilanciamento del carico?
Core Web Vitals
Prestazioni e tassi di conversione
Vuoi saperne di più?
Abbonati a theNET, il riepilogo mensile di Cloudflare sulle tematiche più discusse in Internet.
Copia link dell'articolo
Migliora le prestazioni dei siti Web con Cloudflare Pro e i nostri componenti aggiuntivi per gli strumenti di velocità
Cos'è la compressione delle immagini?
Per "compressione delle immagini" si intende un processo che riduce le dimensioni dei file immagine. La procedura di compressione solitamente agisce rimuovendo dall'immagine dei byte di informazioni, oppure utilizzando un algoritmo di compressione che riscrive il file immagine in modo che occupi meno spazio di archiviazione. La compressione è un modo efficace per garantire che un'immagine si carichi rapidamente quando un utente interagisce con un sito web o un'applicazione, e costituisce una parte importante del processo di ottimizzazione delle immagini.
Ad esempio, ecco un'immagine di 96 KB:
Qui vediamo la stessa immagine compressa a 70 KB:
Qui, invece, è compressa a 35 KB:
Perché è importante la compressione delle immagini?
Le immagini compresse si caricano più velocemente rispetto a quelle non compresse. Questo aspetto è rilevante, in quanto la velocità di caricamento di una pagina web e di una applicazione ha un impatto significativo su fattori quali la SEO, i tassi di conversione, l'esperienza digitale dell'utente e altre metriche fondamentali. Migliorare le prestazioni web è uno dei modi principali in cui gli sviluppatori ottimizzano i siti.
La compressione delle immagini viene utilizzata anche insieme ad altri metodi per migliorare le prestazioni web. Ad esempio, una CDN memorizza nella cache i contenuti per distribuirli più rapidamente agli utenti finali, mentre il bilanciamento del carico aiuta a prevenire il sovraccarico dei server web. L'uso del lazy loading fa sì che il contenuto più importante di una pagina web si carichi ancora più velocemente. Nel complesso, la compressione delle immagini rimane uno dei metodi più veloci per migliorare le performance di una pagina web.
Che cos'è la compressione immagini lossy?
Supponiamo di dover fare i bagagli per un viaggio. Potremmo senz'altro mettere in valigia tutto quello che abbiamo nel nostro armadio: magliette, camicie, scarpe, e magari anche qualche completo elegante. Un'approccio di questo tipo, però, finirebbe per farci riempire ben più di una valigia, e sarebbe un problema portarcele dietro tra uno spostamento e l'altro, per non parlare dei maggiori costi di trasporto in cui incorreremmo. Una scelta più saggia è invece selezionare i capi d'abbigliamento più importanti e metterli dentro una sola valigia.
Proprio come per viaggiare non abbiamo bisogno di portarci dietro tutto il nostro guardaroba, accade di rado che il visitatore di un sito abbia bisogno di vedere un'immagine alla risoluzione e alle dimensioni massime. La dimensione dello schermo desktop più utilizzata è di 1680x1050 pixel, mentre quella degli schermi mobile è ancora inferiore, ovvero 360x800 pixel. Anche a quelle dimensioni, è raro che un'immagine occupi l'intero schermo. Di solito, un'immagine può essere ridotta in termini di qualità e dimensioni in modo tale da non degradarla in modo percettibile agli occhi dell'utente tipico, un approccio chiamato compressione dell'immagine "con perdita", in inglese "lossy".
La compressione delle immagini lossy conserva le informazioni più importanti di un'immagine senza però conservare ogni singolo pixel. Esistono diversi tipi di algoritmi di compressione lossy, che descriveremo più in dettaglio più avanti. Tuttavia, tutti operano rimuovendo informazioni dal file immagine, in modo che il file sia composto da un numero minore di byte.
Metodi di compressione immagini lossy
Molte immagini ospitate sul Web sono in un formato di file che utilizza la compressione con perdita di dati. Ciò garantisce che le immagini vengano caricate rapidamente e non utilizzino troppa larghezza di banda. Esempi comuni di metodi di compressione con perdita di dati includono:
- JPEG: questo formato di file, che prende il nome dal Joint Photographic Experts Group, è forse il metodo di compressione delle immagini più utilizzato. Solitamente, è possibile comprimere i file con un rapporto di 10:1 con una riduzione minima della qualità dell'immagine. Le versioni più recenti di JPEG includono JPEG 2000 e JPEG XR, ma molti browser non supportano questi formati.
- WebP: sebbene WebP supporti anche la compressione lossless, è più comunemente utilizzato per la compressione di immagini lossy. Google ha originariamente sviluppato WebP per sostituire i formati di file JPEG, PNG e GIF.
- High Efficiency Image Format (HEIF): l'High Efficiency Image Format (HEIF) è un tipo di file-contenitore per immagini compresse. Le immagini compresse con questo metodo vengono talvolta chiamate file HEIC.
Cos'è la compressione delle immagini lossless?
Se i vestiti che vogliamo portare non entrano in valigia, possiamo provare a ripiegarli e a cambiarne la disposizione per farceli entrare meglio. Analogamente, la compressione immagini "lossless", ovvero "senza perdita", utilizza algoritmi matematici per riscrivere un file immagine senza rimuovere alcuna informazione. Un'immagine trattata con compressione lossless, pur con una dimensione file molto minore, appare in buona sostanza identica all'immagine originale.
Sebbene la compressione lossless possa ridurre le dimensioni dei file immagine fino al 40%, ai fini dell'ottimizzazione delle immagini risulta meno efficace rispetto alla compressione lossy. Quando devono decidere tra un metodo lossless e uno lossy, gli sviluppatori di un sito devono valutare con attenzione le esigenze degli utenti finali e testare con precisione la velocità dei loro siti.
Metodi di compressione lossless
I metodi di compressione lossless più diffusi includono:
- Portable Network Graphics (PNG), che a volte viene utilizzato sul web al posto di JPEG o WebP.
- Graphics Interchange Format (GIF), spesso utilizzato anche sul web.
- I file Bitmap (BMP) sono generalmente troppo grandi per essere usati a scopi pratici sul web.
- Le immagini RAW, invece, non sono compresse. Le fotocamere digitali scattano foto in formato RAW, ma prima di poter essere usate su un sito web, devono essere trasformate in un altro formato e compresse. L'eccezione alla regola avviene quando il sito web è stato espressamente concepito per mostrare immagini di qualità estremamente alta.
Quali sono alcuni tra i più diffusi algoritmi di compressione delle immagini?
Sia i metodi di compressione lossy che quelli lossless utilizzano diversi algoritmi di compressione delle immagini (un algoritmo è un insieme di regole che un computer deve seguire) per ottenere dimensioni dei file inferiori. Codifica per trasformazione, codifica aritmetica LZW, flate/deflate e codifica Huffman sono tutti esempi di algoritmi di compressione delle immagini.
La codifica per trasformazione è un algoritmo di compressione delle immagini di tipo lossy che sovente utilizza una tecnica chiamata "trasformata discreta del coseno" (Discrete cosine transform, DCT), che è un modo per rappresentare matematicamente un file utilizzando meno informazioni. Il formato JPEG, ad esempio, si basa su questo tipo di codifica.
La codifica Run-length (RLE) è un algoritmo di compressione lossless che codifica i pixel ripetuti. Se ad esempio in una data riga ci sono otto pixel bianchi, invece di scrivere tutti e otto i pixel (come WWWWWWWW), l'algoritmo registra il numero di pixel (come 8W).
La codifica aritmetica è un altro tipo di algoritmo di compressione lossless. Come ogni file digitale, le immagini digitali sono rappresentate, a livelli computazionali inferiori, da una stringa di caratteri. La codifica aritmetica codifica i caratteri utilizzati di frequente in un file immagine con meno bit, e i caratteri meno utilizzati con più bit. Il risultato è un numero inferiore di bit rispetto alla stringa originale.
La codifica Huffman è in qualche modo simile alla codifica aritmetica, ma di solito non riduce le dimensioni di un file nella stessa misura.
LZW: l'algoritmo Lempel–Ziv–Welch è un metodo di compressione lossless basato su LZ77 e LZ78, due algoritmi di compressione meno recenti.
Flate/Deflate è un algoritmo di compressione lossless basato sulla codifica Huffman e sulla compressione LZ77.
Come comprimere un'immagine con Cloudflare
Per fare in modo che le immagini siano caricate il più velocemente possibile, Cloudflare offre tre prodotti per la memorizzazione, il caching, l'ottimizzazione e il ridimensionamento:
Con questi servizi, i titolari di siti web possono ottimizzare le immagini con un clic, convertirle in formati file compressi, come WebP, e personalizzarne il formato a seconda del dispositivo su cui verranno caricate. Scopri di più su questi servizi nei link sopra, oppure inizia qui con un piano di Cloudflare.