Utilizza descrittori di densità

Katie Hempenius

Esplora questa demo

• Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .
• Ricarica la pagina utilizzando dispositivi diversi per fare in modo che il browser carichi immagini diverse.

Per farlo, puoi utilizzare l'emulatore del dispositivo. Se stai cercando densità di visualizzazione specifiche, prova i seguenti dispositivi:

• Controlla index.html per il codice che consente di eseguire l'operazione.

Come funziona?

Il concetto di descrittore della densità potrebbe non essere noto alla maggior parte delle persone. Per capire meglio, è utile avere un po' di informazioni di base sul funzionamento del browser con i pixel.

Che cosa sono i pixel

Cominciamo dall'inizio definendo che cos'è un pixel. Sembra semplice, ma "pixel" può avere molti significati:

Pixel del dispositivo (chiamato anche "pixel fisico")

Il più piccolo punto di colore che può essere visualizzato su un dispositivo.

Pixel logico

Informazioni che specificano il colore in una determinata posizione su una griglia. Questo tipo di pixel non ha dimensioni fisiche intrinseche.

pixel CSS

La specifica CSS definisce un pixel come un'unità di misura fisica. 1 pixel = 1/96 di pollice

Densità pixel

La densità dei pixel (detta anche "densità dello schermo" o "densità del display") misura la densità dei pixel del dispositivo in una determinata area fisica. Normalmente, questo valore viene misurato utilizzando i pixel per pollice (ppi).

Per molti anni, 96 ppi è stata una densità di visualizzazione molto comune (pertanto il CSS ha definito un pixel come 1/96 di pollice). A partire dagli anni '80, era la risoluzione predefinita di Windows. Inoltre, è stata la risoluzione dei monitor CRT.

La situazione iniziò a cambiare con l'ascesa dei monitor a LED negli anni 2000. In particolare, Apple ha fatto un grande impatto nel 2010 con l'introduzione dei display Retina. Questi display avevano una risoluzione minima di 192 ppi, ovvero il doppio della risoluzione dei display "normali" (192 ppi/96 ppi = 2).

window.devicePixelRatio

Con l'introduzione di una tecnologia display più recente, i "pixel dei dispositivi" hanno iniziato ad avere dimensioni fisiche e forme diverse e non avevano più le stesse dimensioni dei "pixel CSS". La necessità di definire il rapporto tra le dimensioni dei "pixel del dispositivo" e dei "pixel CSS" è ciò che ha portato all'introduzione dell'devicePixelRatio (a volte chiamato "Rapporto pixel CSS").

devicePixelRatio definisce la relazione tra i pixel del dispositivo e i pixel CSS per un determinato dispositivo. Un dispositivo da 192 ppi ha un valore devicePixelRatio pari a 2 (192 ppi/96 ppi = 2) perché "2 dei suoi pixel di visualizzazione hanno la dimensione di 1 pixel CSS".

Al giorno d'oggi la maggior parte dei dispositivi ha una OPR compresa tra 1,0 e 4,0.

• Determina la densità dei pixel di un dispositivo digitando window.devicePixelRatio nella console.

• Visualizza questa tabella per vedere le proporzioni pixel dei dispositivi comuni. La maggior parte è compresa tra 1,0 e 4,0.

Come si applica effettivamente queste informazioni?

Dimensioni delle immagini basate sulle proporzioni pixel dei dispositivi

Affinché le immagini abbiano un aspetto ottimale sugli schermi ad alta risoluzione, è necessario fornire versioni diverse delle immagini per devicePixelRatios diversi.

Aspetti importanti:

• Le dimensioni in pixel elencate negli editor di immagini, nelle directory dei file e in altre posizioni rappresentano una misurazione di pixel logici.
• Per schermi con risoluzione più alta e schermi più grandi, sono necessarie immagini con dimensioni più grandi. Il semplice ingrandimento di immagini più piccole impedisce di pubblicare più versioni dell'immagine. Il browser lo avrebbe comunque fatto se non fosse stata fornita un'immagine ad alta risoluzione.

Utilizza i descrittori di densità per pubblicare più immagini

I descrittori di densità, in combinazione con l'attributo "srcset", possono essere utilizzati per pubblicare immagini diverse per devicePixelProporzionis.

• Dai un'occhiata al file index.html e prendi nota dell'elemento <img>.

<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Questo esempio è espresso in parole:

• 1x, 2x e 3x sono tutti descrittori di densità che indicano al browser la densità dei pixel a cui è destinata un'immagine. In questo modo, il browser non deve scaricare un'immagine per determinare queste informazioni.
• Il browser può scegliere tra tre immagini: flower-1x.jpg (per browser con densità di pixel pari a 1.0), flower-2x.jpg (per browser con densità di pixel pari a 2.0) e flower-3x.jpg (per browser con densità di pixel pari a 3.0).
• flower.jpg è l'immagine di riserva per i browser che non supportano srcset.

Come utilizzare questa funzionalità:

• Usa un devicePixelProporzioni e l'unità x per scrivere i descrittori della densità. Ad esempio, il descrittore della densità per molti schermi Retina (window.devicePixelRatio = 2) viene scritto come 2x.
• Se non viene fornito un descrittore di densità, si presume che sia 1x.
• L'inclusione dei descrittori di densità nei nomi file è una convenzione comune (e ti aiuterà a tenere traccia dei file), ma non è necessaria. Le immagini possono avere qualsiasi nome file.
• Non è necessario includere un attributo sizes. L'attributo sizes viene utilizzato solo con i descrittori di larghezza.