La prima domanda che dovresti porti è se un'immagine sia, anzi, necessarie per ottenere l'effetto che stai cercando. Se puoi eliminare una risorsa immagine, che spesso richiedono un numero elevato di byte rispetto a HTML, CSS, JavaScript e altri asset presenti sulla pagina, questa è sempre la strategia di ottimizzazione migliore. Detto questo, un'immagine ben posizionata può comunicare più informazioni di mille parole. quindi spetta a te trovare questo equilibrio.
Successivamente, devi valutare se esiste una tecnologia alternativa in grado di fornire risultati migliori. ma in modo più efficiente:
- Effetti CSS (ad esempio ombre o sfumature) e animazioni CSS può essere utilizzato per produrre asset indipendenti dalla risoluzione che sono sempre nitidi a ogni risoluzione e livello di zoom, spesso solo una frazione dei byte richiesti da un file immagine.
- I caratteri web consentono l'utilizzo di caratteri tipografici originali mantenendo la capacità di selezionare, cercare e ridimensionarlo, un miglioramento significativo nell'usabilità.
Se ti capita di non riuscire a codificare un testo in un asset immagine, interrompi la codifica e riconsidera la procedura. Un'ottima tipografia è fondamentale per migliorare il design, il branding e la leggibilità, ma il testo nelle immagini offre un'esperienza utente scadente: il testo non sia selezionabile, non disponibile per la ricerca o zoomabile, non accessibili e non adatte ai dispositivi con una risoluzione elevata di DPI. L'utilizzo dei caratteri web richiede un proprio insieme di ottimizzazioni, ma risolve tutti questi problemi ed è sempre la 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 più adatto al lavoro.
- Grafica vettoriale utilizzare linee, punti e poligoni per rappresentare un'immagine.
- Grafica raster rappresentare un'immagine codificando i singoli valori di ciascun pixel all'interno di una griglia rettangolare.
Ogni formato presenta una serie di vantaggi e svantaggi. I formati vettoriali sono ideali per immagini costituite da forme geometriche meno complesse come loghi, testo o icone. Garantiscono risultati nitidi con ogni risoluzione e impostazione di zoom, il che li rende un formato ideale per gli schermi e le risorse ad alta risoluzione che devono essere visualizzate in varie dimensioni.
Tuttavia, i formati vettoriali non sono soddisfacenti quando la scena è complicata (ad esempio, una foto): la quantità di markup SVG per descrivere tutte le forme può essere elevata e l'output potrebbe comunque non essere "fotorealistico". In questo caso è consigliabile utilizzare un formato immagine raster come PNG, JPEG, WebP o AVIF.
Le immagini raster non hanno le stesse proprietà interessanti della risoluzione o dello zoom indipendente Quando fai lo scale up di un'immagine raster, vedrai elementi grafici frastagliati e sfocati. Potrebbe quindi essere necessario salvare più versioni di un'immagine raster a diverse risoluzioni. per offrire agli utenti un'esperienza ottimale.
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 del dispositivo oppure essere supportato da più pixel del dispositivo. Qual è il punto? Beh, maggiore è il numero di pixel del dispositivo, più dettagliati saranno i dettagli dei contenuti visualizzati sullo schermo.
Gli schermi con elevato DPI (HiDPI) producono risultati stupendi, ma c'è un ovvio compromesso: gli asset immagine richiedono più dettagli per sfruttare il numero di pixel più elevato. La buona notizia è che le immagini vettoriali sono ideale per questo compito, poiché possono essere visualizzati a qualsiasi risoluzione con risultati nitidi, potresti incorrere in costi di elaborazione più elevati per eseguire il rendering di dettagli più piccoli, ma la risorsa sottostante è la stessa ed è indipendente dalla risoluzione.
D'altra parte, le immagini raster rappresentano una sfida molto più grande perché codificano i dati immagine in base al pixel. Pertanto, maggiore è il numero di pixel, maggiori saranno le dimensioni del file di un'immagine raster. Considera la differenza tra un asset foto visualizzato a 100 x 100 pixel (CSS):
| Risoluzione dello schermo | Pixel totali | Dimensioni del file non compresso (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 un fattore di quattro: il doppio dei pixel orizzontali è moltiplicato per il doppio dei pixel verticali. Pertanto, un valore "2x" lo schermo non solo raddoppia, ma quadruplica il numero di pixel necessari.
Ma cosa significa nella pratica? Gli schermi ad alta risoluzione ti consentono di creare immagini stupende, il che può essere un'ottima caratteristica del prodotto. Tuttavia, gli schermi ad alta risoluzione richiedono anche immagini ad alta risoluzione, pertanto:
- Scegli la preferenza per le immagini vettoriali, quando possibile, in quanto sono indipendenti dalla risoluzione e garantiscono sempre risultati nitidi.
- Se è necessaria un'immagine raster, pubblica immagini adattabili.
Caratteristiche dei diversi formati di immagini raster
Oltre a diversi algoritmi di compressione con perdita di dati e perdita, formati di immagine diversi supportano diverse funzioni, come canali di animazione e trasparenza (alfa). Di conseguenza, la scelta del "formato giusto" per una determinata immagine è la combinazione dei risultati visivi appropriati e dei requisiti funzionali.
| Formato | Trasparenza | Animazione | Browser |
|---|---|---|---|
| PNG | Sì | Sì (APNG) | Tutte |
| JPEG | No | No | Tutte |
| WebP | Sì | Sì | Tutti i browser moderni. Vedi la sezione Posso utilizzare? |
| AVIF | Sì | Sì | Tutti i browser moderni. Vedi la sezione Posso utilizzare? |
Esistono due formati di immagine raster universalmente supportati: PNG e JPEG. Oltre a questi formati, i browser moderni supportano i più recenti formati di immagine WebP e AVIF. Entrambi i formati più recenti offrono una compressione complessiva migliore e un maggior numero di funzionalità. Allora, quale formato dovresti usare?
WebP e AVIF forniscono generalmente 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 alternativa. Per maggiori dettagli, vedi Utilizzare immagini WebP.
Per quanto riguarda i formati delle immagini meno recenti, considera quanto segue:
- Hai bisogno di animazioni? Utilizza gli elementi
<video>.- E le GIF? La GIF limita la tavolozza dei colori a un massimo di 256 colori,
e crea file di dimensioni notevolmente maggiori rispetto agli elementi
<video>. APNG offre più colori rispetto al formato GIF, ma è anche molto più grande di quello video formati di qualità visiva ragionevolmente equivalente. Consulta Sostituisci le GIF animate con un video.
- E le GIF? La GIF limita la tavolozza dei colori a un massimo di 256 colori,
e crea file di dimensioni notevolmente maggiori rispetto agli elementi
- Hai bisogno di preservare i dettagli con la massima risoluzione? Usa un file PNG o WebP senza perdita di dati.
- Il formato PNG non applica algoritmi di compressione con perdita di dati, oltre alla scelta della dimensione della tavolozza dei colori. Di conseguenza, produrrà immagini della massima qualità, ma a un costo notevolmente maggiore rispetto ad altri formati. Da usare con accortezza.
- WebP ha una modalità di codifica senza perdita di dati che potrebbe essere più efficiente di 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 riconsidera. Il testo nelle immagini non è selezionabile, disponibile per la ricerca o zoomabile. Se devi dare un look personalizzato (per il branding o per altri motivi), usa un carattere web.
- Stai ottimizzando una foto, uno screenshot o un asset immagine simile? Utilizza JPEG, Losy WebP o AVIF.
- JPEG utilizza una combinazione di ottimizzazione con perdita e senza perdita di dati per ridurre le dimensioni del file dell'asset immagine. Prova diversi livelli di qualità JPEG per trovare il miglior compromesso tra la qualità e le dimensioni del file per il tuo asset.
- WebP con perdita di dati o AVIF con perdita di dati sono ottime alternative JPEG per immagini di qualità web, ma tieni presente che la modalità con perdita di dati ignora alcune informazioni per ottenere immagini più piccole. Ciò significa che i colori selezionati potrebbero non essere uguali a un file JPEG equivalente.
Infine, tieni presente che se utilizzi un componente WebView per eseguire il rendering dei contenuti nella tua applicazione specifica per la piattaforma, avrai il controllo completo del client e potrai utilizzare esclusivamente WebP! Facebook e molti altri utilizzano WebP per distribuire tutte le loro immagini all'interno delle loro applicazioni: il risparmio è davvero valsa la pena.
Impatto sulla visualizzazione più grande con contenuti (LCP)
Le immagini potrebbero essere candidati LCP. Ciò significa che le dimensioni di un'immagine influiscono sul tempo di caricamento. Quando un'immagine è una candidata LCP, è fondamentale codificarla in modo efficiente per migliorarla.
Ti consigliamo di applicare i consigli contenuti in questa guida in modo che il rendimento percettivo di una pagina sia il più rapido possibile per tutti gli utenti. L'LCP fa parte del rendimento percettivo poiché misura la velocità di visualizzazione dell'elemento più grande (e quindi più percepibile) sulla pagina.