Como servir imagens nítidas em telas de alta densidade

Descritores de densidade 1x e 2x permitem oferecer alternativas ao navegador para diferentes pixels por CSS pixel.

Antes de começar

Compare dimensões da imagem com o espaço CSS e identifique quais ativos ficam borrados em telas de alta densidade.

Passo a passo

1. Liste versões coerentes no srcset e mantenha a imagem base no src para compatibilidade.

Use descritores de densidade quando o ativo mantém o mesmo tamanho CSS, como um ícone ou logo:

<img src="/img/logo-1x.png"
     srcset="/img/logo-1x.png 1x, /img/logo-2x.png 2x"
     width="160" height="48" alt="Marca Exemplo">

O arquivo 2x deve ter o dobro das dimensões em pixels para manter o mesmo tamanho CSS. Para imagens fluidas cujo tamanho varia com o layout, prefira candidatos w junto com sizes; descritores x não substituem a descrição do espaço responsivo.

2. Teste em emulação de device pixel ratio e confira a resolução efetivamente baixada.

Limites e cuidados

Não duplique todos os arquivos em 2x se isso elevar peso sem diferença perceptível. Teste DPR 1 e 2, confira a dimensão renderizada e o arquivo requisitado na aba Network; o navegador pode considerar cache e economia de dados. Veja a sintaxe e o trade-off em imagens responsivas.

Continue na biblioteca

Fonte oficial: Imagens responsivas — web.dev.