Verificador de proporção de pixels do dispositivo

A proporção de pixels do seu dispositivo e os tamanhos de exportação que ficam nítidos nela.

Roda no seu navegador
Sem uploads
Sem conta

Carregando a ferramenta no navegador…

O que faz: Verificador de proporção de pixels do dispositivo

Em uma tela Retina ou HiDPI, um pixel CSS é desenhado com vários pixels físicos. A proporção de pixels do dispositivo diz quantos: 1 em um monitor comum, 2 na maioria dos Macs, 1,25 ou 1,5 em muitos notebooks Windows e, com frequência, 3 em celulares.

Esse número explica vários pequenos incômodos. Capturas de tela saem com o dobro do tamanho esperado, um logo parece desfocado ou uma gravação de tela fica maior que a janela compartilhada. O relatório transforma a proporção em tamanhos práticos: em que tamanho uma área de 1280 × 720 é capturada e em qual múltiplo exportar as imagens.

Exemplo

Sua configuração

A tela de um MacBook na escala padrão, zoom do navegador em 100%

O relatório mostra

A proporção de pixels do seu dispositivo: 2×
1 pixel CSS = 2 × 2 pixels do dispositivo · Densidade alta (Retina / HiDPI)
Uma área de 1280 × 720 é capturada em 2560 × 1440 pixels
Exporte as imagens em 2× o tamanho exibido para ficarem nítidas

Como usar: Verificador de proporção de pixels do dispositivo

Abra a página na tela que você quer verificar.
Leia a proporção e os tamanhos de captura e de exportação na tabela.
Leve a janela para outro monitor ou mude o zoom para comparar.

Bom saber

Para proporções fracionárias, como 1,25 ou 1,5, a recomendação de exportação arredonda para 2×, o que mantém as imagens nítidas com um arquivo um pouco maior.
Capturas de tela com proporção alta são grandes. Reduza-as ao tamanho exibido para usar em documentação com o redimensionador de capturas de tela.
Celulares e tablets informam a própria proporção, então verifique o dispositivo que o seu público realmente usa.

Perguntas sobre Verificador de proporção de pixels do dispositivo

O que é a proporção de pixels do dispositivo?

É o número de pixels físicos da tela usados para desenhar um pixel CSS em cada direção. Uma proporção de 2 significa que cada pixel CSS é um bloco de 2 × 2, com quatro pixels do dispositivo, e é por isso que o texto parece mais nítido em telas de alta densidade.

Por que minhas capturas de tela saem com o dobro do tamanho esperado?

Capturas de tela salvam pixels físicos. Em uma tela 2×, uma janela com 1280 pixels CSS de largura vira uma imagem de 2560 pixels. Guarde o arquivo grande para impressão ou zoom, ou reduza-o pela metade para um artigo de ajuda.

Devo exportar imagens em 2x ou 3x?

2× atende à maioria dos notebooks e das telas Retina de desktop. 3× só compensa em imagens vistas em tamanho real em celulares de ponta. Exportações maiores gastam banda, então use 2× por padrão e acrescente 3× só onde o detalhe importa.

Por que a proporção de pixels do meu dispositivo é 1,5 no Windows?

A escala da tela do Windows está em 150%. O sistema desenha tudo 1,5 vez maior, e o navegador informa isso como a proporção. Muitos notebooks de 14 e 15 polegadas já vêm com escala de 125% ou 150% por padrão.