Usar descritores de densidade

Katie Hempenius
Katie Hempenius
X

Confira esta demonstração

  • Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia modo tela cheia.
  • Atualize a página usando dispositivos diferentes para que o navegador carregue imagens diferentes.

Você pode usar o emulador de dispositivo para isso. Se você estiver procurando densidades de tela específicas, aqui estão alguns dispositivos para testar:

Densidade de 1x Manual do BlackBerry, muitos monitores externos
Densidade de 2x iPad ou iPhone 5/6
Densidade de 3x Galaxy S5 ou iPhone X
  • Confira index.html para encontrar 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, é útil saber como o navegador funciona com pixels.

O que são pixels?

Vamos começar definindo o que é um pixel. Isso 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 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

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

Por muitos anos, 96 ppi era uma densidade de exibição muito comum. Por isso, o CSS definiu um pixel como 1/96 de polegada. Desde os anos 1980, ele passou a ser a resolução padrão do Windows. Além disso, foi a resolução de monitores CRT.

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

window.devicePixelRatio

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

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

  • Consulte esta tabela para conferir as proporções de pixels de dispositivos comuns. A maioria está entre 1,0 e 4,0.

Como aplicar essas informações?

Dimensione as imagens com base nas proporções em pixels do dispositivo

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

Proporção de pixels do dispositivo Indica que: Neste dispositivo, uma tag <img> com largura CSS de 250 pixels terá uma aparência melhor quando a imagem de origem for...
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 outros lugares são uma medida de pixels lógicos.
  • Para telas de resolução mais alta e telas maiores, você vai precisar de imagens com dimensões maiores. Apenas ampliar imagens menores anula o propósito de disponibilizar várias versões de imagem. O navegador teria feito isso mesmo se uma imagem de alta resolução não fosse fornecida.

Usar descritores de densidade para exibir várias imagens

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

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

  • 1x, 2x e 3x são todos descritores de densidade que informam ao navegador a densidade de pixels à qual uma imagem se destina. Isso evita que o navegador precise fazer o download de uma imagem para determinar essa informação.
  • O navegador pode escolher entre três imagens: flower-1x.jpg (destinado a navegadores com 1.0 densidade de pixels), flower-2x.jpg (destinado a navegadores com uma densidade de pixels 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 oferecem suporte a 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, ele será considerado 1x.
  • Incluir descritores de densidade nos nomes de arquivo é uma convenção comum e ajudará você a controlar 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.