Le immagini digitali sono una parte intrinseca del web ed è difficile creare qualsiasi contenuto senza usare nessun contenuto media. Già una semplice immagine statica è un modo fantastico per offrire un contesto extra al vostro contenuto scritto.

Tuttavia, se non ottimizzata un’immagine può assumere dimensioni enormi. La scelta tra compressione lossy vs. lossless è una piuttosto comune perché entrambe possono ridurre la dimensione di un’immagine, anche se ci sono dei compromessi di qualità da considerare.

Avrete quasi sempre bisogno di applicare una certa compressione a un’immagine. Questo mantiene la qualità a un livello che voi reputate accettabile e allo stesso tempo mantiene le dimensioni del file basse. La scelta del giusto livello di compressione dipenderà dai vostri obiettivi e requisiti finali.

Per questo articolo, esamineremo la compressione lossy vs. lossless. Nel corso del post parleremo del processo che un’immagine impiega per essere “in forma”, di cosa sia la compressione e di molti altri aspetti dell’ottimizzazione delle vostre immagini.

Guarda la Nostra Video Guida alla Compressione Lossy vs Lossless

Differenze tra Lossy vs. Lossless

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:

  • Compressione Lossy: L’obiettivo qui è quello di fornire la dimensione di file più ridotta possibile per un’immagine. Come tale, la qualità dell’immagine è spesso in fondo alla lista delle priorità.
  • Compressione Lossless: Anche con questo formato di compressione la riduzione della dimensione del file è consistente, ma l’immagine non soffrirà per la manipolazione o per altri problemi.

Nella maggior parte dei casi, la decisione su quale formato usare dipenderà dal vostro obiettivo finale: volete file minuscoli oppure il vostro obiettivo è preservare la qualità?

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ù ridotte.

Anche la compressione lossless rimuove i dati, ma può ripristinare l’originale se necessario. L’obiettivo è quello di mantenere alta la qualità, ma ridurre la dimensione del file.

Ci sono diversi modi per raggiungere questo obiettivo, anche se il risultato è 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.

Elementi di un’Immagine Digitale

Come succede per il software e lo sviluppo web, c’è spesso uno “stack” per portare un’immagine dalla fotocamera al web.

Un’immagine inizia come dato “grezzo”, e per questo in inglese si parla di “raw data” (dati grezzi) e file RAW. È 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.

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ì, modificate l’immagine e la esportate in uno dei diversi formati di file (di cui parleremo più avanti):

Foto di una spiaggia al tramonto e due pali conficcati nella sabbia: il file RAW sta per essere modificato in Capture One.
Un esempio di modifica di un file RAW in Capture One.

Ci sono alcuni elementi diversi che compongono un’immagine digitale standard:

  • Tipo di file (File type): A seconda del tipo di file, cambia la qualità che può essere adatta o meno alla vostra immagine finale. La chiave è scegliere il tipo di file più adatto all’applicazione.
  • Risoluzione (Resolution): Lo vedrete spesso espresso come megapixel (MP), ma userete anche pixel per pollice (PPI) o punti per pollice (DPI). Risoluzioni più alte offrono una maggiore qualità, ma aumentano anche la dimensione iniziale del file.
  • Profondità di bit (Bit depth): Questo aspetto determina le informazioni di colore in un’immagine. Una bassa profondità di bit renderà solo pochi colori, mentre un’alta profondità di bit potrebbe potenzialmente rendere milioni di colori contemporaneamente. Generalmente, più alto è meglio è.
  • Dimensioni (Dimensions): Questo è lo spazio fisico che un’immagine occupa. Per esempio, 1.000 pixel x 500 pixel potrebbe definire la dimensione totale di un’immagine.
  • Spazio colore (Color space): È un algoritmo che determina la visualizzazione dei colori. Ogni spazio colore è impostato in modo diverso e spesso si riduce alle preferenze di chi ha scattato la foto.

Questi elementi si combinano per fornire un’immagine finale di qualità variabile. Per esempio, una grande fotografia JPEG ad alta risoluzione e ad alta profondità di bit offrirà una qualità e una nitidezza suprema:

Foto di alta qualità con una spiaggia al tramonto e due pali conficcati nella sabbia.
Un’immagine di alta qualità.

Al contrario, anche un’immagine con grandi dimensioni e la capacità di visualizzare molti colori può sembrare povera a una bassa risoluzione:

Foto di bassa qualità con una spiaggia al tramonto e due pali conficcati nella sabbia.
Un’immagine con bassa qualità.

Questo equilibrio è 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à finale.

Come Funziona l’Ottimizzazione delle Immagini Web

Poiché in generale la compressione delle immagini è la stessa, potete applicare delle regole standard al modo in cui ottimizzate le immagini per il web.

Copriamo molti di questi concetti altrove sul blog di Kinsta, ma vale la pena fare un rapido riassunto come riferimento:

  • Usate una risoluzione di 72 PPI, poiché questo è lo standard per il web. Potete usare un PPI/DPI più alto per ragioni di archiviazione, ma diamo per scontato che stiate pubblicando sul web.
  • Impostate il “bordo lungo” dell’immagine a 2048px, poiché è ottimale per molte applicazioni diverse.
  • Usate una profondità di colore a 8-bit se ne avete la possibilità.
  • Eseguite un’immagine con uno strumento di compressione e ottimizzazione prima di pubblicarla.

