I display con un'elevata densità di pixel stanno rapidamente diventando la norma. I creator di contenuti devono adattarsi a questo aspetto. Questa è una breve guida su come pubblicare oggi stesso immagini di alta qualità sul web, senza polyfill, JavaScript, hack CSS e funzionalità del browser ancora non ancora implementate. In una parola, senza modifiche drastiche al tuo flusso di lavoro.
Attualmente esistono molte proposte di immagini adattabili, molte delle quali comportano
modifiche significative per lo sviluppatore web. L'attributo traccia standard srcset
<img> è difficile da implementare, soprattutto a causa della
complessità della selezione aggiuntiva basata sull'area visibile di srcset:
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
Anche se la proprietà CSS image-set utilizza solo devicePixelRatio per decidere quale immagine caricare, obbliga gli sviluppatori a scrivere molto markup in più per ogni immagine.
Altre proposte, come l'elemento <picture>, sono ancora più dettagliate.
Inoltre, poiché non sono di tipo standard, la loro disponibilità onnipresente
è ancora più lontana dall'attributo srcset. Le soluzioni JavaScript e lato server sono l'unica altra alternativa, ma questi approcci presentano i propri svantaggi, come descritto in altri articoli.
Questo articolo illustra diversi utilizzi delle immagini comunemente presenti sul web e propone soluzioni semplici che funzionano su schermi con densità di pixel elevata oltre che su quelli ordinari. Ai fini di questa discussione, qualsiasi dispositivo che segnala window.devicePixelRatio maggiore di 1 può essere considerato con DPI elevato, in quanto ciò significa che i pixel CSS non sono uguali ai pixel del dispositivo e le immagini vengono ingrandite.
Ecco un riepilogo:
- Se possibile, utilizza CSS/SVG anziché immagini raster.
- Utilizza immagini ottimizzate per schermi ad alta densità per impostazione predefinita.
- Utilizza i file PNG per disegni semplici e pixel art (ad es. loghi).
- Utilizza JPEG compressi per immagini in diversi colori (ad es. foto).
- Imposta sempre dimensioni esplicite (utilizzando CSS o HTML) in tutti gli elementi dell'immagine.
Disegni semplici e pixel art
Spesso le immagini di piccole dimensioni possono essere completamente evitate utilizzando le funzionalità CSS o il formato SVG.
Ad esempio, non è necessario utilizzare immagini per gli angoli arrotondati, poiché la proprietà CSS border-radius è ampiamente supportata. Analogamente, i caratteri personalizzati sono ampiamente supportati, quindi l'utilizzo di testo "con immagini" è sconsigliato.
Tuttavia, in alcuni casi, come i loghi, un'immagine può essere l'unico modo per procedere. Ad esempio, il logo di Chrome ha una dimensione naturale di 256 x 256. Sui display Retina puoi vedere l'aliasing delle linee in diagonali e curve, che appare grosso e scadente, soprattutto rispetto a un testo visualizzato in modo nitido:
Dimensioni naturali: 256x256px, dimensioni asset: 31 kB, formato: PNG
Sei convinto? Bene. Ora usiamo un'immagine ad alta densità. Potresti avere la tentazione di risparmiare spazio memorizzando il logo in formato JPEG, ma questa potrebbe non essere una buona idea, dal momento che salvare loghi e altri elementi grafici in un formato con perdita di dati tende a introdurre artefatti. In questo caso, ho esagerato il problema utilizzando una compressione molto elevata, ma noto la banding sui gradienti, le macchie sugli sfondi bianchi e le linee caotiche:
Dimensioni naturali: 512x512px, dimensioni asset: 13 kB, formato: JPEG
Per immagini relativamente piccole, la cosa da fare è utilizzare file PNG 2x. Tieni presente che la differenza di dimensioni tra un file PNG 1x e 2x è generalmente piuttosto elevato (52 kB in questo caso). Tuttavia, nel caso di un logo, è il volto del tuo sito web ed è la prima cosa che vedranno i visitatori. Si tratta dell'ultima cosa che i visitatori vedranno, perché un'eccessiva riduzione della qualità in cambio delle dimensioni sarà l'ultima cosa che vedranno.
Ecco il logo Chrome in tutto il suo splendore, ridotto alla metà delle sue dimensioni naturali per display 2x:
Dimensioni naturali: 512x512px, dimensioni asset: 83 kB, formato: PNG
Il markup per il rendering riportato sopra è il seguente:
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
Tieni presente che ho specificato la larghezza e l'altezza dell'immagine. Questo è necessario perché le dimensioni naturali dell'immagine sono pari a 512 px. È utile anche per le prestazioni perché il motore di rendering ha una buona conoscenza delle dimensioni dell'elemento e non dovrà lavorare troppo a fondo per calcolarlo.
Una possibile ottimizzazione che potrebbe funzionare è ridurre il formato PNG a 24 bit a uno a 8 bit. Funziona con le immagini con pochi colori, incluso il logo Chrome. Per questa ottimizzazione, puoi usare uno strumento come http://pngquant.org/. Qui puoi vedere un po' di banding, ma questo file ha solo 13 kB, ovvero un enorme risparmio di dimensioni 6 volte rispetto al formato PNG originale 512 x 512.
Dimensioni naturali: 512x512px, dimensioni asset: 13 kB, formato: PNG,
8-bit palette
Immagini con una varietà di colori
Ho scritto un articolo su HTML5Rocks per esaminare diverse tecniche di immagini reattive e ho fatto alcune ricerche sulla compressione dei formati JPEG 1x e 2x e confrontando le dimensioni risultanti e la qualità visiva. Ecco uno di questi riquadri dell'articolo precedente:
Ho etichettato le immagini con il livello di compressione (indicato dalla qualità JPEG), le dimensioni (in byte) e la mia opinione soggettiva sulla fedeltà visiva comparativa (classificata in numeri). La cosa interessante qui è che l'immagine 2x altamente compressa (etichetta 3) ha dimensioni più piccole e ha un aspetto migliore rispetto all'immagine 1x non compressa (etichettata 4). In altre parole, tra le immagini 4 e 3, siamo riusciti a migliorare la qualità dell'immagine raddoppiando ogni dimensione e aumentando significativamente la compressione, riducendo al contempo le dimensioni di 2 kB.
Compressione, dimensioni e qualità visiva
Volevo capire meglio i compromessi tra livello di compressione, dimensioni delle immagini, qualità visiva e dimensioni delle immagini. Ho condotto uno studio con la seguente ipotesi basata sullo studio sopra riportato:
Ipotesi
Con una compressione sufficiente, un'immagine 2x sarà equivalente alla stessa immagine con dimensioni 1x a un valore di compressione (inferiore). Tuttavia, in questo caso, l'immagine 2x altamente compressa avrà dimensioni inferiori rispetto all'immagine 1x.
Processo
- Data un'immagine 2x, genera quella 1x.
- Comprimi entrambe le immagini a vari livelli.
- Crea una pagina di test che mostri entrambi i set di immagini affiancati.
- Nei due insiemi, individua il punto in cui le immagini sono equivalenti.
- Prendi nota di dimensioni e livelli di compressione delle immagini equivalenti.
- Provalo su entrambi i display 1x e 2x.
Ho creato un'app per il confronto di immagini affiancate, simile a Confronta visualizzazione di Lightroom. L'intenzione è quella di mostrare immagini 1x e 2x una accanto all'altra, ma anche di aumentare lo zoom in qualsiasi sezione dell'immagine per ottenere maggiori dettagli. Puoi anche scegliere tra i formati JPEG e WebP e modificare la qualità di compressione per confrontare le dimensioni dei file e la qualità delle immagini. L'idea è quella di modificare le impostazioni di più immagini, capire quale compromesso tra qualità di compressione, scalabilità, formato e qualità dell'immagine è più adatto alle tue esigenze e utilizzare questa impostazione per tutte le tue immagini.
Lo strumento stesso è disponibile per l'utilizzo. Puoi aumentare lo zoom nell'immagine selezionando un'area secondaria da ingrandire.
Analisi
Direi che la qualità dell'immagine è soggettiva. Inoltre, il tuo caso d'uso specifico determinerà probabilmente dove si trovano le tue priorità nella fedeltà visiva e nello spettro della dimensione dei file. Inoltre, diversi tipi di caratteristiche delle immagini reagiscono in modo diverso alla scalabilità e alla qualità della compressione, pertanto una soluzione che si adatta a tutti potrebbe non funzionare necessariamente in questo caso. Lo scopo di questo strumento è aiutarti a farti un'idea di compressioni, scale e formati della qualità delle immagini.
Con lo zoom delle immagini, mi sono subito reso conto
di alcune cose. Innanzitutto, preferisco quality=30 dpr=2x immagini piuttosto che quality=90
dpr=1x immagini per aumentare i dettagli. Queste immagini sono paragonabili anche per quanto riguarda le dimensioni dei file (nel caso dell'aereo, l'immagine compressa 2x è di 76 kB, mentre la dimensione 1x non compressa è di 80 kB).
Le eccezioni a questa regola sono immagini altamente compresse (quality<30) con gradienti. Questi presentano spesso bande di colori, il che è altrettanto negativo
indipendentemente dalla scala delle immagini. I campioni di auto e uccelli trovati nello
strumento ne sono un esempio.
Le immagini WebP sono molto più nitide del formato JPEG, soprattutto a livelli di compressione bassi. Questa banding di colore sembra essere molto meno un problema. Infine, le immagini WebP sono molto più compatte.
Precisazioni e pinne
Fare in modo che le immagini abbiano una buona qualità su display ad alta densità è solo metà dei problemi legati alle immagini causati da un'enorme variazione degli schermi. In alcuni casi, potresti voler pubblicare immagini completamente diverse a seconda delle dimensioni dell'area visibile. Ad esempio, la foto ritratto di Obama potrebbe essere adatta a uno schermo delle dimensioni di un telefono, ma il supporto che si trova davanti e la bandiera dietro di lui potrebbero essere più adatti per il display di un laptop.
Ho deliberatamente evitato l'argomento "art director" per concentrarmi solo sulle immagini con DPI elevato. Questo problema può essere risolto con una serie di approcci diversi: utilizzando query supporti e immagini di sfondo, tramite JavaScript, tramite alcune nuove funzionalità come image-set o sul server. Questo argomento è
trattato in Immagini ad alta DPI per densità di pixel variabili.
Lo disconnetterò con alcuni problemi aperti:
- Effetti di un'elevata compressione sulle prestazioni. Quali sono le penalità della decodifica di immagini altamente compresse?
- Quali sono le penalità delle prestazioni dovute al ridimensionamento di un'immagine quando un'immagine 2x viene caricata su un display 1x?
Per riepilogare, scegli CSS e SVG anziché utilizzare immagini raster. Se devi obbligatoriamente utilizzare le immagini raster, utilizza i file PNG per le immagini con una gamma limitata di tavolozze e molti colori a tinta unita e il formato JPEG per le immagini con molti colori e sfumature. Il grande vantaggio di questo approccio è che il markup è rimasto praticamente invariato. Tutto ciò che deve fare lo sviluppatore web è generare asset doppi e ridimensionare correttamente le immagini nel DOM.
Per ulteriori approfondimenti, consulta l'articolo di Scott Jehl su un argomento simile. che le immagini siano nitide e che l'utilizzo dei dati della cella sia basso.