Usar descritores de densidade

Katie Hempenius
Katie Hempenius

Explorar esta demonstração

  • Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia 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 e 3x 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 pixels 1.0), flower-2x.jpg (destinado a navegadores com uma densidade de pixel 2.0) e flower-3x.jpg (destinado a navegadores com uma densidade de pixels 3.0).
  • flower.jpg é a imagem substituta para navegadores que não são compatíveis srcset.

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 como 2x.
  • 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 atributo sizes é apenas usada com descritores de largura.