Usar descritores de densidade

Katie Hempenius

Confira esta demonstração

• Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
• Recarregue a página usando dispositivos diferentes para conferir se o navegador carrega imagens diferentes.

Para isso, use o emulador de dispositivo. Se você estiver procurando densidades de exibição específicas, teste estes dispositivos:

• 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 entender melhor essas informações, é ú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. Pode parecer 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 em uma grade. Esse tipo de pixel não tem tamanho físico inerente.

Pixel CSS

As especificações do CSS definem 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 chamada de "densidade de tela" ou "densidade de exibição") mede a densidade de pixels do dispositivo em uma determinada área física. Isso é comumente medido usando pixels por polegada (ppi).

Por muitos anos, 96 ppi era uma densidade de exibição muito comum (portanto, o CSS definia um pixel como 1/96 de polegada). Desde os anos 1980, essa era a resolução padrão do Windows. Além disso, era a resolução de monitores CRT.

Isso começou a mudar quando os monitores LED se tornaram comuns na década de 2000. Em particular, a Apple causou um grande impacto em 2010, quando lançou as telas Retina. Essas telas tinham uma resolução mínima de 192 ppi, o dobro da resolução de telas "normais" (192 ppi/96 ppi = 2).

window.devicePixelRatio

Com a introdução de tecnologias de exibição mais recentes, os "pixels do dispositivo" começaram a variar em tamanho físico e forma e não tinham mais o mesmo tamanho dos "pixels do CSS". A necessidade de definir a relação entre o tamanho dos "pixels do dispositivo" e dos "pixels CSS" é o que levou à introdução do devicePixelRatio (às vezes chamado de "proporção de pixels CSS").

devicePixelRatio define a relação entre pixels do dispositivo e 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 da tela têm o tamanho de 1 pixel CSS".

Atualmente, a maioria dos dispositivos tem uma proporção de pixels do dispositivo 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 pixel de dispositivos comuns. A maioria está entre 1,0 e 4,0.

Como aplicar 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 fornecer versões diferentes de imagens para diferentes devicePixelRatios.

Observações:

• As dimensões em pixels listadas em editores de imagem, diretórios de arquivos e outros lugares são uma medição de pixels lógicos.
• Para telas maiores e resoluções mais altas, você vai precisar de imagens com dimensões maiores. Apenas aumentar imagens menores derrota o propósito de oferecer várias versões de imagens. O navegador teria feito isso de qualquer maneira se uma imagem de alta resolução não tivesse sido fornecida.

Usar descritores de densidade para veicular várias imagens

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

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

• 1x, 2x e 3x são descritores de densidade que informam ao navegador a densidade de pixels para a qual uma imagem se destina. 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 (para navegadores com uma densidade de pixels 1.0), flower-2x.jpg (para navegadores com uma densidade de pixels 2.0) e flower-3x.jpg (para navegadores com uma densidade de pixels 3.0).
• flower.jpg é a imagem de fallback para navegadores que não oferecem suporte a srcset.

Como usar:

• Use um devicePixelRatio e a unidade x para gravar 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, ele será considerado 1x.
• A inclusão de descritores de densidade nos nomes de arquivos é uma convenção comum (e ajuda a manter o controle dos arquivos), mas não é necessária. 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.