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:
Densità 1x | BlackBerry Playbook, molti monitor esterni |
Densità 2x | iPad o iPhone 5/6 |
Densità 3x | Galaxy S5 o iPhone X |
- 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.
Proporzioni 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 sarà... |
---|---|---|
1 | 1 pixel del dispositivo = 1 pixel CSS | 250 pixel di larghezza |
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 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
e3x
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 a1.0
),flower-2x.jpg
(per browser con densità di pixel pari a2.0
) eflower-3x.jpg
(per browser con densità di pixel pari a3.0
). flower.jpg
è l'immagine di riserva per i browser che non supportanosrcset
.
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 come2x
. - 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'attributosizes
viene utilizzato solo con i descrittori di larghezza.