Explorar esta demonstração
- Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia
- Atualize a página usando dispositivos diferentes para conferir se o navegador carregar de forma diferente de imagens de contêiner.
Para isso, use o emulador do dispositivo. Se você está procurando por anúncios de display densidades diferentes, aqui estão alguns dispositivos que você pode testar:
Densidade de 1x | Blackberry Playbook, muitos monitores externos |
Densidade de 2x | iPad ou iPhone 5/6 |
Densidade de 3x | Galaxy S5 ou iPhone X |
- Confira
index.html
para ver o código que faz isso funcionar.
Como funciona?
O conceito de descritores de densidade pode ser desconhecido para a maioria das pessoas. Para melhorar entendê-los, é útil ter um pouco de conhecimento sobre como o navegador funciona com pixels.
O que são pixels
Vamos começar definindo o que é um pixel. Isto parece simples, mas "em pixels" 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
Densidade de pixel (também chamada de "densidade da tela" ou "densidade de exibição") mede a densidade de pixels do dispositivo em uma determinada área física. Isso é geralmente medida usando pixels por polegada (ppi).
Por muitos anos, 96 ppi foi uma densidade de exibição muito comum (por isso o CSS definindo um pixel como 1/96 de polegada). A partir de 1980, essa era a resolução padrão do Windows. Além disso, foi a resolução do CRT e monitores.
Isso começou a mudar quando os monitores LED se tornaram comuns nos anos 2000. Especificamente, A Apple fez um grande sucesso em 2010 quando introduziu as telas Retina. Esses telas tiveram uma resolução mínima de 192 ppi, que é o dobro da resolução de "normal" (192 ppi/96 ppi = 2).
window.devicePixelRatio
Com a introdução de uma nova tecnologia de tela, os "pixels do dispositivo" começaram a variar
em tamanho físico e forma
e não tinham mais o mesmo tamanho dos "pixels CSS". A necessidade de definir
relação entre o tamanho dos "pixels do dispositivo" e "pixels CSS" foi o que levou a
a introdução do devicePixelRatio
, às vezes chamado de
Proporção").
devicePixelRatio
define a relação entre pixels do dispositivo e 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.
Determinar a densidade de pixels de um dispositivo digitando
window.devicePixelRatio
no console.Consulte esta tabela para ver as proporções em pixels dos e dispositivos comuns. A maioria está entre 1,0 e 4,0.
Então, como você realmente aplica essas informações?
Dimensionar imagens com base na proporção de pixels do dispositivo
Para que as imagens tenham a melhor aparência possível em telas de alta resolução, é
necessário para fornecer versões de imagem diferentes para devicePixelRatios
diferentes.
Proporção de pixels do dispositivo | Indica que: | Neste dispositivo, uma tag <img> com largura de CSS de 250 pixels, ficam melhores quando a imagem de origem é... |
---|---|---|
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 em outros lugares são uma medida de pixels lógicos.
- Para telas de resolução mais alta e telas maiores, você precisará de imagens com dimensões maiores. O simples aumento de imagens menores invalida o propósito exibir várias versões de imagem. O navegador teria feito isso de qualquer maneira se uma imagem de alta resolução não foi fornecida.
Usar descritores de densidade para exibir várias imagens
Descritores de densidade, em conjunto com "srcset " pode ser usado para veicular imagens diferentes para diferentes devicePixelRatios.
- Observe o arquivo
index.html
e observe o elemento<img>
.
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
Este exemplo coloca em palavras:
1x
,2x
e3x
são todos os descritores de densidade que informam ao navegador a densidade de pixels à qual uma imagem é destinada. Essa ação salva o navegador de precisar baixar uma imagem para determinar essas informações.- O navegador pode escolher entre três imagens:
flower-1x.jpg
(destinadas para navegadores com uma densidade de pixels1.0
),flower-2x.jpg
(destinado a navegadores com uma densidade de pixel2.0
) eflower-3x.jpg
(destinado a navegadores com uma densidade de pixels3.0
). flower.jpg
é a imagem substituta para navegadores que não são compatíveissrcset
.
Como usar:
- Use um devicePixelRatio e a unidade
x
para escrever descritores de densidade. Para exemplo, o descritor de densidade de 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 arquivos é uma convenção comum (e ajudam você a acompanhar os arquivos), mas isso não é necessário. As imagens podem ter nome do arquivo.
- Não é necessário incluir um atributo
sizes
. O atributosizes
é apenas usada com descritores de largura.