La prima domanda che dovresti porti è se un'immagine è effettivamente necessaria per ottenere l'effetto che cerchi. Se puoi eliminare una risorsa immagine, che spesso richiede un numero elevato di byte rispetto a HTML, CSS, JavaScript e altri asset nella pagina, si tratta sempre della strategia di ottimizzazione migliore. Detto questo, un'immagine ben posizionata può anche comunicare più informazioni di mille parole, quindi sta a te trovare il giusto equilibrio.
Successivamente, valuta se esiste una tecnologia alternativa che potrebbe offrire risultati migliori, ma in modo più efficiente:
- Gli effetti CSS (ad esempio ombre o sfumature) e le animazioni CSS possono essere utilizzati per produrre asset indipendenti dalla risoluzione che appaiono sempre nitidi a ogni risoluzione e livello di zoom, spesso con una frazione dei byte richiesti da un file immagine.
- I caratteri web consentono di utilizzare caratteri tipografici belli, mantenendo la possibilità di selezionare, cercare e ridimensionare il testo, il che rappresenta un miglioramento significativo dell'usabilità.
Se ti trovi a dover codificare il testo in un asset immagine, fermati e ripensaci. Una buona tipografia è fondamentale per un buon design, un buon branding e una buona leggibilità, ma il testo nelle immagini offre un'esperienza utente scadente: il testo non è selezionabile, non è possibile cercarlo, non è possibile aumentare lo zoom, non è accessibile e non è adatto ai dispositivi ad alta risoluzione. L'utilizzo dei caratteri web richiede un proprio insieme di ottimizzazioni, ma risolve tutti questi problemi ed è sempre una scelta migliore per la visualizzazione del testo.
Scegli il formato dell'immagine giusto
Se hai la certezza che un'immagine sia l'opzione corretta, devi selezionare con attenzione il tipo di immagine giusto per il job.
- La grafica vettoriale utilizza linee, punti e poligoni per rappresentare un'immagine.
- Le grafica raster rappresentano 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 le immagini costituite da forme geometriche meno complesse, come loghi, testo o icone. Offrono risultati nitidi a ogni risoluzione e impostazione di zoom, il che li rende un formato ideale per schermi e asset ad alta risoluzione che devono essere visualizzati in dimensioni diverse.
Tuttavia, i formati vettoriali non sono adatti quando la scena è complicata (ad esempio una foto): la quantità di markup SVG per descrivere tutte le forme può essere proibitiva e l'output potrebbe non avere ancora un aspetto "fotorealistico". In questo caso, devi utilizzare un formato immagine raster come PNG, JPEG, WebP o AVIF.
Le immagini raster non hanno le stesse proprietà utili di essere indipendenti dalla risoluzione o dallo zoom. Quando aumenti le dimensioni di un'immagine raster, vedrai immagini frastagliate e sfocate. Di conseguenza, potrebbe essere necessario salvare più versioni di un'immagine raster a varie risoluzioni per offrire un'esperienza ottimale agli utenti.
Implicazioni degli schermi ad alta risoluzione
Esistono due tipi diversi di pixel: pixel CSS e pixel del dispositivo. Un singolo pixel CSS può corrispondere direttamente a un singolo pixel del dispositivo o essere supportato da più pixel del dispositivo. Qual è il punto? Più pixel sono presenti sul dispositivo, più dettagliati saranno i contenuti visualizzati sullo schermo.
Gli schermi con DPI elevato (HiDPI) producono risultati straordinari, ma esiste un ovvio compromesso: gli asset immagine richiedono più dettagli per sfruttare il numero di pixel più elevato del dispositivo. La buona notizia è che le immagini vettoriali sono ideali per questa attività, poiché possono essere visualizzate a qualsiasi risoluzione con risultati nitidi. Potresti sostenere un costo di elaborazione più elevato per visualizzare i dettagli più fini, ma la risorsa sottostante è la stessa ed è indipendente dalla risoluzione.
Le immagini raster, invece, rappresentano una sfida molto più grande perché codificano i dati delle immagini in base al pixel. Di conseguenza, maggiore è il numero di pixel, maggiori sono le dimensioni del file di un'immagine raster. Considera la differenza tra una risorsa fotografica visualizzata 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 quattro: il doppio del numero di pixel orizzontali, moltiplicato per il doppio del numero di pixel verticali. Di conseguenza, uno schermo "2x" non raddoppia, ma quadruplica il numero di pixel necessari.
Cosa significa tutto questo in pratica? Gli schermi ad alta risoluzione ti consentono di pubblicare immagini bellissime, che possono essere un'ottima funzionalità del prodotto. Tuttavia, gli schermi ad alta risoluzione richiedono anche immagini ad alta risoluzione, pertanto:
- Se possibile, preferisci le immagini vettoriali perché sono indipendenti dalla risoluzione e offrono sempre risultati nitidi.
- Se è necessaria un'immagine raster, pubblica immagini responsive.
Funzionalità di diversi formati di immagini raster
Oltre a diversi algoritmi di compressione con e senza perdita di dati, diversi formati di immagine supportano funzionalità diverse, come canali di animazione e trasparenza (alpha). Di conseguenza, la scelta del "formato giusto" per una determinata immagine è una combinazione di risultati visivi e requisiti funzionali appropriati.
| Formato | Trasparenza | Animazione | Browser |
|---|---|---|---|
| PNG | Sì | Sì (APNG) | Tutti |
| JPEG | No | No | Tutti |
| WebP | Sì | Sì | Tutti i browser moderni. Vedi Posso utilizzare? |
| AVIF | Sì | Sì | Tutti i browser moderni. Vedi Posso usare? |
Esistono due formati di immagini raster universalmente supportati: PNG e JPEG. Oltre a questi formati, i browser moderni supportano i formati di immagine WebP e AVIF più recenti. Entrambi i formati più recenti offrono una compressione complessiva migliore e più funzionalità. Quindi, quale formato dovresti utilizzare?
In genere, WebP e AVIF offrono una compressione migliore rispetto ai formati precedenti e dovrebbero essere utilizzati, se possibile. Puoi utilizzare immagini WebP o AVIF insieme a un'immagine JPEG o PNG come opzione di riserva. Per ulteriori dettagli, consulta la sezione Utilizzare le immagini WebP.
Per quanto riguarda i formati delle immagini meno recenti, tieni presente quanto segue:
- Hai bisogno di animazione? Utilizza gli elementi
<video>.- E le GIF? Il formato GIF limita la tavolozza dei colori a massimo 256 colori e crea dimensioni dei file notevolmente maggiori rispetto agli elementi
<video>. APNG offre più colori rispetto alle GIF, ma è anche molto più grande dei formati video di qualità visiva ragionevolmente equivalente. Consulta Sostituisci le GIF animate con un video.
- E le GIF? Il formato GIF limita la tavolozza dei colori a massimo 256 colori e crea dimensioni dei file notevolmente maggiori rispetto agli elementi
- Devi preservare i dettagli fini con la massima risoluzione? Utilizza PNG o WebP senza perdita di dati.
- PNG non applica algoritmi di compressione con perdita oltre alla scelta delle dimensioni della tavolozza dei colori. Di conseguenza, produrrà l'immagine di massima qualità, ma a un costo di dimensioni del file notevolmente superiori rispetto ad altri formati. Utilizza con giudizio.
- WebP ha una modalità di codifica senza perdita di dati che potrebbe essere più efficiente del PNG.
- Se l'asset immagine contiene immagini composte da figure geometriche, ti consigliamo di convertirlo in un formato vettoriale (SVG).
- Se l'asset immagine contiene testo, fermati e riconsidera la scelta. Il testo nelle immagini non è selezionabile, non è possibile eseguire ricerche al suo interno né è possibile aumentare lo zoom. Se vuoi trasmettere un look personalizzato (per il branding o altri motivi), utilizza un carattere web.
- Stai ottimizzando una foto, uno screenshot o un asset immagine simile? Utilizza JPEG, WebP con perdita di dati o AVIF.
- JPEG utilizza una combinazione di ottimizzazione con perdita e senza perdita per ridurre le dimensioni del file della risorsa immagine. Prova diversi livelli di qualità JPEG per trovare il miglior compromesso tra qualità e dimensioni del file per il tuo asset.
- WebP con perdita di dati o AVIF con perdita di dati sono ottime alternative al JPEG per le immagini con qualità web, ma tieni presente che la modalità con perdita di dati elimina alcune informazioni per ottenere immagini più piccole. Ciò significa che alcuni colori potrebbero non essere gli stessi di un JPEG equivalente.
Infine, tieni presente che se utilizzi un componente WebView per visualizzare i contenuti nella tua applicazione specifica per la piattaforma, hai il controllo completo del client e puoi utilizzare WebP esclusivamente. Facebook e molti altri utilizzano WebP per pubblicare tutte le loro immagini all'interno delle loro applicazioni. I risparmi valgono sicuramente la pena.
Impatto su Largest Contentful Paint (LCP)
Le immagini potrebbero essere candidate per la LCP. Ciò significa che le dimensioni di un'immagine influiscono sul relativo tempo di caricamento. Quando un'immagine è un candidato LCP, la sua codifica in modo efficiente è fondamentale per migliorare il valore LCP.
Dovresti cercare di applicare i consigli forniti in questa guida in modo che il rendimento percettivo di una pagina sia il più veloce possibile per tutti gli utenti. LCP fa parte delle prestazioni percettive, in quanto misura la velocità di visualizzazione dell'elemento più grande (e quindi più percepibile) della pagina.