Le immagini spesso rappresentano la maggior parte dei byte scaricati su una pagina web e spesso occupano una quantità significativa di spazio visivo. Di conseguenza, l'ottimizzazione delle immagini può spesso generare alcuni dei maggiori miglioramenti delle prestazioni e del risparmio di byte per il tuo sito web: meno i byte che il browser deve scaricare, meno concorrenza c'è per la larghezza di banda del client e più velocemente il browser può scaricare e visualizzare i contenuti utili sullo schermo.
L'ottimizzazione delle immagini è un'arte e una scienza: un'arte perché non c'è una risposta definitiva su come comprimere al meglio un'immagine e una scienza perché esistono molte tecniche e algoritmi ben sviluppati che possono ridurre notevolmente le dimensioni di un'immagine. L'individuazione delle impostazioni ottimali per un'immagine richiede un'analisi attenta di diverse dimensioni: funzionalità di formato, contenuti dei dati codificati, qualità, dimensioni in pixel e altro ancora.
Ottimizzazione delle immagini vettoriali
Tutti i browser moderni supportano Scalable Vector Graphics (SVG), un formato di immagine basato su XML per la grafica bidimensionale. Puoi incorporare il markup SVG direttamente nella pagina o come risorsa esterna. Quasi tutti i software di disegno vettoriali sono in grado di creare file SVG oppure di scrivere manualmente i file nel tuo editor di testo preferito.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
</g>
</g>
</svg>
L'esempio riportato sopra esegue il rendering della semplice forma circolare sottostante con contorno nero e sfondo rosso ed è stato esportato da Adobe Illustrator.
<?xml version="1.0" encryption="utf-8"?>
Come si può vedere, contiene molti metadati, ad esempio informazioni sul livello, commenti e spazi dei nomi XML, spesso non necessari per il rendering dell'asset nel browser. Di conseguenza, è sempre una buona idea minimizzare i file SVG utilizzando uno strumento come SVGO.
Ad esempio, SVGO riduce del 58% le dimensioni del file SVG qui sopra generato da Illustrator, portandolo da 470 a 199 byte.
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
Poiché SVG è un formato basato su XML, puoi anche applicare la compressione GZIP per ridurre le dimensioni di trasferimento. Assicurati che il tuo server sia configurato per comprimere le risorse SVG.
Un'immagine raster non è altro che una griglia bidimensionale di singoli "pixel", ad esempio un'immagine di 100 x 100 pixel è una sequenza di 10.000 pixel. A sua volta, ogni pixel memorizza i valori "RGBA": (R) canale rosso, (G) canale verde, (B) canale blu e (A) canale alfa (trasparenza).
Internamente, il browser assegna 256 valori (tonalità) per ogni canale, il che si traduce in 8 bit per canale (2 ^ 8 = 256) e 4 byte per pixel (4 canali x 8 bit = 32 bit = 4 byte). Di conseguenza, se conosciamo le dimensioni della griglia, possiamo facilmente calcolarle:
- L'immagine di 100 x 100 pixel è composta da 10.000 pixel
- 10.000 pixel x 4 byte = 40.000 byte
- 40.000 byte / 1024 = 39 kB
| Dimensioni | Pixel | Dimensioni file |
|---|---|---|
| 100 x 100 | 10.000 | 39 kB |
| 200 x 200 | 40.000 | 156 kB |
| 300 x 300 | 90.000 | 351 kB |
| 500 x 500 | 250.000 | 977 kB |
| 800 x 800 | 640.000 | 2500 kB |
39 kB per un'immagine di 100 x 100 pixel potrebbe non sembrare un grosso problema, ma le dimensioni del file aumentano rapidamente per le immagini più grandi e gli asset immagine diventano lenti e costosi da scaricare. Finora questo post si è concentrato solo sul formato dell'immagine "non compressa". Fortunatamente, si può fare molto per ridurre le dimensioni del file immagine.
Una semplice strategia consiste nel ridurre la "profondità in bit" dell'immagine da 8 bit per canale a una tavolozza dei colori più piccola: 8 bit per canale ci fornisce 256 valori per canale e 16.777.216 (256 ^ 3) colori in totale. E se riduci la tavolozza a 256 colori? Quindi avresti bisogno solo di 8 bit in totale per i canali RGB e risparmiare immediatamente due byte per pixel, ovvero un risparmio di compressione del 50% rispetto ai 4 byte originali per formato di pixel.
Le scene complesse con transizioni di colore graduali (ad esempio, gradienti o cielo) richiedono tavolozze dei colori più grandi per evitare artefatti visivi come il cielo pixelato nell'asset a 5 bit. Se invece l'immagine utilizza solo pochi colori, l'utilizzo di una grande tavolozza sta semplicemente sprecando pezzi preziosi.
Dopo aver ottimizzato i dati memorizzati nei singoli pixel, potresti migliorare l'intelligenza e analizzare i pixel vicini: risulta che, in molti casi, le immagini, e soprattutto le foto, presentano molti pixel vicini con colori simili, ad esempio il cielo, texture ripetute e così via. Sfruttando queste informazioni a tuo vantaggio, il compressore può applicare la codifica delta che, invece di memorizzare i singoli valori per ogni pixel, puoi memorizzare la differenza tra i pixel vicini: se i pixel adiacenti sono uguali, il delta è "zero" e devi solo archiviare un singolo bit. Ma perché fermarsi qui...
L'occhio umano ha livelli di sensibilità diversi per i diversi colori: puoi ottimizzare la codifica dei colori per tenere conto di questo problema riducendo o aumentando la tavolozza di questi colori. I pixel "nelle vicinanze" formano una griglia bidimensionale. Ciò significa che ogni pixel ha più vicini: puoi sfruttare questo fatto per migliorare ulteriormente la codifica delta. Invece di esaminare solo i vicini immediati per ogni pixel, puoi osservare i blocchi più grandi di pixel vicini e codificare blocchi diversi con impostazioni diverse.
Come si può vedere, l'ottimizzazione delle immagini diventa rapidamente complicata (o divertente, a seconda del punto di vista) ed è un'area molto attiva di ricerca accademica e commerciale. Le immagini occupano molti byte e lo sviluppo di tecniche di compressione migliori è molto utile. Se vuoi saperne di più, visita la pagina Wikipedia o consulta il white paper sulle tecniche di compressione WebP per un esempio pratico.
Ancora una volta, è tutto fantastico, ma anche molto accademico: come ti aiuta a ottimizzare le immagini sul tuo sito? È importante capire la forma del problema: pixel RGBA, profondità di bit e varie tecniche di ottimizzazione. Tutti questi concetti sono fondamentali da comprendere e da tenere presenti prima di approfondire le discussioni sui vari formati di immagine raster.
Compressione delle immagini senza perdita di dati e con perdita
Per alcuni tipi di dati, come il codice sorgente di una pagina o un file eseguibile, è fondamentale che un programma di compressione non modifichi o perda le informazioni originali: un singolo bit di dati mancante o errato potrebbe cambiare completamente il significato dei contenuti del file o, peggio ancora, interromperlo del tutto. Per altri tipi di dati, come immagini, audio e video, potrebbe essere perfettamente accettabile fornire una rappresentazione "approssimativa" dei dati originali.
Infatti, a causa del funzionamento dell'occhio, spesso possiamo evitare di eliminare alcune informazioni su ciascun pixel per ridurre le dimensioni file di un'immagine. Ad esempio, i nostri occhi hanno sensibilità diverse a colori diversi, il che significa che possiamo utilizzare meno bit per codificare alcuni colori. Di conseguenza, una tipica pipeline di ottimizzazione delle immagini è costituita da due passaggi generali:
- L'immagine viene elaborata con un filtro con perdita di dati che elimina alcuni dati relativi ai pixel.
- L'immagine viene elaborata con un filtro senza perdita di dati che comprime i dati relativi ai pixel.
Il primo passaggio è facoltativo e l'algoritmo esatto dipende dal formato specifico dell'immagine, ma è importante capire che qualsiasi immagine può essere sottoposta a un passaggio di compressione con perdita per ridurne le dimensioni. Infatti, la differenza tra i vari formati dell'immagine, ad esempio GIF, PNG, JPEG e altri, sta nella combinazione degli specifici algoritmi che utilizzano (o omettono) durante l'applicazione dei passaggi con perdita di dati e senza perdita di dati.
Quindi, qual è la configurazione "ottimale" dell'ottimizzazione con e senza perdita di dati? La risposta dipende dai contenuti dell'immagine e dai tuoi criteri, come il compromesso tra dimensioni del file e artefatti introdotti dalla compressione con perdita di dati: In alcuni casi, potresti voler ignorare l'ottimizzazione con perdita di dati per comunicare dettagli complessi nella sua massima fedeltà. In altri casi, potrebbe essere possibile applicare un'ottimizzazione aggressiva con perdita di dati per ridurre le dimensioni del file dell'asset immagine. È qui che entrano in gioco il giudizio e il contesto: non esiste un'unica impostazione universale.
Ad esempio, quando si utilizza un formato con perdita di dati come JPEG, il compressore di solito mostra un'impostazione di "qualità" personalizzabile (ad esempio, il cursore di qualità fornito dalla funzionalità "Salva per il web" in Adobe Photoshop), che in genere è un numero compreso tra 1 e 100 che controlla i meccanismi interni della raccolta specifica di algoritmi con perdita di dati e algoritmi senza perdita di dati. Per ottenere risultati ottimali, prova a utilizzare diverse impostazioni di qualità per le immagini e non aver paura di ridurne la qualità: i risultati visivi sono spesso ottimi e le dimensioni ridotte dei file possono essere molto elevate.
Effetti della compressione delle immagini su Core Web Vitals
Poiché le immagini sono spesso idonee per la Largest Contentful Paint, ridurre il tempo di caricamento delle risorse di un'immagine può tradursi in una migliore LCP sia nel lab che nel campo.
Quando giochi con le impostazioni di compressione dei formati di immagine raster, assicurati di sperimentare con i formati WebP e AVIF per vedere se puoi pubblicare la stessa immagine con un ingombro minimo rispetto ai formati precedenti.
In ogni caso, fai attenzione a non comprimere troppo le immagini raster. Una buona soluzione è utilizzare una CDN per l'ottimizzazione delle immagini per trovare le impostazioni di compressione più adatte, ma un'alternativa potrebbe essere quella di utilizzare strumenti come Butteraugli per stimare le differenze visive in modo da non codificare le immagini troppo in modo aggressivo e perdere troppa qualità.
Elenco di controllo per l'ottimizzazione delle immagini
Ecco alcuni suggerimenti e tecniche da ricordare quando ottimizzi le tue immagini:
- Preferisci i formati vettoriali:le immagini vettoriali sono indipendenti dalla risoluzione e dalla scala, il che le rende perfette per un mondo multi-dispositivo e ad alta risoluzione.
- Minimizza e comprimi gli asset SVG: il markup XML prodotto dalla maggior parte delle applicazioni di disegno contiene spesso metadati non necessari che possono essere rimossi. Assicurati che i server siano configurati per applicare la compressione GZIP per le risorse SVG.
- Preferisci WebP o AVIF a formati raster meno recenti: le WebP e AVIF sono generalmente molto più piccole rispetto ai formati raster meno recenti.
- Scegli il formato migliore per l'immagine raster: determina i tuoi requisiti funzionali e seleziona quello più adatto a ogni specifica risorsa.
- Sperimenta con le impostazioni di qualità ottimali per i formati raster: non aver paura di modificare le impostazioni di "qualità"; i risultati sono spesso molto buoni e il risparmio di byte è significativo.
- Rimuovi i metadati delle immagini non necessari: molte immagini raster contengono metadati non necessari sulla risorsa (informazioni geografiche, informazioni sulla fotocamera e così via). Utilizza gli strumenti appropriati per eliminare questi dati.
- Pubblica immagini in scala: ridimensiona le immagini e assicurati che le dimensioni di "display" siano il più possibile simili a quelle "naturali" dell'immagine. Presta particolare attenzione alle immagini di grandi dimensioni, poiché comportano il maggiore overhead quando vengono ridimensionate.
- Automatizza, automatizza, automatizza: investi in infrastrutture e strumenti automatizzati in grado di garantire che tutti i tuoi asset immagine siano sempre ottimizzati.