Confira esta demonstração
- Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .
- Atualize a página usando dispositivos diferentes para que o navegador carregue imagens diferentes.
Você pode usar o emulador de dispositivo para isso. Se você estiver procurando densidades de tela específicas, aqui estão alguns dispositivos para testar:
Densidade de 1x | Manual do BlackBerry, muitos monitores externos |
Densidade de 2x | iPad ou iPhone 5/6 |
Densidade de 3x | Galaxy S5 ou iPhone X |
- Confira
index.html
para encontrar o código que faz isso funcionar.
Como funciona?
O conceito de descritores de densidade pode ser desconhecido para a maioria das pessoas. Para entender melhor, é útil saber como o navegador funciona com pixels.
O que são pixels?
Vamos começar definindo o que é um pixel. Isso parece simples, mas "pixel" pode ter muitos significados:
- Pixel do dispositivo (também conhecido como "pixel físico")
- O menor ponto de cor que pode ser exibido em um dispositivo.
- Pixel lógico
- Informações que especificam a cor em um determinado local em uma grade. Esse tipo de pixel não tem tamanho físico inerente.
- Pixel de CSS
- A especificação CSS define um pixel como uma unidade de medida física. 1 pixel = 1/96 de polegada.
Densidade de pixels
A densidade de pixels (também conhecida como "densidade da tela" ou "densidade de exibição") mede a densidade de pixels do dispositivo em uma determinada área física. Geralmente, isso é medido usando pixels por polegada (ppi).
Por muitos anos, 96 ppi era uma densidade de exibição muito comum. Por isso, o CSS definiu um pixel como 1/96 de polegada. Desde os anos 1980, ele passou a ser a resolução padrão do Windows. Além disso, foi a resolução de monitores CRT.
Isso começou a mudar à medida que os monitores de LED se tornaram comuns nos anos 2000. Especificamente, a Apple fez um grande sucesso em 2010, quando lançou as telas Retina. Essas telas tinham uma resolução mínima de 192 ppi, que era o dobro da resolução de telas "normais" (192 ppi/96 ppi = 2).
window.devicePixelRatio
Com o lançamento de uma tecnologia de exibição mais recente, os "pixels do dispositivo" começaram a variar
em tamanho físico e formato
e não tinham mais o mesmo tamanho que os "pixels CSS". A necessidade de definir a
relação entre o tamanho dos "pixels do dispositivo" e dos "pixels CSS" foi o que levou à
introdução do devicePixelRatio
, às vezes chamado de "Proporção de pixels
CSS".
devicePixelRatio
define a relação entre os pixels do dispositivo e os pixels CSS
para um dispositivo específico. Um dispositivo de 192 ppi tem um devicePixelRatio
de 2 (192
ppi/96 ppi = 2) porque "2 dos pixels de exibição têm o tamanho de 1 pixel CSS".
Atualmente, a maioria dos dispositivos tem uma proporção de pixels entre 1,0 e 4,0.
Determine a densidade de pixels de um dispositivo digitando
window.devicePixelRatio
no console.Consulte esta tabela para conferir as proporções de pixels de dispositivos comuns. A maioria está entre 1,0 e 4,0.
Como aplicar essas informações?
Dimensione as imagens com base nas proporções em pixels do dispositivo
Para que as imagens tenham a melhor aparência em telas de alta resolução, é
necessário fornecer versões de imagem diferentes para diferentes devicePixelRatios
.
Proporção de pixels do dispositivo | Indica que: | Neste dispositivo, uma tag <img> com largura CSS de 250 pixels terá uma aparência melhor quando a imagem de origem for... |
---|---|---|
1 | 1 pixel do dispositivo = 1 pixel CSS | 250 pixels de largura |
2 | 2 pixels do dispositivo = 1 pixel CSS | 500 pixels de largura |
3 | 3 pixels do dispositivo = 1 pixel CSS | 750 pixels de largura |
Observações:
- As dimensões de pixel listadas em editores de imagens, diretórios de arquivos e outros lugares são uma medida de pixels lógicos.
- Para telas de resolução mais alta e telas maiores, você vai precisar de imagens com dimensões maiores. Apenas ampliar imagens menores anula o propósito de disponibilizar várias versões de imagem. O navegador teria feito isso mesmo se uma imagem de alta resolução não fosse fornecida.
Usar descritores de densidade para exibir várias imagens
Os descritores de densidade, em conjunto com o atributo "srcset ", podem ser usados para exibir diferentes imagens para devicePixelRatios distintos.
- Observe o arquivo
index.html
e o elemento<img>
.
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
Este exemplo coloca o seguinte em palavras:
1x
,2x
e3x
são todos descritores de densidade que informam ao navegador a densidade de pixels à qual uma imagem se destina. Isso evita que o navegador precise fazer o download de uma imagem para determinar essa informação.- O navegador pode escolher entre três imagens:
flower-1x.jpg
(destinado a navegadores com1.0
densidade de pixels),flower-2x.jpg
(destinado a navegadores com uma densidade de pixels2.0
) eflower-3x.jpg
(destinado a navegadores com uma densidade de pixels3.0
). flower.jpg
é a imagem substituta para navegadores que não oferecem suporte asrcset
.
Como usar:
- Use um devicePixelRatio e a unidade
x
para escrever descritores de densidade. Por exemplo, o descritor de densidade para muitas telas Retina (window.devicePixelRatio = 2
) seria escrito como2x
. - Se um descritor de densidade não for fornecido, ele será considerado
1x
. - Incluir descritores de densidade nos nomes de arquivo é uma convenção comum e ajudará você a controlar os arquivos, mas não é necessário. As imagens podem ter qualquer nome de arquivo.
- Não é necessário incluir um atributo
sizes
. O atributosizes
é usado apenas com descritores de largura.