Usar descritores de densidade

Katie Hempenius

Para acompanhar este codelab, abra este Glitch em uma segunda guia.

Confira esta demonstração

• Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
• Atualize a página usando dispositivos diferentes para ver o navegador carregar imagens diferentes.

Para isso, use o emulador de dispositivo. Se você estiver procurando densidades de tela específicas, confira alguns dispositivos para testar:

Densidade de 1x	Blackberry Playbook, muitos monitores externos
Densidade 2x	iPad ou iPhone 5/6
Densidade 3x	Galaxy S5 ou iPhone X

• Confira o código que faz isso funcionar em index.html.

Como funciona?

O conceito de descritores de densidade pode ser desconhecido para a maioria das pessoas. Para entender melhor, é útil ter um pouco de conhecimento sobre como o navegador funciona com pixels.

O que são pixels

Vamos começar do início, definindo o que é um pixel. 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 local específico de uma grade. Esse tipo de pixel não tem um tamanho físico inerente.

Pixel CSS

A especificação CSS define um pixel como uma unidade de medida física. 1 pixel = 1/96 de uma polegada.

Densidade de pixels

A densidade de pixels (também conhecida como "densidade de tela" ou "densidade de exibição") mede a densidade de pixels do dispositivo em uma determinada área física. Isso é geralmente medido em pixels por polegada (ppi).

Por muitos anos, 96 ppi era uma densidade de tela muito comum (por isso o CSS define um pixel como 1/96 de uma polegada). A partir dos anos 1980, ela se tornou a resolução padrão do Windows. Além disso, era a resolução dos monitores CRT.

Isso começou a mudar quando os monitores de LED se tornaram comuns nos anos 2000. Em especial, 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 das telas "normais" (192 ppi/96 ppi = 2).

window.devicePixelRatio

Com a introdução 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 dos "pixels CSS". A necessidade de definir a relação entre o tamanho dos "pixels do dispositivo" e dos "pixels CSS" 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 uma 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.

Observação : essa proporção não precisa ser um número inteiro. 1.5, 2.4 e 2.5 são proporções de pixel de dispositivos comuns.

• Determine a densidade de pixels de um dispositivo digitando window.devicePixelRatio no console.

• Consulte esta tabela para ver as proporções de pixel de dispositivos comuns. A maioria fica entre 1,0 e 4,0.

Como aplicar essas informações?

Dimensionar imagens com base nas proporções de pixels do dispositivo

Para que as imagens fiquem com a melhor aparência possível em telas de alta resolução, é necessário fornecer versões de imagem diferentes para devicePixelRatios distintos.

Proporção de pixels do dispositivo	Indica que:	Nesse dispositivo, uma tag <img> com uma largura de CSS de 250 pixels vai ficar melhor quando a imagem de origem tiver...
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 imagem, diretórios de arquivos e outros lugares são uma medida de pixels lógicos.
• Para telas de maior resolução e maiores, você vai precisar de imagens com dimensões maiores. Apenas ampliar imagens menores anula o propósito de veicular várias versões de imagem. O navegador faria isso de qualquer maneira se uma imagem de alta resolução não fosse fornecida.

Observação : ferramentas como o sharp facilitam a criação de vários tamanhos de uma imagem. Isso é abordado em mais detalhes aqui.

Usar descritores de densidade para veicular várias imagens

Os descritores de densidade, em conjunto com o atributo "srcset ", podem ser usados para veicular imagens diferentes para devicePixelRatios diferentes.

• 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 em palavras:

• 1x, 2x e 3x são descritores de densidade que informam ao navegador a densidade de pixels para que uma imagem é destinada. Isso evita que o navegador precise fazer o download de uma imagem para determinar essas informações.
• O navegador pode escolher entre três imagens: flower-1x.jpg (destinada a navegadores com uma densidade de pixels de 1.0), flower-2x.jpg (destinada a navegadores com uma densidade de pixels de 2.0) e flower-3x.jpg (destinada a navegadores com uma densidade de pixels de 3.0).
• flower.jpg é a imagem substituta para navegadores que não são compatíveis com srcset.

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 como 2x.
• Se um descritor de densidade não for fornecido, será considerado 1x.
• Incluir descritores de densidade em nomes de arquivos é uma convenção comum (e ajuda a acompanhar os arquivos), mas não é necessário. As imagens podem ter qualquer nome de arquivo.
• Não é necessário incluir um atributo sizes. O atributo sizes é usado apenas com descritores de largura.