Esplora questa demo
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi A 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 specifiche densità di pixel, 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 un po' di informazioni su come funziona il 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
- La specifica CSS definisce un pixel come 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 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 "standard" (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 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.
Rapporto pixel del dispositivo | Indica che: | Su questo dispositivo, un tag <img> con una larghezza CSS di 250 pixel avrà un aspetto ottimale 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ù elevata e display più grandi, sono necessarie immagini con dimensioni maggiori. 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 in base a 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
e3x
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 di1.0
),flower-2x.jpg
(destinata per i browser con una densità in pixel di2.0
) eflower-3x.jpg
(destinata per i browser con una densità in pixel di3.0
). flower.jpg
è l'immagine di riserva per i browser che non supportanosrcset
.
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 come2x
. - 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'attributosizes
viene utilizzato solo con i descrittori di larghezza.