Hai già sentito parlare di compressione Lossy e Lossless ma vuoi saperne di più sulla loro utilità, sulle differenze e su come sfruttarle al meglio per ottimizzare le prestazioni del tuo sito web? Allora hai trovato l’articolo giusto!
I media file (immagini, video, audio,…) sono le risorse più pesanti (in termini di Kbyte) che possono essere caricate in una pagina o in un post del tuo sito web, ma sono anche contenuti estremamente utili per la fruizione delle informazioni. È necessario quindi trovare un equilibrio, mantenendo al minimo il numero dei contenuti multimediali o contenendone le dimensioni quanto più possibile e cercare così di “salvare capra e cavoli”.
Gli standard di qualità video dei dispositivi in commercio si sono alzati enormemente, siano essi mobile oppure portatili, pc, smart Tv, ecc., questi prodotti utilizzano schermi con un’uscita video ad alta definizione, in 4k e anche maggiori. Gli utenti che guardano il tuo sito web da uno schermo ad alta definizione noteranno subito se le immagini non hanno una risoluzione ottimale percependole difettose perchè ‘pixelate’ o sfuocate.
È quindi necessaria un’attenzione particolare alla qualità delle immagini per una resa ottimale (alta definizione), ma questo non deve influire sui tempi di caricamento delle pagine del tuo sito web per non venire penalizzato da Google sia per velocità di caricamento e di conseguenza mettendo a rischio anche la SEO.
Vediamo quali sono le possibili soluzioni:
- non inserire immagini (improponibile)
- caricare immagini nel formato originale (ma spesso troppo pesanti per il sito)
- comprimere le immagini ottimizzate per il web.
Come scegliere tra un’immagine molto leggera ma con una risoluzione troppo bassa per gli schermi oggi in commercio e un’immagine ad alta risoluzione ma che rallenta il caricamento della tua pagina web?
La soluzione corretta è ottimizzare le immagini prima di caricarle sul tuo sito e per farlo ci sono due possibilità: Lossy (con perdite di dati) o Lossless (senza perdite di dati).
Scopriamo nel dettaglio le differenze.
Ridurre l’impatto delle immagini
Assunto che non vogliamo rinunciare ad utilizzare le immagini nel nostro sito web serve comprimerle in modo adeguato. Questo procedimento è fondamentale per avere un impatto ridotto nel tempo di caricamento delle pagine del sito.
I dati che emergono da alcune ricerche dimostrano che la maggior parte dei siti web ha un tempo medio di caricamento delle pagine di 6 secondi, il doppio della velocità media suggerita come “obiettivo” per avere buone performance online. Una delle ‘best practice’ suggerite da Google è quella di ottimizzare le immagini contenute nelle pagine del tuo sito web.
Per farlo è necessario ottimizzare i contenuti multimediali così che siano più leggeri possibili senza perdere dati e qualità.
Vediamo quindi i due tipi di compressione possibile:
- Lossy o compressione con perdita
- Lossless o compressione senza perdita
In base al tipo di immagine e alle esigenze del tuo sito web, i due metodi sono entrambi soluzioni valide, ma devi tener conto dei pro e dei contro e degli effetti collaterali del sistema di compressione che scegli. Trovare il corretto equilibrio tra funzionalità dell’immagine e velocità di caricamento della pagina dovrebbe essere l’obiettivo finale. Analizziamo quindi i due tipi di compressione nel dettaglio.
Compressione Lossy: cos’è, quando e perché utilizzarla
La compressione Lossy è quella più semplice e veloce da eseguire ed è quella che riesce a comprimere maggiormente le immagini e i contenuti in generale. Questo metodo comporta però una perdita di dati e può rivelarsi poco utile a risolvere i tuoi problemi di ottimizzazione dei contenuti.
Nell’ambito delle immagini, i formati Lossy sono i file con estensione jpg/jpeg, gif e alcune configurazioni di compressione per il nuovo formato di immagini AVIF.
Questo metodo di compressione è molto efficace nel caso di immagini di grande dimensione o immagini che sono sovradimensionate rispetto all’uso che se ne vuole fare.
Il Lossy permette quindi di ottenere immagini molto leggere ed è una compressione utile per pagine web con molte immagini e garantisce un’ottima velocità di caricamento nel web.
Il problema di questo sistema di compressione è la perdita di dati che può compromettere la qualità delle immagini. I difetti dell’immagine compressa possono essere lievi (piccoli angoli smussati in lontananza) o diventare visibili (una macchia monocromatica) in base al livello di compressione applicata e alla quantità di perdita dei dati.
Compressione Lossless: cos’è e perché utilizzarla
La compressione Lossless è un processo di ottimizzazione più lento da eseguire sulle immagini ma permette di comprimerle senza perdite di dati.
Tra i formati di immagini Lossless i più conosciuti e utilizzati sono png, pdf e WebP.
La compressione Lossless, oltre ad ottimizzare il peso delle immagini, permette di tornare indietro e annullare la compressione proprio perché questo metodo non prevede la perdita di dati.
Pur essendo meno efficace in termini di ottimizzazione di dimensione dei file, risulta molto efficace dal punto di vista della qualità finale dell’immagine (visto l’aumento di risoluzione dei dispositivi video in commercio), ottenendo così immagini estremamente dettagliate pur avendo ricevuto una notevole compressione di dati.
Quando utilizzare Lossy al posto di Lossless e viceversa
Per fare la scelta corretta è necessario valutare la situazione caso per caso. Andranno quindi tenute in considerazione tutte le informazioni per decidere come procedere come ad esempio il tipo di immagine da ottimizzare e lo scopo all’interno della pagina del nostro sito web.
A questo punto le scelte saranno in base al contesto:
- l’immagine ha un contenuto senza dettagli come ad esempio la foto di un paesaggio. In questo caso potrebbe essere una buona idea utilizzare un algoritmo Lossy per ottenere una compressione migliore a livello di peso (Kbyte);
- l’immagine ha un contenuto grafico che non deve essere alterato, come ad esempio il logo di una società. Qui è consigliabile utilizzare una compressione Lossless per mantenere tutti i dettagli dell’immagine, anche se la dimensione del file risulterà maggiore;
- nessuna delle scelte precedenti ma serve comunque ridurre la dimensione dell’immagine. In questi casi la scelta è abbastanza libera e solitamente si sceglie la compressione Lossy perché più veloce e comprime di più la dimensione del file.
Lossy vs Lossless: tiriamo due somme
Online troviamo immagini ottimizzate sia con compressioni Lossy che LossLess senza contare che spesso le immagini vengono ottimizzate utilizzando entrambi i metodi. Spesso e volentieri vengono utilizzati degli algoritmi che applicano prima una compressione e poi l’altra o permettono di essere configurate in base all’input.
Ottimizzare tutte le immagini di un sito web può essere una procedura lunga e noiosa. Per farlo in modo massivo e veloce servono plugin per CMS e tool specifici che garantiscono la qualità della compressione ottimizzando la velocità di caricamento delle pagine web. Questo lavoro prevede una corretta pianificazione per ottenere il massimo da questo tipo di strumenti.
Per i nostri siti WordPress abbiamo scelto ShortPixel, che permette un controllo preciso di tutti i parametri di compressione delle immagini garantendoci un’ottimizzazione del SEO delle immagini. L’ottimizzazione viene fatta valutando lo scopo delle immagini e del singolo post e cercando di comprimere l’immagine nel formato corretto in base allo scopo (Lossy, LoossLess o intermedi tra i due).
Questo genere di modifiche sui media del sito è un lavoro delicato, perchè impatta pesantemente sia sul posizionamento SEO che sui tempi di caricamento dei siti web. Infatti, nel percorso di ottimizzazione e miglioramento di un sito è necessario pensare anche alle immagini e gli altri media sia per ottimizzare i tempi di caricamento sia per il posizionamento nei motori di ricerca.
Se non sei un esperto in programmazione di siti web, il consiglio principale è quello di affidarti ad un team di esperti che sappia gestire in modo corretto l’ottimizzazione dei tuoi siti web sia dal punto di vista delle prestazioni, della SEO e della sicurezza, così da avere la garanzia che stai facendo le cose corrette.
Se stai utilizzando un provider di hosting web mediocre o di bassa qualità, dovresti valutare l’opportunità di passare a una soluzione hosting più professionale. Pochi sanno che anche questo può avere un impatto enorme sui tempi di caricamento del tuo sito web.
