Guarda la Nostra Video Guida alla Compressione Lossy vs Lossless<\/a><\/h3>\n<\/kinsta-video><\/p>\nDifferenze tra Lossy vs. Lossless<\/h2>\n
Quando si tratta di qualsiasi compressione di immagini digitali, esistono diversi formati tra cui scegliere. A volte questi avranno altri nomi a seconda di molti fattori. Tuttavia, a un livello base, ne troverete di due tipi:<\/p>\n
\n- Compressione Lossy:<\/b> L’obiettivo qui \u00e8 quello di fornire la dimensione di file pi\u00f9 ridotta possibile per un’immagine. Come tale, la qualit\u00e0 dell’immagine \u00e8 spesso in fondo alla lista delle priorit\u00e0.<\/li>\n
- Compressione Lossless:<\/b> Anche con questo formato di compressione la riduzione della dimensione del file \u00e8 consistente, ma l’immagine non soffrir\u00e0 per la manipolazione o per altri problemi.<\/li>\n<\/ul>\n
Nella maggior parte dei casi, la decisione su quale formato usare dipender\u00e0 dal vostro obiettivo finale: volete file minuscoli oppure il vostro obiettivo \u00e8 preservare la qualit\u00e0?<\/p>\n
La compressione lossy rimuove i dati che ritiene non necessari dall’immagine in modo permanente. Usa molte tecniche diverse per raggiungere questo obiettivo, risultando in file di dimensioni molto pi\u00f9 ridotte.<\/p>\n
Anche la compressione lossless rimuove i dati, ma pu\u00f2 ripristinare l’originale se necessario. L’obiettivo \u00e8 quello di mantenere alta la qualit\u00e0, ma ridurre la dimensione del file.<\/p>\n
Ci sono diversi modi per raggiungere questo obiettivo, anche se il risultato \u00e8 spesso lo stesso. Per scoprire l’opzione giusta per le vostre esigenze, facciamo prima un passo indietro e rivediamo le basi delle immagini e della compressione in generale.<\/p>\n\n
Elementi di un’Immagine Digitale<\/h2>\n
Come succede per il software e lo sviluppo web, c’\u00e8 spesso uno “stack” per portare un’immagine dalla fotocamera al web.<\/p>\n
Un’immagine inizia come dato “grezzo”, e per questo in inglese si parla di \u201craw data\u201d (dati grezzi) e file RAW. \u00c8 come il codice di un’applicazione: gli snippet, le linee e i valori si traducono in sfondi con colori, segnaposti per le immagini, elementi dinamici e altro.<\/p>\n
Per un’immagine, il file RAW contiene una rappresentazione dell’immagine leggermente diversa in base al produttore della fotocamera, al software di editing, all’algoritmo dello spazio colore e altro. Da l\u00ec, modificate l’immagine e la esportate in uno dei diversi formati di file (di cui parleremo pi\u00f9 avanti):<\/p>\n![\"Foto](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/editing-software.png\")
Un esempio di modifica di un file RAW in Capture One.<\/figcaption><\/figure>\nCi sono alcuni elementi diversi che compongono un’immagine digitale standard:<\/p>\n
\n- Tipo di file (File type):<\/b> A seconda del tipo di file, cambia la qualit\u00e0 che pu\u00f2 essere adatta o meno alla vostra immagine finale. La chiave \u00e8 scegliere il tipo di file pi\u00f9 adatto all’applicazione.<\/li>\n
- Risoluzione (Resolution):<\/b> Lo vedrete spesso espresso come megapixel (MP), ma userete anche pixel per pollice (PPI) o punti per pollice (DPI). Risoluzioni pi\u00f9 alte offrono una maggiore qualit\u00e0, ma aumentano anche la dimensione iniziale del file.<\/li>\n
- Profondit\u00e0 di bit (Bit depth):<\/b> Questo aspetto determina le informazioni di colore in un’immagine. Una bassa profondit\u00e0 di bit render\u00e0 solo pochi colori, mentre un’alta profondit\u00e0 di bit potrebbe potenzialmente rendere milioni di colori contemporaneamente. Generalmente, pi\u00f9 alto \u00e8 meglio \u00e8.<\/li>\n
- Dimensioni (Dimensions):<\/b> Questo \u00e8 lo spazio fisico che un’immagine occupa. Per esempio, 1.000 pixel x 500 pixel potrebbe definire la dimensione totale di un’immagine.<\/li>\n
- Spazio colore (Color space):<\/b> \u00c8 un algoritmo che determina la visualizzazione dei colori. Ogni spazio colore \u00e8 impostato in modo diverso e spesso si riduce alle preferenze di chi ha scattato la foto.<\/li>\n<\/ul>\n
Questi elementi si combinano per fornire un’immagine finale di qualit\u00e0 variabile. Per esempio, una grande fotografia JPEG ad alta risoluzione e ad alta profondit\u00e0 di bit offrir\u00e0 una qualit\u00e0 e una nitidezza suprema:<\/p>\n![\"Foto](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/high-quality-image.jpg\")
Un’immagine di alta qualit\u00e0.<\/figcaption><\/figure>\nAl contrario, anche un’immagine con grandi dimensioni e la capacit\u00e0 di visualizzare molti colori pu\u00f2 sembrare povera a una bassa risoluzione:<\/p>\n![\"Foto](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/low-quality-image.jpg\")
Un’immagine con bassa qualit\u00e0.<\/figcaption><\/figure>\nQuesto equilibrio \u00e8 il modo in cui sviluppate l’immagine principale prima di applicare la compressione. Tuttavia, il formato che usate per l’immagine ha un grande impatto nella qualit\u00e0 finale.<\/p>\n
Come Funziona l’Ottimizzazione delle Immagini Web<\/h2>\n
Poich\u00e9 in generale la compressione delle immagini \u00e8 la stessa, potete applicare delle regole standard al modo in cui ottimizzate le immagini per il web.<\/p>\n
Copriamo molti di questi concetti altrove sul blog di Kinsta<\/a>, ma vale la pena fare un rapido riassunto come riferimento:<\/p>\n\n- Usate una risoluzione di 72 PPI, poich\u00e9 questo \u00e8 lo standard per il web. Potete usare un PPI\/DPI pi\u00f9 alto per ragioni di archiviazione, ma diamo per scontato che stiate pubblicando sul web.<\/li>\n
- Impostate il “bordo lungo” dell’immagine a 2048px, poich\u00e9 \u00e8 ottimale per molte applicazioni diverse.<\/li>\n
- Usate una profondit\u00e0 di colore a 8-bit se ne avete la possibilit\u00e0.<\/li>\n
- Eseguite un’immagine con uno strumento di compressione e ottimizzazione prima di pubblicarla.<\/li>\n<\/ul>\n
\u00c8 un formato semplice che pu\u00f2 darvi risultati coerenti, anche se la compressione e l’ottimizzazione sono due aspetti che approfondiremo nel resto di questo articolo.<\/p>\n
A tal fine, diamo un’occhiata ai benefici e agli svantaggi della compressione lossy vs. lossless.<\/p>\n
In Che Modo la Compressione delle Immagini Pu\u00f2 Aiutare le Vostre Immagini Web<\/h3>\n
In termini generali, la “compressione” comprime il minimo e il massimo pi\u00f9 vicini. Per esempio, la compressione alza il volume pi\u00f9 basso nella musica e riduce quello pi\u00f9 alto. Questo rende il livello medio pi\u00f9 alto per l’orecchio.<\/p>\n
Per le immagini, la compressione \u00e8 pi\u00f9 un processo riduttivo. Questo significa che c’\u00e8 una maggiore enfasi nel togliere dati dalla vostra immagine per ridurre la dimensione del file, mantenendo la qualit\u00e0 pi\u00f9 alta possibile.<\/p>\n
Ci sono molti diversi algoritmi proprietari che aiutano a ridurre le dimensioni dei file immagine. In molti casi, questi sono proprietari di una specifica azienda. Troverete molti standard di compressione “lossy” e “lossless”, ognuno con descrittori unici:<\/p>\n![\"Lossy,](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/compression-formats.png\")
Le opzioni di compressione in ShortPixel.<\/figcaption><\/figure>\nDetto questo, ci sono molti benefici nell’applicare la compressione delle immagini e non sono esclusivi di un particolare formato:<\/p>\n
\n- Potete mantenere basse le dimensioni dei file, il che migliora le prestazioni del vostro sito.<\/li>\n
- Per estensione, il server del vostro sito avr\u00e0 meno lavoro da fare, con un impatto sulle prestazioni.<\/li>\n
- Le piccole dimensioni dei file aiutano a ridurre le emissioni del server. Cos\u00ec contribuite anche a un futuro sostenibile ed etico.<\/li>\n
- Potete visualizzare una qualit\u00e0 quasi perfetta e comparabile a seconda dell’algoritmo e della qualit\u00e0 di compressione che scegliete.<\/li>\n<\/ul>\n
Proprio come quando volete creare un’immagine da condividere, giocare con i valori di compressione, usare uno strumento specifico e scegliere l’algoritmo corretto sono vitali per trovare risultati che vadano bene per voi.<\/p>\n
Pro e Contro della Compressione Lossy<\/h2>\n
La compressione lossy<\/a> riduce la dimensione del file dell’immagine ed esclude quasi tutti gli altri aspetti. Il modo in cui l’algoritmo funziona \u00e8 quello di rimuovere i dati in modo permanente e questo pu\u00f2 effettivamente avere effetti distruttivi.<\/p>\nAnche se non entreremo troppo nei dettagli, sappiate che alcuni dei dati che la compressione lossy rimuove sono visibili nell’immagine. L’idea \u00e8 quella di offrire la migliore rappresentazione dell’immagine originale di alta qualit\u00e0 con un peso minore, e questo significa che alcuni dati non sopravviveranno alla compressione.<\/p>\n
In generale, ci sono un paio di vantaggi nell’utilizzare la compressione lossy:<\/p>\n
\n- Le dimensioni dei file saranno piccole, in alcuni casi sotto i 10 kilobyte (KB).<\/li>\n
- La perdita di qualit\u00e0 sar\u00e0 accettabile in molti casi, nonostante le modifiche.<\/li>\n<\/ul>\n
Questo ci porta agli aspetti negativi dell’utilizzo della compressione lossy: la qualit\u00e0 dell’immagine si riduce con qualsiasi livello di compressione.<\/p>\n![\"Cursore](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/compression-slider.png\")
Un cursore di compressione per un’immagine JPEG.<\/figcaption><\/figure>\nVedrete che in alcuni casi saranno visibili delle bande di colore, cio\u00e8 i punti in cui le sfumature di colore non rendono nel modo giusto, e una perdita di chiarezza dei bordi. Nelle immagini con meno colori si noter\u00e0 meno, ma la riduzione della chiarezza sar\u00e0 ancora evidente.<\/p>\n
Inoltre, la degradazione dell’immagine \u00e8 una caratteristica permanente del processo di compressione. Questo significa che non c’\u00e8 modo di invertire gli effetti in un secondo momento.<\/p>\n
Nonostante gli svantaggi, la compressione lossy \u00e8 eccellente per il web e per le prestazioni del vostro sito. Le piccole dimensioni dei file non si traducono sempre in immagini sgranate, anche se potete (ovviamente) portare le cose agli estremi:<\/p>\n![\"Foto](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/over-compressed-cat-min.jpg\")
<\/a>Un esempio di un’immagine eccessivamente compressa.<\/figcaption><\/figure>\nTuttavia, la compressione lossy non \u00e8 l’unica opzione. La compressione lossless \u00e8 un’alternativa per chi possiede un sito e vuole dare priorit\u00e0 alla qualit\u00e0.<\/p>\n
Pro e Contro della Compressione Lossless<\/h2>\n
La compressione lossless fa quello che dice il suo nome: comprime il pi\u00f9 possibile la dimensione di un file immagine senza impatti visibili sulla qualit\u00e0. Lo fa rimuovendo i metadati dell’immagine, che possono occupare spazio non necessario:<\/p>\n![\"Immagine](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/image-metadata.png\")
I metadati di un’immagine.<\/figcaption><\/figure>\nL’algoritmo di compressione lossless cerca anche sequenze di pixel che si ripetono, poi codifica una scorciatoia per visualizzarle. Per esempio, prendete la dicitura “Command Line Interface”. Vi capiter\u00e0 di spiegare il suo acronimo una volta, poi userete direttamente “CLI” (o l’acronimo che avete scelto) per velocizzare le cose.<\/p>\n
La compressione lossless funziona allo stesso modo perch\u00e9 crea meno danni al file immagine. Anche se la rimozione dei metadati non sar\u00e0 reversibile, parte della compressione lo sar\u00e0, e questo lo rende un algoritmo flessibile per molti usi.<\/p>\n
I pro dell’utilizzo della compressione lossless ruotano intorno al mantenimento della qualit\u00e0:<\/p>\n
\n- La compressione lossless conserva la maggior parte della qualit\u00e0 di un’immagine rispetto a tutti gli altri algoritmi.<\/li>\n
- La compressione lossless \u00e8 fantastica per scopi di archiviazione. Per esempio, un fotografo pu\u00f2 bilanciare le risorse di archiviazione con un’immagine che preservi la maggior parte dei dati.<\/li>\n
- Lossless \u00e8 l’algoritmo di compressione preferito per le arti visive: fotografia, design grafico, arte digitale e altro. Combinando un algoritmo lossless con la giusta profondit\u00e0 e risoluzione si pu\u00f2 ottenere quasi una copia “uno a uno”.<\/li>\n<\/ul>\n
Tuttavia, c’\u00e8 da notare una cosa su come la compressione lossless serva nicchie specifiche: la gamma di applicazioni \u00e8 piccola. Questo riduce la sua disponibilit\u00e0 complessiva.<\/p>\n
Ecco alcuni altri punti contro la compressione lossless che vale la pena considerare:<\/p>\n
\n- Se un sito web usa molte immagini, la compressione lossless potrebbe non essere ottimale per visualizzarle. Questo perch\u00e9 nella maggior parte dei casi vorrete dare valore a dimensioni di file pi\u00f9 piccole in questo tipo di situazioni.<\/li>\n
- Anche se la compressione riduce le dimensioni dei file, gli algoritmi lossless non alterano i dati dell’immagine quanto quelli lossy. Per questo motivo, potreste vedere solo riduzioni marginali delle dimensioni piuttosto che una riduzione estrema della dimensione del file.<\/li>\n<\/ul>\n
Successivamente, vedremo il modo pi\u00f9 veloce (e potenzialmente migliore) per farlo.<\/p>\n
Come Scegliere tra Lossy vs. Lossless<\/h2>\n
A questo punto, avete capito la differenza tra compressione lossy e lossless. Tuttavia, potreste ancora non sapere qual \u00e8 l’algoritmo migliore da utilizzare sul vostro sito.<\/p>\n
Ci sono due situazioni da considerare:<\/p>\n
\n- Per la maggior parte dei casi d’uso sul web, la compressione lossy \u00e8 accettabile da usare.<\/li>\n
- Se volete visualizzare fotografie o altre opere artistiche, la compressione lossless \u00e8 l\u2019ideale.<\/li>\n<\/ol>\n
Queste considerazioni si basano sull’utilizzo di uno dei formati immagine web standard, come JPEG, PNG o GIF. Tuttavia, le vostre esigenze di compressione possono essere diverse con formati pi\u00f9 moderni come HEIC e WebP.<\/p>\n
Ci spingiamo a dire che a meno che non mostriate fotografie professionali sul vostro sito, la compressione lossy va benissimo come scelta predefinita. WordPress comprime le immagini<\/a> per impostazione predefinita, il che dimostra che la compressione lossy \u00e8 adatta a quasi tutti gli usi.<\/p>\nUsare un Servizio di Compressione Online per Ottimizzare le Immagini<\/h2>\n
Ci sono molti modi per comprimere le vostre immagini prima di mostrarle sul sito. Per esempio, potreste scegliere di applicare la compressione in fase di editing. Questo potrebbe essere comunque un sottoprodotto della conversione dai formati RAW.<\/p>\n
Alcuni host premium come Kinsta offrono persino servizi integrati che possono aiutarvi a ottimizzare automaticamente i file immagine. La funzione di ottimizzazione delle immagini di Kinsta<\/a>, che \u00e8 gratuita per tutti i clienti, crea versioni WebP<\/a> delle vostre immagini, quindi fornisce quelle pi\u00f9 piccole ai vostri visitatori utilizzando il velocissimo CDN<\/a> di Kinsta. \u00c8 possibile scegliere tra compressione lossy e lossless e attivare o disattivare la funzione a piacimento.<\/p>\nOltre agli strumenti integrati, tuttavia, una scelta molto diffusa \u00e8 quella di usare uno dei tanti servizi online. Ognuno di essi offrir\u00e0 una selezione di algoritmi e un’interfaccia utente (UI) esemplare. Inoltre, la maggior parte offre un servizio gratuito, che vi d\u00e0 almeno l\u2019opportunit\u00e0 di provare l’applicazione prima di impegnarvi.<\/p>\n
Parliamo di alcune di queste opzioni nel nostro articolo dedicato all\u2019ottimizzazione delle immagini<\/a>, anche se si tratta di plugin specifici per WordPress che si collegano a un’interfaccia di programmazione delle applicazioni (application programming interface o API). La buona notizia \u00e8 che molti di questi plugin forniscono anche un’interfaccia online. Per esempio, considerate ShortPixel<\/a>:<\/p>\n![\"Homepage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/shortpixel-interface.png\")
L’interfaccia di ShortPixel.<\/figcaption><\/figure>\nQui trascinate le immagini sull’uploader, poi assicuratevi che l’applicazione le comprima e le elabori. Scegliete prima l’algoritmo, poich\u00e9 il processo inizier\u00e0 subito.<\/p>\n
La scelta \u00e8 semplice: due forme di compressione lossy (“Lossy” e “Glossy”) e un’opzione lossless. L’interfaccia di ShortPixel fa un buon lavoro per spiegare la differenza tra ogni algoritmo e potete scaricare le immagini in pochi secondi.<\/p>\n
Differenze tra Lossy vs. Lossless<\/h2>\n
Quando si tratta di qualsiasi compressione di immagini digitali, esistono diversi formati tra cui scegliere. A volte questi avranno altri nomi a seconda di molti fattori. Tuttavia, a un livello base, ne troverete di due tipi:<\/p>\n
- \n
- Compressione Lossy:<\/b> L’obiettivo qui \u00e8 quello di fornire la dimensione di file pi\u00f9 ridotta possibile per un’immagine. Come tale, la qualit\u00e0 dell’immagine \u00e8 spesso in fondo alla lista delle priorit\u00e0.<\/li>\n
- Compressione Lossless:<\/b> Anche con questo formato di compressione la riduzione della dimensione del file \u00e8 consistente, ma l’immagine non soffrir\u00e0 per la manipolazione o per altri problemi.<\/li>\n<\/ul>\n
Nella maggior parte dei casi, la decisione su quale formato usare dipender\u00e0 dal vostro obiettivo finale: volete file minuscoli oppure il vostro obiettivo \u00e8 preservare la qualit\u00e0?<\/p>\n
La compressione lossy rimuove i dati che ritiene non necessari dall’immagine in modo permanente. Usa molte tecniche diverse per raggiungere questo obiettivo, risultando in file di dimensioni molto pi\u00f9 ridotte.<\/p>\n
Anche la compressione lossless rimuove i dati, ma pu\u00f2 ripristinare l’originale se necessario. L’obiettivo \u00e8 quello di mantenere alta la qualit\u00e0, ma ridurre la dimensione del file.<\/p>\n
Ci sono diversi modi per raggiungere questo obiettivo, anche se il risultato \u00e8 spesso lo stesso. Per scoprire l’opzione giusta per le vostre esigenze, facciamo prima un passo indietro e rivediamo le basi delle immagini e della compressione in generale.<\/p>\n\n
Elementi di un’Immagine Digitale<\/h2>\n
Come succede per il software e lo sviluppo web, c’\u00e8 spesso uno “stack” per portare un’immagine dalla fotocamera al web.<\/p>\n
Un’immagine inizia come dato “grezzo”, e per questo in inglese si parla di \u201craw data\u201d (dati grezzi) e file RAW. \u00c8 come il codice di un’applicazione: gli snippet, le linee e i valori si traducono in sfondi con colori, segnaposti per le immagini, elementi dinamici e altro.<\/p>\n
Per un’immagine, il file RAW contiene una rappresentazione dell’immagine leggermente diversa in base al produttore della fotocamera, al software di editing, all’algoritmo dello spazio colore e altro. Da l\u00ec, modificate l’immagine e la esportate in uno dei diversi formati di file (di cui parleremo pi\u00f9 avanti):<\/p>\n
Un esempio di modifica di un file RAW in Capture One.<\/figcaption><\/figure>\n Ci sono alcuni elementi diversi che compongono un’immagine digitale standard:<\/p>\n
- \n
- Tipo di file (File type):<\/b> A seconda del tipo di file, cambia la qualit\u00e0 che pu\u00f2 essere adatta o meno alla vostra immagine finale. La chiave \u00e8 scegliere il tipo di file pi\u00f9 adatto all’applicazione.<\/li>\n
- Risoluzione (Resolution):<\/b> Lo vedrete spesso espresso come megapixel (MP), ma userete anche pixel per pollice (PPI) o punti per pollice (DPI). Risoluzioni pi\u00f9 alte offrono una maggiore qualit\u00e0, ma aumentano anche la dimensione iniziale del file.<\/li>\n
- Profondit\u00e0 di bit (Bit depth):<\/b> Questo aspetto determina le informazioni di colore in un’immagine. Una bassa profondit\u00e0 di bit render\u00e0 solo pochi colori, mentre un’alta profondit\u00e0 di bit potrebbe potenzialmente rendere milioni di colori contemporaneamente. Generalmente, pi\u00f9 alto \u00e8 meglio \u00e8.<\/li>\n
- Dimensioni (Dimensions):<\/b> Questo \u00e8 lo spazio fisico che un’immagine occupa. Per esempio, 1.000 pixel x 500 pixel potrebbe definire la dimensione totale di un’immagine.<\/li>\n
- Spazio colore (Color space):<\/b> \u00c8 un algoritmo che determina la visualizzazione dei colori. Ogni spazio colore \u00e8 impostato in modo diverso e spesso si riduce alle preferenze di chi ha scattato la foto.<\/li>\n<\/ul>\n
Questi elementi si combinano per fornire un’immagine finale di qualit\u00e0 variabile. Per esempio, una grande fotografia JPEG ad alta risoluzione e ad alta profondit\u00e0 di bit offrir\u00e0 una qualit\u00e0 e una nitidezza suprema:<\/p>\n
Un’immagine di alta qualit\u00e0.<\/figcaption><\/figure>\n Al contrario, anche un’immagine con grandi dimensioni e la capacit\u00e0 di visualizzare molti colori pu\u00f2 sembrare povera a una bassa risoluzione:<\/p>\n
Un’immagine con bassa qualit\u00e0.<\/figcaption><\/figure>\n Questo equilibrio \u00e8 il modo in cui sviluppate l’immagine principale prima di applicare la compressione. Tuttavia, il formato che usate per l’immagine ha un grande impatto nella qualit\u00e0 finale.<\/p>\n
Come Funziona l’Ottimizzazione delle Immagini Web<\/h2>\n
Poich\u00e9 in generale la compressione delle immagini \u00e8 la stessa, potete applicare delle regole standard al modo in cui ottimizzate le immagini per il web.<\/p>\n
Copriamo molti di questi concetti altrove sul blog di Kinsta<\/a>, ma vale la pena fare un rapido riassunto come riferimento:<\/p>\n
- \n
- Usate una risoluzione di 72 PPI, poich\u00e9 questo \u00e8 lo standard per il web. Potete usare un PPI\/DPI pi\u00f9 alto per ragioni di archiviazione, ma diamo per scontato che stiate pubblicando sul web.<\/li>\n
- Impostate il “bordo lungo” dell’immagine a 2048px, poich\u00e9 \u00e8 ottimale per molte applicazioni diverse.<\/li>\n
- Usate una profondit\u00e0 di colore a 8-bit se ne avete la possibilit\u00e0.<\/li>\n
- Eseguite un’immagine con uno strumento di compressione e ottimizzazione prima di pubblicarla.<\/li>\n<\/ul>\n
\u00c8 un formato semplice che pu\u00f2 darvi risultati coerenti, anche se la compressione e l’ottimizzazione sono due aspetti che approfondiremo nel resto di questo articolo.<\/p>\n
A tal fine, diamo un’occhiata ai benefici e agli svantaggi della compressione lossy vs. lossless.<\/p>\n
In Che Modo la Compressione delle Immagini Pu\u00f2 Aiutare le Vostre Immagini Web<\/h3>\n
In termini generali, la “compressione” comprime il minimo e il massimo pi\u00f9 vicini. Per esempio, la compressione alza il volume pi\u00f9 basso nella musica e riduce quello pi\u00f9 alto. Questo rende il livello medio pi\u00f9 alto per l’orecchio.<\/p>\n
Per le immagini, la compressione \u00e8 pi\u00f9 un processo riduttivo. Questo significa che c’\u00e8 una maggiore enfasi nel togliere dati dalla vostra immagine per ridurre la dimensione del file, mantenendo la qualit\u00e0 pi\u00f9 alta possibile.<\/p>\n
Ci sono molti diversi algoritmi proprietari che aiutano a ridurre le dimensioni dei file immagine. In molti casi, questi sono proprietari di una specifica azienda. Troverete molti standard di compressione “lossy” e “lossless”, ognuno con descrittori unici:<\/p>\n
Le opzioni di compressione in ShortPixel.<\/figcaption><\/figure>\n Detto questo, ci sono molti benefici nell’applicare la compressione delle immagini e non sono esclusivi di un particolare formato:<\/p>\n
- \n
- Potete mantenere basse le dimensioni dei file, il che migliora le prestazioni del vostro sito.<\/li>\n
- Per estensione, il server del vostro sito avr\u00e0 meno lavoro da fare, con un impatto sulle prestazioni.<\/li>\n
- Le piccole dimensioni dei file aiutano a ridurre le emissioni del server. Cos\u00ec contribuite anche a un futuro sostenibile ed etico.<\/li>\n
- Potete visualizzare una qualit\u00e0 quasi perfetta e comparabile a seconda dell’algoritmo e della qualit\u00e0 di compressione che scegliete.<\/li>\n<\/ul>\n
Proprio come quando volete creare un’immagine da condividere, giocare con i valori di compressione, usare uno strumento specifico e scegliere l’algoritmo corretto sono vitali per trovare risultati che vadano bene per voi.<\/p>\n
Pro e Contro della Compressione Lossy<\/h2>\n
La compressione lossy<\/a> riduce la dimensione del file dell’immagine ed esclude quasi tutti gli altri aspetti. Il modo in cui l’algoritmo funziona \u00e8 quello di rimuovere i dati in modo permanente e questo pu\u00f2 effettivamente avere effetti distruttivi.<\/p>\n
Anche se non entreremo troppo nei dettagli, sappiate che alcuni dei dati che la compressione lossy rimuove sono visibili nell’immagine. L’idea \u00e8 quella di offrire la migliore rappresentazione dell’immagine originale di alta qualit\u00e0 con un peso minore, e questo significa che alcuni dati non sopravviveranno alla compressione.<\/p>\n
In generale, ci sono un paio di vantaggi nell’utilizzare la compressione lossy:<\/p>\n
- \n
- Le dimensioni dei file saranno piccole, in alcuni casi sotto i 10 kilobyte (KB).<\/li>\n
- La perdita di qualit\u00e0 sar\u00e0 accettabile in molti casi, nonostante le modifiche.<\/li>\n<\/ul>\n
Questo ci porta agli aspetti negativi dell’utilizzo della compressione lossy: la qualit\u00e0 dell’immagine si riduce con qualsiasi livello di compressione.<\/p>\n
Un cursore di compressione per un’immagine JPEG.<\/figcaption><\/figure>\n Vedrete che in alcuni casi saranno visibili delle bande di colore, cio\u00e8 i punti in cui le sfumature di colore non rendono nel modo giusto, e una perdita di chiarezza dei bordi. Nelle immagini con meno colori si noter\u00e0 meno, ma la riduzione della chiarezza sar\u00e0 ancora evidente.<\/p>\n
Inoltre, la degradazione dell’immagine \u00e8 una caratteristica permanente del processo di compressione. Questo significa che non c’\u00e8 modo di invertire gli effetti in un secondo momento.<\/p>\n
Nonostante gli svantaggi, la compressione lossy \u00e8 eccellente per il web e per le prestazioni del vostro sito. Le piccole dimensioni dei file non si traducono sempre in immagini sgranate, anche se potete (ovviamente) portare le cose agli estremi:<\/p>\n
<\/a>Un esempio di un’immagine eccessivamente compressa.<\/figcaption><\/figure>\n Tuttavia, la compressione lossy non \u00e8 l’unica opzione. La compressione lossless \u00e8 un’alternativa per chi possiede un sito e vuole dare priorit\u00e0 alla qualit\u00e0.<\/p>\n
Pro e Contro della Compressione Lossless<\/h2>\n
La compressione lossless fa quello che dice il suo nome: comprime il pi\u00f9 possibile la dimensione di un file immagine senza impatti visibili sulla qualit\u00e0. Lo fa rimuovendo i metadati dell’immagine, che possono occupare spazio non necessario:<\/p>\n
I metadati di un’immagine.<\/figcaption><\/figure>\n L’algoritmo di compressione lossless cerca anche sequenze di pixel che si ripetono, poi codifica una scorciatoia per visualizzarle. Per esempio, prendete la dicitura “Command Line Interface”. Vi capiter\u00e0 di spiegare il suo acronimo una volta, poi userete direttamente “CLI” (o l’acronimo che avete scelto) per velocizzare le cose.<\/p>\n
La compressione lossless funziona allo stesso modo perch\u00e9 crea meno danni al file immagine. Anche se la rimozione dei metadati non sar\u00e0 reversibile, parte della compressione lo sar\u00e0, e questo lo rende un algoritmo flessibile per molti usi.<\/p>\n
I pro dell’utilizzo della compressione lossless ruotano intorno al mantenimento della qualit\u00e0:<\/p>\n
- \n
- La compressione lossless conserva la maggior parte della qualit\u00e0 di un’immagine rispetto a tutti gli altri algoritmi.<\/li>\n
- La compressione lossless \u00e8 fantastica per scopi di archiviazione. Per esempio, un fotografo pu\u00f2 bilanciare le risorse di archiviazione con un’immagine che preservi la maggior parte dei dati.<\/li>\n
- Lossless \u00e8 l’algoritmo di compressione preferito per le arti visive: fotografia, design grafico, arte digitale e altro. Combinando un algoritmo lossless con la giusta profondit\u00e0 e risoluzione si pu\u00f2 ottenere quasi una copia “uno a uno”.<\/li>\n<\/ul>\n
Tuttavia, c’\u00e8 da notare una cosa su come la compressione lossless serva nicchie specifiche: la gamma di applicazioni \u00e8 piccola. Questo riduce la sua disponibilit\u00e0 complessiva.<\/p>\n
Ecco alcuni altri punti contro la compressione lossless che vale la pena considerare:<\/p>\n
- \n
- Se un sito web usa molte immagini, la compressione lossless potrebbe non essere ottimale per visualizzarle. Questo perch\u00e9 nella maggior parte dei casi vorrete dare valore a dimensioni di file pi\u00f9 piccole in questo tipo di situazioni.<\/li>\n
- Anche se la compressione riduce le dimensioni dei file, gli algoritmi lossless non alterano i dati dell’immagine quanto quelli lossy. Per questo motivo, potreste vedere solo riduzioni marginali delle dimensioni piuttosto che una riduzione estrema della dimensione del file.<\/li>\n<\/ul>\n
Successivamente, vedremo il modo pi\u00f9 veloce (e potenzialmente migliore) per farlo.<\/p>\n
Come Scegliere tra Lossy vs. Lossless<\/h2>\n
A questo punto, avete capito la differenza tra compressione lossy e lossless. Tuttavia, potreste ancora non sapere qual \u00e8 l’algoritmo migliore da utilizzare sul vostro sito.<\/p>\n
Ci sono due situazioni da considerare:<\/p>\n
- \n
- Per la maggior parte dei casi d’uso sul web, la compressione lossy \u00e8 accettabile da usare.<\/li>\n
- Se volete visualizzare fotografie o altre opere artistiche, la compressione lossless \u00e8 l\u2019ideale.<\/li>\n<\/ol>\n
Queste considerazioni si basano sull’utilizzo di uno dei formati immagine web standard, come JPEG, PNG o GIF. Tuttavia, le vostre esigenze di compressione possono essere diverse con formati pi\u00f9 moderni come HEIC e WebP.<\/p>\n
Ci spingiamo a dire che a meno che non mostriate fotografie professionali sul vostro sito, la compressione lossy va benissimo come scelta predefinita. WordPress comprime le immagini<\/a> per impostazione predefinita, il che dimostra che la compressione lossy \u00e8 adatta a quasi tutti gli usi.<\/p>\n
Usare un Servizio di Compressione Online per Ottimizzare le Immagini<\/h2>\n
Ci sono molti modi per comprimere le vostre immagini prima di mostrarle sul sito. Per esempio, potreste scegliere di applicare la compressione in fase di editing. Questo potrebbe essere comunque un sottoprodotto della conversione dai formati RAW.<\/p>\n
Alcuni host premium come Kinsta offrono persino servizi integrati che possono aiutarvi a ottimizzare automaticamente i file immagine. La funzione di ottimizzazione delle immagini di Kinsta<\/a>, che \u00e8 gratuita per tutti i clienti, crea versioni WebP<\/a> delle vostre immagini, quindi fornisce quelle pi\u00f9 piccole ai vostri visitatori utilizzando il velocissimo CDN<\/a> di Kinsta. \u00c8 possibile scegliere tra compressione lossy e lossless e attivare o disattivare la funzione a piacimento.<\/p>\n
Oltre agli strumenti integrati, tuttavia, una scelta molto diffusa \u00e8 quella di usare uno dei tanti servizi online. Ognuno di essi offrir\u00e0 una selezione di algoritmi e un’interfaccia utente (UI) esemplare. Inoltre, la maggior parte offre un servizio gratuito, che vi d\u00e0 almeno l\u2019opportunit\u00e0 di provare l’applicazione prima di impegnarvi.<\/p>\n
Parliamo di alcune di queste opzioni nel nostro articolo dedicato all\u2019ottimizzazione delle immagini<\/a>, anche se si tratta di plugin specifici per WordPress che si collegano a un’interfaccia di programmazione delle applicazioni (application programming interface o API). La buona notizia \u00e8 che molti di questi plugin forniscono anche un’interfaccia online. Per esempio, considerate ShortPixel<\/a>:<\/p>\n
L’interfaccia di ShortPixel.<\/figcaption><\/figure>\n Qui trascinate le immagini sull’uploader, poi assicuratevi che l’applicazione le comprima e le elabori. Scegliete prima l’algoritmo, poich\u00e9 il processo inizier\u00e0 subito.<\/p>\n
La scelta \u00e8 semplice: due forme di compressione lossy (“Lossy” e “Glossy”) e un’opzione lossless. L’interfaccia di ShortPixel fa un buon lavoro per spiegare la differenza tra ogni algoritmo e potete scaricare le immagini in pochi secondi.<\/p>\n
- Risoluzione (Resolution):<\/b> Lo vedrete spesso espresso come megapixel (MP), ma userete anche pixel per pollice (PPI) o punti per pollice (DPI). Risoluzioni pi\u00f9 alte offrono una maggiore qualit\u00e0, ma aumentano anche la dimensione iniziale del file.<\/li>\n
- Compressione Lossless:<\/b> Anche con questo formato di compressione la riduzione della dimensione del file \u00e8 consistente, ma l’immagine non soffrir\u00e0 per la manipolazione o per altri problemi.<\/li>\n<\/ul>\n
![\"L'interfaccia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/imagify-interface.png\")
![\"L'interfaccia](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/kraken-interface.png\")
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/11\/kraken-expert-mode.png\")