Compressione Lossy o Lossless delle immagini: quale scegliere per velocizzare il sito web?

Postato in data 25 Settembre 2023 da Riccardo Esposito

La differenza tra compressione Lossy o Lossless è la perdita o meno di informazioni per ridurre il peso. Ovvero una condizione essenziale per avere pagine leggere, velocizzare il caricamento del contenuto sul browser e rispettare uno dei criteri fondamentali dell’usabilità e dell’accessibilità.

Compressione Lossy o Lossless

Ma anche dell’ottimizzazione rispetto ai Core Web Vitals. Detto in altre parole, se vuoi ridurre i tempi di upload del tuo portale devi intervenire in modo consistente sul peso delle immagini e valutare se scegliere una compressione Lossy o Lossless per ridurre i Kb in modo più o meno consistente.

Certo, non basta questo: se vuoi ottenere risultati importanti devi lavorare sull’infrastruttura del sito web e acquistare un hosting performante come quello di Serverplan, con cache già installata e dischi SSD, PHP aggiornato, Keep Alive e HTTP/2. Vuoi maggiori informazioni su questo tema?

Hosting WordPress preinstallato e gestito

  • WordPress installato
  • Cache configurata
  • Aggiornamenti automatici
  • Assistenza H24/365

Come puoi immaginare, ogni tassello è importante quando cerchi le performance migliori ma se non vuoi rinunciare alla qualità devi anche trovare il giusto compromesso. Per i contenuti visual questo significa saper individuare la soluzione tra compressione dati Lossy e Lossless.

L’importanza di una buona compressione immagine

Il primo punto da affrontare in questa guida: quali sono i parametri che ti consentono di ottimizzare un’immagine sul web? Diciamo che per avere una pagina web performante è utile lavorare su diversi fronti. In primo luogo dobbiamo considerare come il visual viene caricato.

In questo caso è giusto ricordare che per grandi portali con tanti contenuti multimediali e visite dal mondo intero conviene usare un CDN mentre a tutti è consigliato il lazy load, il caricamento differito che ormai è di default su WordPress (ecco cosa devi fare).

Aggiungiamo un altro termine da rispettare: la dimensione della foto, più è piccola e minore è il peso da sostenere per l’upload. Poi c’è da considerare il tipo di file (JPG, PNG, GIF) che ti offre la possibilità di ridurre il peso dell’immagine anche se è utile ragionare in termini di WebP che permette di ottenere il miglior rapporto qualità/peso. Qui c’è il punto che ci interessa di più in questo caso: la compressione. Ovvero, la possibilità di ridurre, a parità di tutti gli altri fattori come le misure dell’oggetto, il peso dell’immagine. Ora possiamo affrontare la differenza tra Lossy e Lossless.

Da leggere: come inserire le immagini in un blog WordPress

Definizione della compressione Lossy, quando serve

Iniziamo con le presentazioni: cos’è una compressione Lossy e quali sono i suoi vantaggi? Ha dei punti deboli? Parliamo di un algoritmo che permette di di ridurre il peso delle immagini in modo consistente eliminando una serie di dati che incidono sulla qualità del contenuto. Lossy, infatti, si traduce dall’inglese con perdita. Ad esempio, il formato Jpeg è di tipo Lossy e consente di ridurre in modo considerevole il peso di un’immagine.

Questo avviene rinunciando, se lo desideri, a informazioni importanti. Infatti, uno dei problemi della compressione Lossy è l’effetto pixelato dell’immagine. Più aumenti questo livello di riduzione del peso, peggiore sarà il risultato finale. E avrai un visual sgranato, qualitativamente discutibile. Inoltre, sarà impossibile recuperare il formato originale: il file (immagine ma anche video e audio) è ormai compresso con tutti i suoi pro e contro.

Definizione della compressione Lossy, quando serve

Da questa immagine puoi chiaramente capire cosa significa esagerare con la compressione Lossy dell’immagine usando un formato JPG. Non bisogna per forza raggiungere questo livello, infatti la compressione Lossy – regolata nel modo adeguato – può aiutarti a trovare il giusto compromesso tra peso e qualità. Anche se in alcuni casi conviene puntare verso soluzioni differenti. Come, ad esempio, un formato di compressione WebP o AVIF.

Cos’è la compressione Lossless, quali pro e contro?

Cos'è la compressione lossless, quali pro e contro?

La compressione con perdita di dati (Lossy) riduce le dimensioni del file ma spesso a scapito della qualità. Nella soluzione senza perdita di dati nessun dato viene perso perché si interviene su bit inutili, duplicati e senza interferenze sul prodotto finale. Ciò significa che il file immagine, audio o video trattato con questa procedura sarà più pesante.

Ma, in media, si presenterà qualitativamente superiore. In sintesi, non noterai grandi differenze tra un file compresso e l’originale. Questa è la soluzione migliore se i dettagli sono fondamentali quando vuoi mostrare un’immagine online e alcuni tool, come Kraken.io, ti consentono di scegliere tra compressione Lossy e Lossless.

Quest’ultima viene vista come una condizione poco conveniente per risparmiare spazio. Ma per immagini con ampie zone di colore senza sfumature (come mostra Wikipedia), un file Lossless PNG può essere conveniente rispetto al JPG.

Meglio compressione Lossy o Lossless?

Non esiste una soluzione buona in ogni circostanza, in alcuni casi conviene puntare su una compressione Lossy per ridurre al massimo le immagini cercando di non ridurle in condizioni pessime. Se però devi realizzare il sito web di un fotografo, dimostrare la tua abilità come grafico o puntare sulle emozioni che può trasmettere uno scatto ben fatto non puoi scendere a compromessi: serve qualità. Quindi devi scegliere la compressione Lossless. Al momento, Google consiglia di utilizzare una buona compressione per garantire tempi di caricamento migliori si browser degli utenti:

WebP images are smaller than their JPEG and PNG counterparts—usually on the magnitude of a 25–35% reduction in filesize. This decreases page sizes and improves performance.

web.dev/serve-images-webp

Così puoi influenzare positivamente sia l’UX che la SEO. La soluzione più equilibrata sembra quella del file WebP. Le immagini che scelgono questo formato di compressione, che può essere Lossy o Lossless, sono più piccole delle versioni JPEG e PNG del 25-35%. Non male, vero?

Clicca per votare questo articolo!
[Voti totali: 0 Media: 0]
Riccardo Esposito
Latest posts by Riccardo Esposito (see all)

Discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *