Imagens Retina: Gráficos Nítidos para Telas High-DPI

Última atualização: June 28, 2026

As telas Retina e de alta DPI contêm mais pixels no mesmo espaço físico, fazendo com que uma imagem dimensionada para uma tela padrão pareça suave e pixelizada nelas. Servir imagens nítidas nessas telas significa preparar versões de resolução mais alta e informar ao navegador quando usá-las. Este guia aborda o fluxo de trabalho 2x e 3x, a marcação srcset que entrega o arquivo correto e o equilíbrio entre nitidez e peso da página.

Resposta rápida: como deixar as imagens nítidas em telas retina?

Crie uma versão da imagem com o dobro (e para celulares, o triplo) das dimensões de pixels de exibição, e então use o atributo srcset para oferecer ambas as versões. O navegador carrega o arquivo de alta resolução apenas em telas que podem exibi-lo, de modo que os displays padrão não baixam os bytes extras. Uma foto exibida com 400 pixels de largura precisa de uma fonte de 800 pixels (2x) para retina. Exporte ambas as versões com compressão apropriada — o arquivo 2x é maior, mas não o dobro, porque a eficiência da compressão melhora com a resolução.

O que é um display Retina ou de alta DPI?

Um display Retina é um termo de marketing para uma tela com densidade de pixels suficientemente alta que o olho não consegue distinguir pixels individuais à distância normal de visualização. A Apple cunhou o termo, mas o conceito se aplica à maioria dos celulares, tablets e notebooks modernos. A medida prática é a taxa de pixel do dispositivo (DPR) — quantos pixels físicos representam um pixel CSS.

• Uma tela 2x precisa do dobro dos pixels lineares (quatro vezes o total) para parecer nítida.
• Uma tela de celular 3x precisa de três vezes os pixels lineares.
• Telas padrão 1x baixam a imagem base e não desperdiçam nada.

O guia da Mozilla sobre taxa de pixel do dispositivo documenta como os navegadores reportam e usam o DPR, que é o fundamento de toda estratégia de imagem retina.

Como criar versões de imagem 2x e 3x?

Comece de uma fonte de alta resolução e redimensione para cada alvo em vez de aumentar um arquivo pequeno. Uma foto destinada a um slot de exibição de 400 pixels precisa de uma versão de 400px (1x) e 800px (2x), e uma versão de 1200px (3x) para celulares.

1. Comece de uma fonte pelo menos tão grande quanto seu maior alvo (3x).
2. Redimensione para larguras 1x, 2x e 3x.
3. Comprima cada versão — os arquivos 2x e 3x são mais compressíveis por pixel.
4. Exporte como WebP para os menores arquivos de alta qualidade.
5. Sirva todas as versões e deixe o navegador escolher.

• Nunca aumente uma imagem pequena para 2x — ela permanece suave e apenas fica mais pesada.
• O arquivo 2x geralmente tem menos do que o dobro dos bytes do 1x devido à melhor compressão.
• As versões 3x são as mais importantes para celulares com telas pequenas e densas.

Como servir a versão correta com srcset?

O atributo srcset em uma tag <img> informa ao navegador qual arquivo carregar com base no DPR da tela. O navegador cuida da seleção, então você fornece as opções e a marcação.

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Texto alternativo descritivo"
  width="400" height="300"
/>

• Os descritores 1x, 2x e 3x mapeiam arquivos para taxas de pixel do dispositivo.
• O navegador carrega apenas a versão que corresponde à tela.
• Sempre inclua largura e altura para evitar o deslocamento de layout.
• O atributo src é o fallback para navegadores mais antigos.

Para imagens responsivas que também mudam dimensões em diferentes larguras de tela, combine srcset com o atributo sizes e descritores de largura (400w, 800w) em vez de descritores de DPR. O guia de imagens responsivas cobre esse padrão mais avançado, e o guia de SEO para imagens explica como imagens nítidas e corretamente dimensionadas também ajudam no desempenho de busca.

Quando usar SVG em vez de raster?

