I display con un'alta densità di pixel stanno rapidamente diventando la norma. I creator di contenuti devono adattarsi a questo aspetto. Questa è una breve guida su come caricare immagini di alta qualità sul web oggi, senza polyfill, JavaScript, hack CSS e funzionalità del browser non ancora implementate. In una parola: senza modifiche drastiche al flusso di lavoro.
Al momento esistono molte proposte di immagini adattabili, molte delle quali comportano cambiamenti significativi per lo sviluppatore web. L'attributo srcset
<img> secondo lo standard è difficile da implementare, soprattutto con la complessità della selezione aggiuntiva basata sul viewport di srcset:
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
Anche se la proprietà CSS image-set utilizza devicePixelRatio solo per decidere quale immagine caricare, costringe comunque gli sviluppatori a scrivere molto markup aggiuntivo per ogni immagine.
Altre proposte, come l'elemento <picture>, sono ancora più dettagliate.
Inoltre, non sono conformi agli standard, pertanto la loro disponibilità ubiquita è ancora più lontana rispetto all'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 elevate e su quelli normali. Ai fini di questa discussione, qualsiasi dispositivo che riporti un valore window.devicePixelRatio superiore a 1 può essere considerato ad alta risoluzione, poiché significa che i pixel CSS non sono uguali ai pixel del dispositivo e che le immagini vengono ridimensionate.
Ecco un riepilogo:
- Se possibile, utilizza CSS/SVG anziché immagini raster.
- Utilizza immagini ottimizzate per display ad alta densità per impostazione predefinita.
- Utilizza i file PNG per disegni semplici e pixel art (ad es. loghi).
- Utilizza file JPEG compressi per immagini con diversi colori (ad es. foto).
- Imposta sempre dimensioni esplicite (utilizzando CSS o HTML) per tutti gli elementi dell'immagine.
Disegni semplici e pixel art
Spesso le immagini piccole possono essere evitate del tutto utilizzando le funzionalità CSS o SVG.
Non è necessario utilizzare immagini per gli angoli arrotondati, ad esempio, poiché la proprietà CSS border-radius è ampiamente supportata. Analogamente, i caratteri personalizzati sono ampiamente supportati, pertanto l'utilizzo di testo "in formato immagine" è sconsigliato.
Tuttavia, in alcuni casi, come i loghi, un'immagine potrebbe essere l'unico modo per procedere. Ad esempio, questo logo di Chrome ha una dimensione naturale di 256 x 256. Su un display Retina, puoi vedere l'aliasing delle linee nelle diagonali e nelle curve, che risultano poco nitide e di scarsa qualità, soprattutto se paragonate al testo visualizzato in modo nitido:
Dimensioni naturali: 256x256px, dimensioni dell'asset: 31 kB, formato: PNG
Sei convinto? Bene. Ora utilizziamo un'immagine ad alta densità. Potresti essere tentato di risparmiare spazio archiviando il logo come JPEG, ma questa potrebbe non essere una buona idea, poiché il salvataggio di loghi e altre immagini 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 le bande sui gradienti, le macchie sugli sfondi bianchi e le linee disordinate:
Dimensioni naturali: 512x512px, dimensioni dell'asset: 13 kB, formato: JPEG
Per le immagini relativamente piccole, è consigliabile utilizzare file PNG doppi. Tieni presente che la differenza di dimensioni tra un'immagine PNG 1x e 2x è generalmente abbastanza elevata (in questo caso 52 kB). Tuttavia, nel caso del logo, si tratta del volto del tuo sito web e della prima cosa che i visitatori vedono. Se risparmi troppo sulla qualità in cambio delle dimensioni, sarà anche l'ultima cosa che vedranno i tuoi visitatori.
Ecco il logo di Chrome in tutta la sua gloria, ridotto a metà delle dimensioni naturali per i display 2x:
Dimensioni naturali: 512x512px, dimensioni asset: 83 kB, formato: PNG
Il markup per eseguire il rendering riportato sopra è il seguente:
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
Tieni presente che ho specificato una larghezza e un'altezza per l'immagine. Questo è necessario perché le dimensioni naturali dell'immagine sono 512 pixel. È anche positivo per le prestazioni perché il motore di rendering ha una buona comprensione delle dimensioni dell'elemento e non dovrà lavorare troppo per calcolarle.
Una possibile ottimizzazione potrebbe essere quella di ridurre il file PNG a 24 bit a uno a 8 bit con una tavolozza. Questo metodo funziona per le immagini con un numero ridotto di colori, incluso il logo di Chrome. Per effettuare questa ottimizzazione, puoi usare uno strumento come http://pngquant.org/. Qui si vede un po' di banding, ma questo file ha solo 13 kB, il che significa un enorme risparmio di dimensioni rispetto al formato PNG originale 512 x 512.
Dimensioni naturali: 512x512px, dimensioni dell'asset: 13 kB, formato: PNG,
8-bit palette
Immagini con una varietà di colori
Ho scritto un articolo HTML5Rocks che esamina varie tecniche di immagine reattiva e ho fatto delle ricerche sulla compressione di JPEG 1x e 2x e confrontando le dimensioni risultanti e la qualità visiva. Ecco uno di questi riquadri dall'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 base ai numeri). La cosa interessante qui è che l'immagine 2x altamente compressa (con etichetta 3) è di dimensioni inferiori ed ha un aspetto migliore rispetto all'immagine 1x non compressa (etichettata 4). In altre parole, tra le immagini 4 e 3, abbiamo migliorato la qualità dell'immagine raddoppiando ogni dimensione e aumentando notevolmente la compressione, riducendo al contempo le dimensioni di 2 kB.
Compressione, dimensioni e qualità visiva
Volevo saperne di più sui 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:
Ipotesi?
Con una compressione sufficiente, un'immagine 2x sarà equivalente alla stessa immagine con dimensioni 1x con un'altra 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 gruppi di immagini affiancati.
- Individua il punto nei due insiemi in cui le immagini sono equivalenti.
- Prendi nota delle dimensioni e dei livelli di compressione delle immagini equivalenti.
- Prova con entrambi i display 1x e 2x.
Ho creato un'app di confronto di immagini affiancate simile alla visualizzazione di confronto di Lightroom. L'obiettivo è mostrare immagini 1x e 2x affiancate, ma anche consentire di ingrandire qualsiasi sezione dell'immagine per ottenere maggiori dettagli. Puoi anche selezionare i formati JPEG e WebP e modificare la qualità di compressione per confrontare le dimensioni dei file e la qualità delle immagini. L'idea è modificare le impostazioni su più immagini, scoprire quale compromesso tra qualità della compressione, ridimensionamento e formato e qualità dell'immagine ti è più congeniale e utilizzare questa impostazione per tutte le tue immagini.
Lo strumento stesso è disponibile per il tuo utilizzo. Puoi aumentare lo zoom dell'immagine selezionando una sottoarea da ingrandire.
Analisi
Ti dico subito che la qualità dell'immagine è un concetto soggettivo. Inoltre, il tuo caso d'uso specifico determinerà probabilmente le tue priorità nello spettro della fedeltà visiva rispetto alle dimensioni del file. Inoltre, tipi diversi di funzionalità delle immagini reagiscono in modo diverso alla qualità di scalabilità e compressione, quindi una soluzione unica per tutti potrebbe non funzionare necessariamente in questo caso. Lo scopo dello strumento è aiutarti a farti un'intuizione per compressione, scale e formati della qualità delle immagini.
Dopo aver provato lo zoom delle immagini, ho notato subito alcune cose. Innanzitutto, preferisco le immagini quality=30 dpr=2x a quelle quality=90
dpr=1x per l'aumento dei dettagli. Queste immagini sono paragonabili anche per le dimensioni del file (nel caso dell'aereo, l'immagine 2x compressa è di 76 kB, mentre quella 1x non compressa è di 80 kB).
Le eccezioni a questa regola sono le immagini altamente compresse (quality<30) con gradienti. Tendono a soffrire di banding cromatico, che è altrettanto scadente indipendentemente dalla scala dell'immagine. I campioni di uccelli e auto trovati nello strumento
sono esempi di questo.
Le immagini WebP risultano molto più pulite rispetto a JPEG, soprattutto a bassi livelli di compressione. Questo effetto banding dei colori sembra essere molto meno problematico. Infine, le immagini WebP sono molto più compatte.
Limitazioni e fine
Fare in modo che le immagini abbiano un aspetto soddisfacente su display ad alta densità è solo la metà dei problemi relativi 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, il ritratto di Obama potrebbe essere appropriato per uno schermo di dimensioni simili a quelle di uno smartphone, ma il supporto davanti a lui e la bandiera dietro di lui potrebbero essere più adatti al display di un laptop.
Ho evitato deliberatamente questo argomento "art direction" per concentrarmi solo sulle immagini ad alta DPI. Questo problema può essere risolto con diversi approcci: utilizzando query sui contenuti multimediali e immagini di sfondo, tramite JavaScript, tramite alcune nuove funzionalità come image-set o sul server. Questo argomento è trattato nella pagina Immagini ad alta DPI per densità di pixel variabili.
Prima di salutarti, ecco alcuni problemi in sospeso:
- Effetti della compressione elevata sul rendimento. Quali sono le penalità per la decodifica di immagini altamente compresse?
- Quali sono le penalizzazioni del rendimento dovute alla necessità di ridurre le dimensioni dell'immagine quando un'immagine 2x viene caricata su un display 1x?
Riassumendo, opta per CSS e SVG anziché utilizzare immagini raster. Se le immagini raster sono strettamente necessarie, utilizza i file PNG per le immagini con una tavolozza limitata e molti colori a tinta unita e i file JPEG per le immagini con molti colori e sfumature. L'aspetto migliore di questo approccio è che il markup è praticamente invariato. Lo sviluppatore web deve solo generare il doppio degli asset e ridimensionare correttamente le immagini nel DOM.
Per ulteriori informazioni, consulta l'articolo di Scott Jehl su un argomento simile. Che le immagini siano nitide e che l'utilizzo dei dati cellulari sia ridotto!