Le immagini spesso utilizzano la maggior parte dei byte scaricati su una pagina web e occupano una quantità significativa di spazio visivo. Di conseguenza, l'ottimizzazione delle immagini può spesso produrre alcuni dei maggiori risparmi di byte e miglioramenti delle prestazioni per il tuo sito web: meno byte deve scaricare il browser, minore è la concorrenza per la larghezza di banda del client e più velocemente il browser può scaricare e visualizzare contenuti utili sullo schermo.
L'ottimizzazione delle immagini è sia un'arte che una scienza: un'arte perché non esiste una risposta definitiva su come comprimere al meglio una singola immagine e una scienza perché esistono molte tecniche e algoritmi ben sviluppati che possono ridurre significativamente le dimensioni di un'immagine. Trovare le impostazioni ottimali per un'immagine richiede un'attenta analisi 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. La maggior parte dei software di disegno basati su vettori può creare file SVG oppure puoi scriverli a mano direttamente 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 mostra la semplice forma circolare riportata di seguito con contorno nero e sfondo rosso ed è stata esportata da Adobe Illustrator.
<?xml version="1.0" encryption="utf-8"?>
Come si può intuire, contiene molti metadati, ad esempio informazioni sul livello, commenti e spazi dei nomi XML, che spesso non sono necessari per il rendering dell'asset nel browser. Di conseguenza, è sempre opportuno minimizzare i file SVG eseguendo uno strumento come SVGO.
Esempio tipico, SVGO riduce la dimensione del file SVG sopra generato generato da Illustrator del 58%, 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é il formato SVG è basato su XML, puoi anche applicare la compressione GZIP per ridurne le dimensioni di trasferimento. Assicurati che il server sia configurato per comprimere le risorse SVG.
Un'immagine raster è semplicemente una griglia bidimensionale di singoli "pixel", ad esempio un'immagine di 100 x 100 pixel è una sequenza di 10.000 pixel. A loro volta, ogni pixel memorizza i valori "RGBA": (R) canale rosso, (G) canale verde, (B) canale blu e (A) canale alfa (trasparenza).
Internamente, il browser alloca 256 valori (sfumatura) per ogni canale, ovvero 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 calcolare facilmente le dimensioni del file:
- 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 |
Una dimensione di 39 kB per un'immagine di 100 x 100 pixel potrebbe non sembrare un problema, ma le dimensioni del file esplodono rapidamente per le immagini più grandi e rendono gli asset immagine lenti e costosi da scaricare. Finora questo post si è concentrato solo sul formato dell'immagine "non compressa". Per fortuna si può fare molto per ridurre le dimensioni del file immagine.
Una strategia semplice è ridurre la "profondità di 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 si riduce la tavolozza a 256 colori? Quindi, sarebbero sufficienti 8 bit in totale per i canali RGB e risparmiare immediatamente due byte per pixel: ciò equivale a un risparmio della compressione del 50% rispetto ai 4 byte per pixel del formato originale.
Le scene complesse con transizioni di colore graduali (ad esempio sfumature o cielo) richiedono tavolozze dei colori più grandi per evitare artefatti visivi come il cielo pixelato nell'asset a 5 bit. D'altra parte, se l'immagine utilizza solo pochi colori, una tavolozza ampia sta sprecando parti preziose.
Dopodiché, una volta ottimizzati i dati memorizzati nei singoli pixel, potresti essere più intelligente e osservare anche i pixel vicini: come risulta, molte immagini, e soprattutto foto, hanno molti pixel vicini con colori simili, ad esempio il cielo, le texture ripetute e così via. Usando queste informazioni a tuo vantaggio, il compressore può applicare la codifica delta dove, invece di archiviare 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 memorizzare un solo bit. Ma perché fermarsi qui...
L'occhio umano ha un diverso livello di sensibilità a colori diversi: puoi ottimizzare la codifica dei colori per tenere conto di ciò riducendo o aumentando la tavolozza dei colori. I pixel "nelle vicinanze" formano una griglia bidimensionale. Ciò significa che ogni pixel ha più vicini: puoi sfruttare questa caratteristica per migliorare ulteriormente la codifica delta. Invece di esaminare solo i vicini più prossimi di ogni pixel, puoi esaminare blocchi più grandi di pixel vicini e codificare diversi blocchi con impostazioni diverse.
Come si può intuire, l'ottimizzazione delle immagini si complica rapidamente (o diventa divertente, a seconda del punto di vista) ed è un'area attiva nella ricerca accademica e commerciale. Le immagini occupano molti byte, ed è molto utile sviluppare tecniche di compressione delle immagini migliori. Per saperne di più, visita la pagina di Wikipedia o consulta il white paper sulle tecniche di compressione WebP per un esempio pratico.
Ancora una volta, va tutto bene, ma è anche molto accademico: come ti aiuta a ottimizzare le immagini sul tuo sito? È importante comprendere la forma del problema: pixel RGBA, profondità di bit e varie tecniche di ottimizzazione. È fondamentale comprendere e tenere a mente tutti questi concetti prima di approfondire le discussioni sui vari formati di immagini raster.
Confronto tra compressione delle immagini senza perdita di dati e con perdita di dati
Per alcuni tipi di dati, come il codice sorgente di una pagina o un file eseguibile, è fondamentale che un compressore non modifichi o perda nessuna delle informazioni originali: un singolo bit di dati mancante o sbagliato potrebbe cambiare completamente il significato dei contenuti del file o, peggio ancora, interromperlo completamente. Per alcuni altri tipi di dati, come immagini, audio e video, potrebbe essere perfettamente accettabile fornire una rappresentazione "approssimativa" dei dati originali.
In effetti, a causa del funzionamento dell'occhio, spesso riusciamo a scartare alcune informazioni su ogni pixel per ridurre le dimensioni del file di un'immagine. Ad esempio, i nostri occhi hanno una sensibilità diversa a colori diversi, il che significa che possiamo utilizzare meno bit per codificare alcuni colori. Di conseguenza, una tipica pipeline di ottimizzazione delle immagini è composta da due passaggi ad alto livello:
- L'immagine viene elaborata con un filtro con perdita di dati che elimina alcuni dati sui pixel.
- L'immagine viene elaborata con un filtro lossless che comprime i dati dei pixel.
Il primo passaggio è facoltativo e l'algoritmo esatto dipende dal formato specifico dell'immagine, ma è importante comprendere che qualsiasi immagine può essere sottoposta a una fase di compressione con perdita per ridurne le dimensioni. Infatti, la differenza tra i vari formati di immagini, come GIF, PNG, JPEG e altri, sta nella combinazione degli algoritmi specifici che utilizzano (o omettono) quando si applicano i passaggi con perdita di dati e senza perdita di dati.
Qual è la configurazione "ottimale" dell'ottimizzazione con perdita 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 introdotto dalla compressione con perdita: In alcuni casi, potresti voler saltare l'ottimizzazione con perdita di dati per comunicare dettagli intricati nella loro massima fedeltà. In altri casi, potresti essere in grado di applicare un'ottimizzazione aggressiva con perdita di dati per ridurre le dimensioni del file dell'asset immagine. È qui che entrano in gioco le proprie capacità di giudizio e il proprio contesto: non esiste un contesto universale.
Ad esempio, quando si utilizza un formato con perdita di dati come JPEG, il compressore mostrerà generalmente un'impostazione di "qualità" personalizzabile (ad esempio, il cursore della qualità fornito dalla funzionalità "Salva per il Web" in Adobe Photoshop), che è un numero compreso tra 1 e 100 che controlla il funzionamento interno della raccolta specifica di algoritmi con perdita di dati e lossless. Per ottenere risultati ottimali, sperimenta varie impostazioni di qualità per le immagini e non temere di ridurne la qualità: i risultati visivi spesso sono ottimi e le dimensioni dei file risparmiate possono essere molto elevate.
Effetti della compressione delle immagini su Core Web Vitals
Poiché le immagini sono spesso candidati per l'opzione Largest Contentful Paint, ridurre la durata del carico di risorse di un'immagine può portare a una migliore LCP sia nel lab che sul campo.
Quando utilizzi le impostazioni di compressione per i formati di immagini raster, assicurati di fare delle prove con i formati WebP e AVIF per vedere se riesci a pubblicare la stessa immagine con un ingombro ridotto rispetto ai formati precedenti.
È necessario fare attenzione, però, a non comprimere troppo le immagini raster. Una buona soluzione consiste nell'utilizzare una CDN di ottimizzazione delle immagini per trovare le impostazioni di compressione migliori per te, ma un'alternativa può essere 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
Alcuni suggerimenti e tecniche da tenere a mente durante l'ottimizzazione delle immagini:
- Preferenza ai formati vettoriali: le immagini vettoriali sono indipendenti dalla risoluzione e dalla scala, il che le rende perfette per il mondo multi-dispositivo e ad alta risoluzione.
- Minimizza e comprimi le risorse SVG: il markup XML prodotto dalla maggior parte delle applicazioni di disegno spesso contiene metadati non necessari che possono essere rimossi; assicurati che i tuoi server siano configurati per applicare la compressione GZIP delle risorse SVG.
- Preferisci WebP o AVIF ai formati raster meno recenti: le WebP e le immagini AVIF in genere hanno dimensioni molto più ridotte rispetto ai formati raster più vecchi.
- Scegli il formato migliore per l'immagine raster: determina i tuoi requisiti funzionali e seleziona quello più adatto a ogni particolare asset.
- Sperimenta con le impostazioni di qualità ottimali per i formati raster: non avere paura di ridurre le impostazioni di "qualità", i risultati sono spesso ottimi 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 rimuovere questi dati.
- Pubblica immagini scalate: 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é rappresentano il maggiore overhead quando vengono ridimensionate.
- Automatizza, automatizza, automatizza:investi in infrastrutture e strumenti di automazione che ti permetteranno di ottimizzare sempre tutti gli asset immagine.