Para logotipos, ícones e ilustrações com formas planas, você pode contornar todo o problema 2x/3x usando SVG. Gráficos vetoriais escalam infinitamente sem penalidade de resolução — o mesmo arquivo SVG é nítido em um monitor 1x e em um celular 3x, porque é desenhado a partir de matemática e não armazenado como pixels.

SVG é a resposta certa sempre que a imagem for composta por formas em vez de detalhes fotográficos. A desvantagem é que os SVGs precisam ser otimizados — metadados não utilizados e lixo do editor incham-nos — e o guia de SVG para PNG cobre o fluxo de trabalho quando você realmente precisa de um fallback raster para um ambiente que não consegue renderizar vetores. Para um site institucional com um logotipo no cabeçalho, um SVG elimina a questão retina inteiramente para aquele elemento.

Testando suas imagens retina

Gerar os arquivos é metade do trabalho; verificar se eles realmente carregam corretamente é a outra metade. Alguns testes confirmam que a configuração está funcionando em vez de servir silenciosamente o arquivo errado.

1. Abra a página em um dispositivo Retina ou defina o DPR do navegador para 2x nas ferramentas de desenvolvedor.
2. Inspecione o elemento da imagem e confirme se o currentSrc carregado é o arquivo 2x ou 3x.
3. Mude para um DPR 1x e confirme que ele carrega o arquivo 1x em vez disso.
4. Verifique a aba Network para confirmar que apenas uma versão é baixada por tela.
5. Visualize em 100% na tela retina e confirme se a imagem está nítida, não suave.

O recurso de substituição do DPR das ferramentas de desenvolvedor do navegador permite testar sem dispositivos físicos, embora uma tela Retina real seja a prova final. Um modo de falha comum é um erro de digitação na marcação srcset que faz o navegador recorrer ao src base, o que parece suave em retina sem gerar um erro. A aba Network captura isso imediatamente — se você vir o arquivo 1x carregando em uma tela 2x, o srcset não está conectado corretamente.

Equilibrando nitidez e peso da página

A armadilha com as imagens retina é servir arquivos de alta resolução para todas as telas, o que dobra ou triplica o peso da página para usuários que não conseguem ver a diferença. A abordagem srcset evita isso, mas apenas se você realmente gerar as versões menores e referenciá-las. Um único arquivo 3x servido para todos é o erro mais comum.

O guia web.dev sobre imagens responsivas documenta o impacto no desempenho de acertar isso, e o guia Core Web Vitals conecta o peso da imagem diretamente à métrica LCP que afeta o ranking. O objetivo é nitidez onde ela aparece e contenção em todos os outros lugares — deixe o navegador escolher, e gere todas as versões para que ele tenha algo bom para escolher.

Perguntas frequentes

Como faço para deixar imagens nítidas em telas retina?

Sirva versões 2x (e opcionalmente 3x) de imagens raster no tamanho de exibição, usando srcset para que o navegador escolha o arquivo correto pelo DPR do dispositivo. Uma imagem 1x em uma tela retina parece suave; a variante 2x restaura a nitidez.

Preciso de imagens 2x para todos os gráficos?

Para gráficos nítidos e fotos de capa (hero photos), sim — telas retina mostram suavidade caso contrário. Para imagens decorativas ou abaixo da dobra, um único arquivo 1x é geralmente suficiente. Sirva ambos com srcset para que dispositivos não-retina não baixem o arquivo grande.

Quando devo usar SVG em vez de raster 2x?

Para logotipos, ícones e gráficos planos, sim — SVG é independente de resolução e permanece nítido em qualquer tamanho sem arquivos extras. Para fotografias, raster (com variantes 2x) ainda é a escolha certa. Consulte o guia de SVG para PNG.

Como devo servir imagens retina?

Use srcset com fontes 1x e 2x (e opcionalmente 3x), deixando o navegador escolher pelo DPR do dispositivo. Envie o 1x como o src padrão para que navegadores mais antigos façam fallback de forma limpa. O navegador baixa apenas a variante necessária.

O srcset diminui a velocidade da página?

Não — o navegador baixa apenas a variante de que precisa, então uma tela pequena recebe o arquivo pequeno. Sem srcset, todos os dispositivos baixam o arquivo maior. srcset economiza bytes, não adiciona.