Le immagini rappresentano in media il 21% del peso complessivo di una pagina web. Se non ci sono contenuti video sul sito, le immagini costituiscono probabilmente il punto critico numero uno per il peso della pagina ed il conseguente rallentamento nel caricamento.
Le immagini di grandi dimensioni (e quindi peso) rallentano le pagine web e creano un’esperienza utente non ottimale. L’ottimizzazione delle immagini è il processo di riduzione delle dimensioni dei file, con il ricorso ad un plugin o ad uno script, con la conseguente riduzione del tempo di caricamento della pagina.
Secondo HTTP Archive, a partire da novembre 2018, le immagini rappresentano in media il 21% del peso totale di una pagina web. Quindi, dopo i video, che sono molto più difficili da ottimizzare, le immagini sono di gran lunga la prima risorsa cui prestare attenzione, più ancora di JavaScript, CSS e Font per rendere il sito più performante (ed ottimizzato SEO).
I due metodi comunemente utilizzati per l’ottimizzazione delle immagini web sono:
- LOSSY: compressione con perdita di dati
- LOSSLESS: compressione senza perdita di dati
Equilibrio tra dimensione dei file e qualità dell’immagine web
L’obiettivo principale della formattazione delle immagini è quello di trovare un equilibrio tra la minore dimensione dei file e una qualità accettabile dell’immagine.
Esistono diversi modi per eseguire queste ottimizzazioni.
Una delle modalità più semplici è quella di comprimere le immagini prima di caricarle sul sito web (per esempio su CMS WordPress).
Normalmente si può utilizzare applicazioni locali (come Adobe Photoshop o Affinity Photo) oppure app online (come Squoosh di Google). Se si utilizza un CMS come WordPress sono anche disponibili plugin (vedi qui) che eseguono la compressione ed ottimizzazione delle immagini durante la fase di caricamento.
I due principali elementi da considerare sono il formato del file e il tipo di compressione che si utilizza. Scegliendo la giusta combinazione di formato di file e tipo di compressione, è possibile ridurre le dimensioni dell’immagine di ben 5 volte.
Formato del file
Esistono diversi tipi di file che si possono utilizzare.
PNG – Portable Network Graphics
PNG – produce immagini di qualità superiore, ma ha anche una dimensione di file più grande. Nase come formato immagine senza perdita di dati (lossless), ma può anche essere lossy.
JPEG o JPG – Joint Photographic Experts Group
JPG – utilizza l’ottimizzazione lossy e lossless (con e senza perdita di dati). Consente di regolare il livello di qualità per ottenere un buon bilanciamento tra qualità e dimensione del file.
Il consiglio è quello di utilizzare il formato JPEG (o JPG) per immagini caratterizzate da molti colori e PNG per immagini semplici.
GIF – Graphic interchange format
Un altro formato è quello GIF. Le GIF animate sono molto carine, ma incidono negativamente sulle prestazioni web. Molte GIF hanno dimensioni superiori a 1 MB. Il consiglio è quello di utilizzare questa tipologia di formato sui Social Media o, se proprio non è possibile farne a meno, cercare di comprimerla il più possibile.
Formato WebP
Segnaliamo l’introduzione da parte di Google di WebP, un nuovo formato immagine che consente una compressione (sia lossy che lossless) di qualità superiore per le immagini sul Web.
È un formato appositamente creato da Google per ottimizzare il caricamento delle immagini sulle pagine web, creando immagini di dimensioni più ridotte per rendere il web più veloce.
Scopri di più su WebP: il nuovo formato immagine per il web.
Per i siti web in WordPress consigliamo il plugin WebP Express per eseguire la conversione in formato WebP.
Attenzione: non tutti i browser (come Safari fino alla versione 15.3) supportano completamente il formato WebP (vedi qui) quindi è fondamentale utilizzare logiche i identificazione del browser per servire l’immagine nel formato compatibile con quest’ultimo.
Compressione Lossy vs Lossless
Esistono due tipi di compressione, uno con perdita di dati (Lossy) e l’altro che non comporta la perdita di dati (Lossless).
Compressione con perdita di dati (Lossy)
La compressione Lossy comporta l’eliminazione di alcuni dati dall’immagine. Questo tipo di compressione è uno dei metodi più utilizzati perché consente di ridurre le dimensioni dei file in modo considerevole.
Purtroppo, una volta avviato il processo di compressione Lossy, questo non può essere invertito. Perciò va prestata molta attenzione alla misura in cui si sta riducendo l’immagine per evitare un’eccessiva perdita di qualità (ad esempio quando si parla di immagine pixelata).
Compressione senza perdita di dati (Lossless)
La compressione senza perdita di dati o Lossless, a differenza di quella con perdita di dati o Lossy, non riduce la qualità dell’immagine. Questo è possibile perché solitamente l’immagine viene compressa rimuovendo i metadati non necessari, cioè tutti quei dati generati automaticamente dal dispositivo che cattura l’immagine.
Per contro, la riduzione delle dimensioni del file non sarà così significativa come nel caso della compressione con perdita di dati.
Plugin di compressione delle immagini
Esistono alcuni validi plugin WordPress di compressione delle immagini che consentono di automatizzare l’intero processo. Ecco alcuni esempi:
- Imagify (lossy e lossless – ottimizza le immagini esternamente)
- WP Smush (lossy e lossless- ottimizza le immagini esternamente)
- Optimole (lossy e lossless – ottimizza le immagini esternamente)
- EWWW image optimizer (lossy e lossless – ottimizza le immagini esternamente)
- ShortPixel (lossy e lossless – ottimizza le immagini esternamente)
La cosa più importante quando si seleziona un plugin per l’ottimizzazione delle immagini è sceglierne uno che comprima e ottimizzi le immagini esternamente dal proprio server. Questo riduce il carico sul sito.
Di quanto sarà più veloce il sito con l’ottimizzazione delle immagini?
Tutto dipende dalle dimensioni delle immagini originali e da come risultano dopo la compressione. In ogni caso, una buona compressione può arrivare a ridurre i tempi di caricamento della pagina di oltre l’80%.
Lazy Loading
Un’interessante opzione in caso di presenza di molte immagini è quella di utilizzare il caricamento differito o Lazy Loading. Si stratta di una tecnica di ottimizzazione che consente di caricare i contenuti visibili ritardando il download e il rendering dei contenuti che appaiono “below the fold” (cioè nella parte non visibile della pagina web al momento del primo caricamento).
Il Lazy Loading funziona così:
- Il browser crea il DOM della pagina web senza scaricare le immagini e precaricare i video
- Viene utilizzato JavaScript per determinare quali immagini scaricare e quali video precaricare in base al contenuto inizialmente visibile quando carica la pagina. Quelle immagini e quei video sono scaricati e precaricati nel modo più appropriato.
- Il download e il rendering dei video aggiuntivi sono ritardati fino a quando un visitatore del sito scorre verso il basso e viene visualizzato il contenuto aggiuntivo.
Il risultato finale è che le immagini non vengono scaricate e i video caricati finché non sono effettivamente necessari. Ciò può fornire un significativo miglioramento delle prestazioni per i siti che includono molte immagini ad alta risoluzione e incorporano dei video.
Alcuni suggerimenti per l’ottimizzazione delle immagini
Ecco alcuni ulteriori consigli per l’ottimizzazione delle immagini:
- A differenza di quanto accadeva in passato, quando le immagini si caricavano esclusivamente delle dimensioni della larghezza della colonna, le immagini reattive sono predefinite in WordPress (dalla versione 4.4) e saranno automaticamente visualizzate nelle dimensioni più piccole per gli utenti mobili.
- Gli SVG possono costituire un’altra ottima alternativa all’utilizzo delle immagini. SVG sta per Scalable Vector Graphics – Grafica Scalabile Vettoriale in italiano – e indica una tecnologia in grado di visualizzare oggetti di grafica vettoriale basata sul linguaggio XML. Gli SVG sono generalmente molto più piccoli nella dimensione del file rispetto a JPEG e PNG, ma non è sempre così.
- Consigliamo di utilizzare gli icon font invece di posizionare il testo all’interno delle immagini; hanno un aspetto migliore quando vengono ridimensionati e occupano meno spazio.
- Infine, suggeriamo di prendere in considerazione anche WebP, il nuovo formato immagine di Google che sta rapidamente guadagnando consensi e di cui abbiamo parlato nei paragrafi precedenti.
Vuoi migliorare le Performance del sito web della tua Azienda?
Scopri di più sul nostro servizio di Web Performance Optimization.
Scopri come sono le performance del tuo sito con questi strumenti:
Se ti interessa conoscerci meglio, scoprire come lavoriamo in KAUKY e come potremmo contribuire al progetto della tua azienda:
- chiamaci allo 0385/266133
- scrivi a info@kauky.com
- contattaci per fissare un appuntamento online.
