Usar descritores de densidade

Katie Hempenius

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:

• 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.

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.