La prima domanda da porsi è se un'immagine è effettivamente necessaria per ottenere l'effetto desiderato. Un buon design è semplice e produrrà sempre le migliori prestazioni. Se riesci a eliminare una risorsa immagine, che spesso richiede un elevato numero di byte rispetto a HTML, CSS, JavaScript e altri asset sulla pagina, si tratta sempre della strategia di ottimizzazione migliore. Detto questo, un'immagine ben posizionata può anche comunicare più informazioni di mille parole, quindi spetta a te trovare il giusto equilibrio.
Quindi, valuta se esiste una tecnologia alternativa che potrebbe fornire i risultati auspicati, ma in modo più efficiente:
- Gli effetti CSS (come ombre o gradienti) e le animazioni CSS possono essere utilizzati per produrre asset indipendenti dalla risoluzione che appaiano sempre nitidi a ogni risoluzione e livello di zoom, spesso a una frazione dei byte richiesti da un file immagine.
- I caratteri web consentono l'uso di splendidi caratteri tipografici, preservando allo stesso tempo la possibilità di selezionare, cercare e ridimensionare il testo, un miglioramento significativo in termini di usabilità.
Se ti capita di dover codificare del testo in un asset immagine, fermati e riconsideralo. Un'ottima tipografia è fondamentale per un design, un branding e una leggibilità efficaci, ma il testo nelle immagini offre un'esperienza utente scadente: il testo non è selezionabile, non disponibile per la ricerca, non è zoomabile, non accessibile e non adatto ai dispositivi con DPI elevato. L'utilizzo dei caratteri web richiede un insieme di ottimizzazioni, ma risponde a tutti questi problemi ed è sempre una scelta migliore per la visualizzazione del testo.
Scegli il formato dell'immagine giusto
Se sei sicuro che un'immagine sia l'opzione corretta, devi selezionare con attenzione il tipo di immagine adatto al lavoro.
- La grafica vettoriale utilizza linee, punti e poligoni per rappresentare un'immagine.
- Le grafiche grafici rappresentano un'immagine codificando i singoli valori di ogni pixel all'interno di una griglia rettangolare.
Ogni formato ha il proprio insieme di pro e contro. I formati vettoriali sono ideali per immagini composte da forme geometriche semplici come loghi, testo o icone. Offrono risultati nitidi a ogni impostazione di risoluzione e zoom, il che li rende il formato ideale per gli schermi e gli asset ad alta risoluzione che devono essere visualizzati in varie dimensioni.
Tuttavia, i formati vettoriali non sono sufficienti quando la scena è complicata (ad esempio, una foto): la quantità di markup SVG per descrivere tutte le forme può essere elevata in modo proibitivo e l'output potrebbe comunque non avere un aspetto "fotorealistico". In questo caso dovresti usare un formato immagine raster, come PNG, JPEG, WebP o AVIF.
Le immagini raster non hanno le stesse proprietà dell'essere indipendente dalla risoluzione o dallo zoom: quando ingrandisci un'immagine raster, puoi notare elementi grafici frastagliati e sfocati. Di conseguenza, potrebbe essere necessario salvare più versioni di un'immagine raster a varie risoluzioni per offrire l'esperienza ottimale agli utenti.
Implicazioni degli schermi ad alta risoluzione
Esistono due diversi tipi di pixel: pixel CSS e pixel del dispositivo. Un singolo pixel CSS può corrispondere direttamente a un singolo pixel di dispositivo oppure può essere sottoposto a backup da più pixel di dispositivo. A cosa serve? Maggiore è il numero di pixel del dispositivo, più precisi sono i dettagli dei contenuti visualizzati sullo schermo.
Gli schermi con DPI elevato (HiDPI) producono risultati meravigliosi, ma c'è un compromesso ovvio: gli asset immagine richiedono più dettagli per sfruttare il numero maggiore di pixel del dispositivo. La buona notizia è che le immagini vettoriali sono ideali per questa attività, in quanto possono essere visualizzate a qualsiasi risoluzione con risultati nitidi. Potresti dover sostenere costi di elaborazione più elevati per visualizzare i dettagli più precisi, ma l'asset sottostante è lo stesso ed è indipendente dalla risoluzione.
D'altra parte, le immagini raster rappresentano una sfida molto più impegnativa perché codificano i dati delle immagini in base al pixel. Pertanto, maggiore è il numero di pixel, maggiori saranno le dimensioni del file di un'immagine raster. Ad esempio, consideriamo la differenza tra un asset foto visualizzato a 100 x 100 pixel (CSS):
| Risoluzione dello schermo | Pixel totali | Dimensioni file non compresse (4 byte per pixel) |
|---|---|---|
| 1x | 100 x 100 = 10.000 | 40.000 byte |
| 2x | 100 x 100 x 4 = 40.000 | 160.000 byte |
| 3 | 100 x 100 x 9 = 90.000 | 360.000 byte |
Quando raddoppiamo la risoluzione dello schermo fisico, il numero totale di pixel aumenta di quattro volte: il doppio del numero di pixel orizzontali e il doppio del numero di pixel verticali. Di conseguenza, uno schermo "2x" non solo raddoppia, ma quadruplica il numero di pixel necessari.
Che cosa significa in pratica? Gli schermi ad alta risoluzione ti consentono di mostrare immagini meravigliose, il che può essere un'ottima caratteristica del prodotto. Tuttavia, gli schermi ad alta risoluzione richiedono anche immagini ad alta risoluzione, pertanto:
- Dai la preferenza alle immagini vettoriali quando possibile, in quanto sono indipendenti dalla risoluzione e offrono sempre risultati nitidi.
- Se è necessaria un'immagine raster, pubblica immagini adattabili.
Funzionalità dei diversi formati di immagine raster
Oltre ad algoritmi di compressione con perdita di dati e dati senza perdita di dati, i vari formati delle immagini supportano diverse funzionalità, come i canali di animazione e trasparenza (alfa). Di conseguenza, la scelta del "formato giusto" per una determinata immagine è una combinazione di risultati visivi e requisiti funzionali desiderati.
| Formato | Trasparenza | Animazione | Browser |
|---|---|---|---|
| PNG | Sì | No | Tutte |
| JPEG | No | No | Tutte |
| WebP | Sì | Sì | Tutti i browser moderni. Consulta la sezione Posso utilizzare? |
| AVIF | Sì | Sì | No. Vedi Posso utilizzare? |
Esistono due formati di immagine raster supportati universalmente: PNG e JPEG. Oltre a questi formati, i browser moderni supportano il più recente formato WebP, mentre solo alcuni supportano il più recente formato AVIF. Entrambi i formati più recenti offrono una compressione complessiva migliore e più funzioni. Quindi, quale formato dovresti usare?
WebP e AVIF forniscono in genere una compressione migliore rispetto ai formati precedenti e devono essere utilizzati ove possibile. Puoi utilizzare immagini WebP o AVIF insieme a un'immagine JPEG o PNG come riserva. Per ulteriori dettagli, consulta Utilizzare immagini WebP.
Per quanto riguarda i formati delle immagini meno recenti, considera quanto segue:
- Ti serve l'animazione? Usa gli elementi
<video>.- E le GIF? La GIF limita la tavolozza dei colori a un massimo di 256 colori e crea dimensioni dei file molto più grandi rispetto agli elementi
<video>. Consulta la pagina Sostituire le GIF animate con i video.
- E le GIF? La GIF limita la tavolozza dei colori a un massimo di 256 colori e crea dimensioni dei file molto più grandi rispetto agli elementi
- Hai bisogno di conservare i dettagli più piccoli alla massima risoluzione? Utilizza PNG o WebP senza perdita di dati.
- Il formato PNG non applica algoritmi di compressione con perdita di dati oltre alla scelta delle dimensioni della tavolozza dei colori. Di conseguenza, le immagini vengono prodotte con la massima qualità, ma con una dimensione file notevolmente superiore rispetto agli altri formati. Utilizzalo con oculatezza.
- WebP ha una modalità di codifica senza perdita di dati che può essere più efficiente del formato PNG.
- Se l'asset immagine contiene immagini composte da forme geometriche, valuta la possibilità di convertirlo in un formato vettoriale (SVG).
- Se l'asset immagine contiene testo, interrompi e riconsideralo. Il testo nelle immagini non è selezionabile, disponibile per la ricerca o "zoom". Se devi conferire un aspetto personalizzato (per il branding o per altri motivi), utilizza invece un carattere web.
- Stai ottimizzando una foto, uno screenshot o un asset immagine simile? Usa JPEG, WebP con perdita di dati o AVIF con perdita di dati.
- JPEG utilizza una combinazione di ottimizzazione con perdita di dati e perdita di dati per ridurre le dimensioni dei file dell'asset immagine. Prova diversi livelli qualitativi JPEG per trovare la migliore qualità rispetto al compromesso tra dimensioni del file per il tuo asset.
- Lossy WebP o AVIF con perdita di dati possono essere alternative JPEG accettabili, ma tieni presente che la modalità con perdita di WebP in particolare ignora alcune informazioni sulla crominanza per ottenere immagini più piccole. Ciò significa che i colori selezionati potrebbero non essere uguali a quelli di un formato JPEG equivalente.
Infine, tieni presente che se utilizzi un componente WebView per visualizzare i contenuti nell'applicazione specifica della tua piattaforma, hai il controllo completo del client e puoi utilizzare esclusivamente WebP. Facebook e molti altri utilizzano WebP per pubblicare tutte le proprie immagini all'interno delle loro applicazioni: il risparmio è senz'altro.
Impatto sulla metrica Largest Contentful Paint (LCP)
Le immagini possono essere candidate per il LCP. Ciò significa che le dimensioni di un'immagine influiscono sul suo tempo di caricamento. Quando un'immagine è un candidato LCP, codificarla in modo efficiente è fondamentale per migliorarla.
Dovresti cercare di applicare i consigli forniti in questo articolo in modo che il rendimento percettivo di una pagina sia il più rapido possibile per tutti gli utenti. La metrica LCP fa parte delle prestazioni percettive, in quanto misura la velocità di visualizzazione dell'elemento più grande (e quindi più percepibile) sulla pagina.