Utilizza descrittori di densità

Katie Hempenius
Katie Hempenius
X

Esplora questa demo

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

A questo scopo, puoi usare l'emulatore del dispositivo. Se cerchi densità di visualizzazione specifiche, ecco alcuni dispositivi da provare:

Densità 1x Blackberry Playbook, molti monitor esterni
Densità 2x iPad o iPhone 5/6
3 volte la densità Galaxy S5 o iPhone X
  • Controlla index.html per il codice che consente di eseguire questa operazione.

Come funziona?

Il concetto di descrittori di densità potrebbe non essere familiare alla maggior parte delle persone. Per comprenderli meglio, è utile avere alcune informazioni di base sul funzionamento del browser con i pixel.

Che cosa sono i pixel

Partiamo dall'inizio definendo cosa sia un pixel. Sembra semplice, ma "pixel" può avere molti significati:

Pixel del dispositivo (noto anche come "pixel fisico")
Il punto di colore più piccolo che può essere visualizzato su un dispositivo.
Pixel logico
Informazioni che specificano il colore in una determinata posizione di una griglia. Questo tipo di pixel non ha dimensioni fisiche intrinseche.
Pixel CSS
Le specifiche CSS definiscono 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. Questa misura viene solitamente eseguita utilizzando i pixel per pollice (ppi).

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

La situazione è cambiata con l'avvento dei monitor LED nei primi anni 2000. In particolare, Apple ha avuto un grande successo nel 2010 con l'introduzione dei display Retina. Questi display avevano una risoluzione minima di 192 ppi, ovvero il doppio della risoluzione dei display "standard" (192 ppi/96 ppi = 2).

window.devicePixelRatio

Con l'introduzione della più recente tecnologia di visualizzazione, i "pixel dei dispositivi" hanno iniziato a variare per dimensioni fisiche e forma 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" ha portato all'introduzione del 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 con 192 ppi ha un valore devicePixelRatio pari a 2 (192 ppi/96 ppi = 2) perché "2 dei suoi pixel del display hanno le dimensioni di 1 pixel CSS".

Attualmente la maggior parte dei dispositivi ha un rapporto pixel del dispositivo compreso tra 1,0 e 4,0.

  • Per determinare la densità di pixel di un dispositivo, digita window.devicePixelRatio nella console.

  • Consulta questa tabella per vedere i rapporti pixel dei dispositivi comuni. La maggior parte è compresa tra 1,0 e 4,0.

Come si applicano queste informazioni?

Impostare le dimensioni delle immagini in base alle proporzioni pixel del dispositivo

Affinché le immagini abbiano la resa migliore su schermi ad alta risoluzione, è necessario fornire versioni diverse per devicePixelRatios diversi.

Proporzioni pixel dispositivo Indica che: Su questo dispositivo, un tag <img> con larghezza CSS di 250 pixel avrà un aspetto migliore quando l'immagine di origine è...
1 1 pixel del dispositivo = 1 pixel CSS 250 pixel di larghezza
2 2 pixel del dispositivo = 1 pixel CSS Larghezza di 500 pixel
3 3 pixel del dispositivo = 1 pixel CSS Larghezza di 750 pixel

Aspetti importanti:

  • Le dimensioni in pixel elencate negli editor di immagini, nelle directory dei file e in altri luoghi sono una misura dei pixel logici.
  • Per schermi con risoluzione più alta e display più grandi, sono necessarie immagini con dimensioni più grandi. Il semplice ingrandimento di immagini più piccole rende inutili lo scopo di pubblicare più versioni dell'immagine. Il browser avrebbe fatto lo stesso se non fosse stata fornita un'immagine ad alta risoluzione.

Utilizzare i descrittori di densità per pubblicare più immagini

I descrittori di densità, in combinazione con l'attributo "srcset", possono essere utilizzati per caricare immagini diverse per valori devicePixelRatio diversi.

  • 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 illustra:

  • 1x, 2x e 3x sono tutti descrittori di densità che indicano al browser la densità di 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 (destinata per i browser con una densità in pixel di 1.0), flower-2x.jpg (destinata per i browser con una densità in pixel di 2.0) e flower-3x.jpg (destinata per i browser con una densità in pixel di 3.0).
  • flower.jpg è l'immagine di riserva per i browser che non supportano srcset.

Come utilizzarlo:

  • Utilizza un valore devicePixelRatio e l'unità x per scrivere descrittori di densità. Ad esempio, il descrittore di 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 di descrittori di densità nei nomi dei 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.