È un formato semplice che può darvi risultati coerenti, anche se la compressione e l’ottimizzazione sono due aspetti che approfondiremo nel resto di questo articolo.

A tal fine, diamo un’occhiata ai benefici e agli svantaggi della compressione lossy vs. lossless.

In Che Modo la Compressione delle Immagini Può Aiutare le Vostre Immagini Web

In termini generali, la “compressione” comprime il minimo e il massimo più vicini. Per esempio, la compressione alza il volume più basso nella musica e riduce quello più alto. Questo rende il livello medio più alto per l’orecchio.

Per le immagini, la compressione è più un processo riduttivo. Questo significa che c’è una maggiore enfasi nel togliere dati dalla vostra immagine per ridurre la dimensione del file, mantenendo la qualità più alta possibile.

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:

Lossy, glossy e lossless: le opzioni di compressione in ShortPixel.
Le opzioni di compressione in ShortPixel.

Detto questo, ci sono molti benefici nell’applicare la compressione delle immagini e non sono esclusivi di un particolare formato:

  • Potete mantenere basse le dimensioni dei file, il che migliora le prestazioni del vostro sito.
  • Per estensione, il server del vostro sito avrà meno lavoro da fare, con un impatto sulle prestazioni.
  • Le piccole dimensioni dei file aiutano a ridurre le emissioni del server. Così contribuite anche a un futuro sostenibile ed etico.
  • Potete visualizzare una qualità quasi perfetta e comparabile a seconda dell’algoritmo e della qualità di compressione che scegliete.

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.

Pro e Contro della Compressione Lossy

La compressione lossy riduce la dimensione del file dell’immagine ed esclude quasi tutti gli altri aspetti. Il modo in cui l’algoritmo funziona è quello di rimuovere i dati in modo permanente e questo può effettivamente avere effetti distruttivi.

Anche se non entreremo troppo nei dettagli, sappiate che alcuni dei dati che la compressione lossy rimuove sono visibili nell’immagine. L’idea è quella di offrire la migliore rappresentazione dell’immagine originale di alta qualità con un peso minore, e questo significa che alcuni dati non sopravviveranno alla compressione.

In generale, ci sono un paio di vantaggi nell’utilizzare la compressione lossy:

  • Le dimensioni dei file saranno piccole, in alcuni casi sotto i 10 kilobyte (KB).
  • La perdita di qualità sarà accettabile in molti casi, nonostante le modifiche.

Questo ci porta agli aspetti negativi dell’utilizzo della compressione lossy: la qualità dell’immagine si riduce con qualsiasi livello di compressione.

Cursore con cui cambiare la compressione di un'immagine JPEG.
Un cursore di compressione per un’immagine JPEG.

Vedrete che in alcuni casi saranno visibili delle bande di colore, cioè 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à meno, ma la riduzione della chiarezza sarà ancora evidente.

Inoltre, la degradazione dell’immagine è una caratteristica permanente del processo di compressione. Questo significa che non c’è modo di invertire gli effetti in un secondo momento.

Nonostante gli svantaggi, la compressione lossy è 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:

Foto di un gatto di peluche eccessivamente compressa e pixelata.
Un esempio di un’immagine eccessivamente compressa.

Tuttavia, la compressione lossy non è l’unica opzione. La compressione lossless è un’alternativa per chi possiede un sito e vuole dare priorità alla qualità.

Pro e Contro della Compressione Lossless

La compressione lossless fa quello che dice il suo nome: comprime il più possibile la dimensione di un file immagine senza impatti visibili sulla qualità. Lo fa rimuovendo i metadati dell’immagine, che possono occupare spazio non necessario:

Immagine di uno scoiattolo sul prato e box con i metadati dell’immagine.
I metadati di un’immagine.

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à di spiegare il suo acronimo una volta, poi userete direttamente “CLI” (o l’acronimo che avete scelto) per velocizzare le cose.

La compressione lossless funziona allo stesso modo perché crea meno danni al file immagine. Anche se la rimozione dei metadati non sarà reversibile, parte della compressione lo sarà, e questo lo rende un algoritmo flessibile per molti usi.

I pro dell’utilizzo della compressione lossless ruotano intorno al mantenimento della qualità:

  • La compressione lossless conserva la maggior parte della qualità di un’immagine rispetto a tutti gli altri algoritmi.
  • La compressione lossless è fantastica per scopi di archiviazione. Per esempio, un fotografo può bilanciare le risorse di archiviazione con un’immagine che preservi la maggior parte dei dati.
  • Lossless è l’algoritmo di compressione preferito per le arti visive: fotografia, design grafico, arte digitale e altro. Combinando un algoritmo lossless con la giusta profondità e risoluzione si può ottenere quasi una copia “uno a uno”.

