Utilizza descrittori di densità

Katie Hempenius
Katie Hempenius
X

Esplora questa demo

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

A questo scopo, puoi utilizzare 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
Densità 3x Galaxy S5 o iPhone X
  • Consulta index.html per il codice che rende possibile tutto questo.

Come funziona?

Il concetto di descrittori di densità potrebbe non essere familiare alla maggior parte delle persone. Per comprenderle meglio, è utile avere un po' di informazioni su come il browser funziona con i pixel.

Che cosa sono i pixel

Iniziamo dall'inizio definendo cos'è un pixel. Sembra semplice, ma in realtà "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 su una griglia. Questo tipo di pixel non ha una dimensione fisica intrinseca.
Pixel CSS
La specifica CSS definisce un pixel come unità di misura fisica. 1 pixel = 1/96 di pollice.

Densità di pixel

La densità dei pixel (chiamata anche "densità dello schermo" o "densità del display") misura la densità dei pixel del dispositivo in una determinata area fisica. In genere, viene misurata in pixel per pollice (ppi).

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

La situazione ha iniziato a cambiare con la diffusione dei monitor LED negli anni 2000. In particolare, Apple ha fatto scalpore nel 2010 quando ha introdotto i 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 di visualizzazione più recente, i "pixel del dispositivo" hanno iniziato a variare in termini di dimensioni fisiche e forma e non avevano più le stesse dimensioni dei "pixel CSS". La necessità di definire la relazione 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 da 192 ppi ha un devicePixelRatio pari a 2 (192 ppi/96 ppi = 2) perché "2 dei suoi pixel di visualizzazione hanno le dimensioni di 1 pixel CSS".

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

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

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

Come si applicano queste informazioni?

Dimensiona le immagini in base ai rapporti pixel del dispositivo

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

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

Aspetti importanti:

  • Le dimensioni in pixel elencate negli editor di immagini, nelle directory dei file e in altri punti sono una misura dei pixel logici.
  • Per schermi con risoluzione più elevata e display più grandi, avrai bisogno di immagini con dimensioni maggiori. Il semplice ingrandimento di immagini più piccole vanifica lo scopo di pubblicare più versioni immagine. Il browser avrebbe comunque eseguito questa operazione se non fosse stata fornita un'immagine ad alta risoluzione.

Utilizza i descrittori di densità per pubblicare più immagini

I descrittori di densità, insieme all'attributo "srcset", possono essere utilizzati per pubblicare immagini diverse per devicePixelRatio diversi.

  • Dai un'occhiata al file index.html e nota l'elemento <img>.
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Questo esempio può essere descritto come segue:

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

Come utilizzare questa funzionalità:

  • Utilizza un devicePixelRatio e l'unità x per scrivere i descrittori di densità. Ad esempio, il descrittore di densità per molti schermi Retina (window.devicePixelRatio = 2) verrebbe scritto come 2x.
  • Se non viene fornito un descrittore di densità, si presume che sia 1x.
  • L'inclusione di 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.