Tuttavia, c’è da notare una cosa su come la compressione lossless serva nicchie specifiche: la gamma di applicazioni è piccola. Questo riduce la sua disponibilità complessiva.

Ecco alcuni altri punti contro la compressione lossless che vale la pena considerare:

  • Se un sito web usa molte immagini, la compressione lossless potrebbe non essere ottimale per visualizzarle. Questo perché nella maggior parte dei casi vorrete dare valore a dimensioni di file più piccole in questo tipo di situazioni.
  • 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.

Successivamente, vedremo il modo più veloce (e potenzialmente migliore) per farlo.

Come Scegliere tra Lossy vs. Lossless

A questo punto, avete capito la differenza tra compressione lossy e lossless. Tuttavia, potreste ancora non sapere qual è l’algoritmo migliore da utilizzare sul vostro sito.

Ci sono due situazioni da considerare:

  1. Per la maggior parte dei casi d’uso sul web, la compressione lossy è accettabile da usare.
  2. Se volete visualizzare fotografie o altre opere artistiche, la compressione lossless è l’ideale.

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ù moderni come HEIC e WebP.

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 per impostazione predefinita, il che dimostra che la compressione lossy è adatta a quasi tutti gli usi.

Usare un Servizio di Compressione Online per Ottimizzare le Immagini

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.

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, che è gratuita per tutti i clienti, crea versioni WebP delle vostre immagini, quindi fornisce quelle più piccole ai vostri visitatori utilizzando il velocissimo CDN di Kinsta. È possibile scegliere tra compressione lossy e lossless e attivare o disattivare la funzione a piacimento.

Oltre agli strumenti integrati, tuttavia, una scelta molto diffusa è quella di usare uno dei tanti servizi online. Ognuno di essi offrirà una selezione di algoritmi e un’interfaccia utente (UI) esemplare. Inoltre, la maggior parte offre un servizio gratuito, che vi dà almeno l’opportunità di provare l’applicazione prima di impegnarvi.

Parliamo di alcune di queste opzioni nel nostro articolo dedicato all’ottimizzazione delle immagini, 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 è che molti di questi plugin forniscono anche un’interfaccia online. Per esempio, considerate ShortPixel:

Homepage di ShortPixel con il motto Online Image Compression & Optimization
L’interfaccia di ShortPixel.

Qui trascinate le immagini sull’uploader, poi assicuratevi che l’applicazione le comprima e le elabori. Scegliete prima l’algoritmo, poiché il processo inizierà subito.

La scelta è 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.

Anche se entrambi possono soddisfare le vostre richieste, l’interfaccia di Imagify sembra più elegante e professionale di quella di ShortPixel. Ci sono anche qui tre “livelli di compressione”: Normale, Aggressivo e Ultra.

L'interfaccia di Imagify con i tre livelli di compressione
L’interfaccia di Imagify.

La leggera differenza qui è che Imagify inizia con una compressione lossless e arriva fino a un algoritmo lossy con una manipolazione piuttosto pesante. Tuttavia, ci sono un paio di altre opzioni che non troverete in altre soluzioni.

Per cominciare, potete mantenere intatti i dati EXIF della vostra immagine e persino ridimensionarli dopo la conversione. Questo è inestimabile a volte, specialmente se volete applicare un livello di compressione che potrebbe altrimenti rimuovere i dati EXIF o limitare il modo in cui ridimensionare un’immagine.

Proprio come il suo mitico omonimo, Kraken può manipolare le vostre immagini e applicare vari tipi di compressione. La maggior parte degli utenti opterà per i tipi Lossy o Lossless.

L'interfaccia di Kraken
L’interfaccia di Kraken.

Esista anche la modalità Expert:

Le opzioni della modalità Expert di Kraken.
Le opzioni della modalità Expert di Kraken.

Questo vi permette di regolare la compressione in base alle vostre esigenze, tra le altre opzioni. Per esempio, potete regolare i livelli di compressione JPEG e PNG, scegliere di preservare i metadati dell’immagine e persino lavorare con il sottocampionamento croma per cambiare ulteriormente i colori.

Riepilogo

Le immagini possono sembrare un aspetto semplice del vostro sito: prendete un file, lo caricate su WordPress, poi aggiungete un blocco immagine per visualizzarlo.

In realtà, il processo di preparazione di un’immagine per il web è molto più complesso di quanto si immagini. Il formato di compressione che scegliete può avere un impatto sulla dimensione del file, sulla qualità dell’immagine e altro ancora.

In questo articolo abbiamo esaminato la compressione lossy vs. lossless e abbiamo riassunto quale dovreste scegliere. Nonostante il difficile rapporto tra qualità e dimensione, la compressione lossy è perfetta per la maggior parte dei casi d’uso sul web. Coloro che lavorano con la fotografia professionale o che per qualsiasi altra ragione devono modificare la qualità delle immagini, vorranno usare la compressione lossless, anche se ci sono meno benefici dal punto di vista della dimensione del file.

Da che parte state nel dibattito tra compressione lossy e lossless? Fateci sapere cosa ne pensate nella sezione commenti qui sotto!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.