O que é Device Pixel Ratio (DPR)? Por que as imagens ficam borradas em telas Retina

Você passa dias projetando um site impecável. Exporta um logotipo PNG em alta nitidez, visualiza no monitor do desktop e tudo parece perfeito. Então você abre exatamente a mesma página em um iPhone, MacBook ou monitor 4K — e o logotipo parece opaco, suave demais e visivelmente borrado nas bordas.

Enquanto isso, os textos na mesma página continuam incrivelmente nítidos. Os títulos parecem esculpidos no vidro, mas fotos, ícones e banners parecem ter saído de um site antigo construído em 2005.

Por que uma tela moderna de alta resolução deixa os elementos gráficos com uma aparência pior em vez de melhor?

A resposta se resume a um único número: o Device Pixel Ratio (DPR), ou Taxa de Proporção de Pixels do Dispositivo.

Compreender o DPR é uma das habilidades mais práticas que você pode dominar como web designer, desenvolvedor frontend ou proprietário de um site. Uma vez que você entende como os navegadores lidam com telas de alta densidade, nunca mais subirá uma imagem borrada ou sofrerá com a entrega de assets responsivos.

---

O Problema Central: Pixels de Hardware vs. Pixels de Layout

Para entender o DPR, precisamos relembrar como os monitores de computador costumavam funcionar.

Durante décadas, as telas digitais eram diretas: um pixel no seu código correspondia a exatamente um diodo físico no monitor.

Se o seu monitor tinha uma resolução nativa de 1024 × 768, ele continha 1.024 emissores microscópicos de luz RGB horizontalmente e 768 verticalmente. Se você escrevia no CSS width: 200px;, o navegador dizia ao monitor para acender exatamente 200 pontos de hardware no vidro.

Naquela época, os monitores tinham uma densidade aproximada de 72 a 96 pixels por polegada (PPI). Um botão de 100 pixels tinha praticamente o mesmo tamanho físico em quase qualquer monitor corporativo do planeta.

A Revolução dos Smartphones Quebrou Essa Regra

Tudo mudou em 2010, quando telas de altíssima densidade (como a primeira tela “Retina Display” da Apple no iPhone 4) chegaram ao mercado consumidor.

Os fabricantes de hardware comprimiram quatro vezes mais pixels no mesmo espaço físico de vidro. Uma tela de iPhone que antes acomodava 320 × 480 pixels passou a abrigar 640 × 960 pixels físicos em uma pequena tela de bolso de 3,5 polegadas.

Esse salto gerou uma crise imediata para a web.

Se os navegadores tivessem continuado tratando um pixel CSS como um pixel físico:

• Um site comum projetado para desktop (com 960px de largura) teria encolhido até o tamanho de um selo postal.
• Links e botões de navegação teriam apenas 2 ou 3 milímetros de largura — impossíveis de serem clicados com a ponta dos dedos.
• O corpo de texto exigiria uma lupa para ser lido.

Os navegadores não podiam simplesmente quebrar todos os sites existentes na internet. Para resolver o impasse, engenheiros de navegadores e órgãos de padrões web dividiram o conceito de “pixel” em duas entidades totalmente distintas:

1. Pixels Físicos (Hardware Pixels): Os pontos microscópicos de luz reais, construídos fisicamente no painel do visor.
2. Pixels CSS (Pixels Lógicos / Pixels de Referência): Uma unidade abstrata usada pelos navegadores para layout, tipografia, espaçamento e media queries.

O Device Pixel Ratio (DPR) é simplesmente o fator de conversão entre esses dois mundos.

---

O Que É Exatamente o Device Pixel Ratio (DPR)?

O Device Pixel Ratio (DPR) é a proporção entre os pixels físicos de hardware e os pixels lógicos de CSS em uma determinada tela.

$$\text{DPR} = \frac{\text{Pixels Físicos de Hardware}}{\text{Pixels Lógicos CSS}}$$

Você também pode pensar no DPR como a resposta para a seguinte pergunta básica:

“Quantos pontos físicos de hardware esta tela utiliza para desenhar uma única caixa de 1px definida no meu arquivo CSS?”

Veja como diferentes categorias de telas traduzem essa fórmula:

1. Monitores Padrão (DPR = 1.0)

• O que significa: 1 pixel CSS = 1 pixel físico de hardware.
• Onde encontrar: Monitores desktop 1080p tradicionais (de 24 ou 27 polegadas), laptops corporativos básicos, TVs antigas.
• Como renderiza: Uma imagem de 100 × 100 pixels ocupa exatamente 100 × 100 diodos físicos na tela. Não há escalonamento, nem interpolação, nem distorção.

2. Telas de Alta Densidade / Retina (DPR = 2.0)

• O que significa: 1 pixel CSS = 2 pixels físicos em cada eixo.
• Onde encontrar: MacBook Air, MacBook Pro, iPad, monitores 4K configurados com escala de 200%, muitos tablets Android.
• Como renderiza: Como os pixels são contados em duas dimensões (largura e altura), uma área de $1 \times 1$ pixel CSS é suportada por uma grade de $2 \times 2$ — ou seja, 4 pixels físicos são usados para desenhar uma única unidade lógica de layout!

3. Telas Móveis de Ultra Alta Densidade (DPR = 3.0)

• O que significa: 1 pixel CSS = 3 pixels físicos em cada eixo.
• Onde encontrar: Do iPhone 13 Pro ao iPhone 16 Pro, linha Samsung Galaxy S, smartphones topo de linha Google Pixel.
• Como renderiza: Uma área de $1 \times 1$ pixel CSS é sustentada por uma matriz de $3 \times 3$ diodos de hardware. Isso significa que 9 pontos físicos de hardware se acendem para cada pixel CSS individual!

---

Tabela de Referência de DPR: Dispositivos Populares

Dispositivo	Resolução Física da Tela	Tamanho da Viewport CSS	Device Pixel Ratio (DPR)	Pontos Físicos por Pixel CSS
Monitor Corporativo Padrão 24”	1920 × 1080	1920 × 1080	1.0x	1 ponto ($1 \times 1$)
MacBook Air 13” (M2/M3)	2560 × 1664	1280 × 832	2.0x	4 pontos ($2 \times 2$)
MacBook Pro 16” (M3 Max)	3456 × 2234	1728 × 1117	2.0x	4 pontos ($2 \times 2$)
Monitor 4K 27” (escala em 200%)	3840 × 2160	1920 × 1080	2.0x	4 pontos ($2 \times 2$)
Notebook Windows 14” (escala em 150%)	1920 × 1080	1280 × 720	1.5x	2.25 pontos
iPhone 15 / 16 (Padrão)	2556 × 1179	393 × 852	3.0x	9 pontos ($3 \times 3$)
Samsung Galaxy S24 Ultra	3120 × 1440	384 × 832	3.0x	9 pontos ($3 \times 3$)
iPad Air 11”	2360 × 1640	1180 × 820	2.0x	4 pontos ($2 \times 2$)

Notou algo curioso nos notebooks com Windows?
Repare no DPR de 1.5x no notebook com Windows. Enquanto a Apple adota estritamente escalas inteiras (como 2.0x e 3.0x), as configurações de exibição do Windows permitem escalas fracionárias (125%, 150%, 175%). Isso significa que o DPR pode ser um número decimal, como 1.25 ou 1.5!

---

Por Que as Imagens Ficam Borradas em Telas de Alto DPR?

Agora que você sabe que um iPhone ou MacBook utiliza de 4 a 9 pontos de hardware para cada pixel de layout CSS, a causa das imagens borradas fica evidente.

Vamos acompanhar um exemplo prático passo a passo:

Imagine que você possui o logotipo de um cliente. No seu arquivo CSS, define um tamanho de layout limpo e preciso:

.site-logo {
  width: 200px;
  height: 60px;
}

Para preencher esse espaço, você exporta um arquivo PNG chamado logo.png com exatamente 200 × 60 pixels e o insere no HTML:

<img src="logo.png" class="site-logo" alt="Acme Corp">

Veja o que acontece nos bastidores de acordo com o monitor que seu visitante está usando:

Cenário A: O visitante usa um monitor corporativo 1080p (DPR = 1)

• O navegador reserva um espaço de 200 × 60 pixels CSS na tela.
• A tela possui 1 ponto de hardware por pixel CSS.
• Área total de hardware: $200 \times 60 = 12.000$ diodos físicos.
• Seu arquivo de imagem fornece: $200 \times 60 = 12.000$ pixels de imagem.
• Resultado: Casamento perfeito de 1 para 1. Cada pixel da imagem cai exatamente sobre um pixel de hardware. O logotipo fica perfeitamente nítido.

Cenário B: O visitante usa um MacBook Pro ou monitor 4K (DPR = 2)

• O navegador ainda reserva uma caixa de layout de 200 × 60 pixels CSS para não quebrar a estrutura da página.
• PORÉM, a tela tem um DPR de 2.0. Essa mesma caixa agora ocupa 400 × 120 pixels físicos de hardware!
• Área total de hardware: $400 \times 120 = 48.000$ diodos físicos.
• Seu arquivo de imagem continua contendo apenas: $200 \times 60 = 12.000$ pixels.
• De repente, faltam ao navegador 36.000 pixels de informação visual!
• Resultado: O navegador não tem escolha senão esticar a imagem para o dobro do seu tamanho original. Ele utiliza interpolação bilinear ou bicúbica para “adivinhar” as cores dos pixels faltantes. As bordas perdem definição, linhas finas ficam suaves demais e o logotipo fica claramente fora de foco.

Cenário C: O visitante usa um iPhone 16 Pro (DPR = 3)

• A caixa de 200 × 60 CSS agora cobre 600 × 180 pixels físicos ($108.000$ diodos de hardware).
• Sua imagem de 12.000 pixels é esticada para preencher uma área 9 vezes maior do que a sua resolução original!
• Resultado: Desfoque acentuado, pixelização e textos da imagem completamente borrados.

Por Que os Textos Não Sofrem com Esse Problema?

Você pode se perguntar: se as imagens são esticadas, por que o texto em HTML permanece impecavelmente nítido?

O texto não é composto por pixels de mapa de bits (bitmap). Fontes são contornos vetoriais descritos matematicamente por curvas e coordenadas (curvas de Bézier).

Quando um navegador renderiza um parágrafo de texto em uma tela 2x ou 3x, o sistema operacional recalcula a geometria da fonte diretamente na resolução física nativa da tela. Ele utiliza todos os 48.000 ou 108.000 pixels de hardware disponíveis para desenhar curvas perfeitas.

É exatamente por isso que imagens rasterizadas borradas causam tanto incômodo em telas Retina — elas aparecem lado a lado com uma tipografia vetorial impecavelmente nítida!

---

Como Descobrir Seu DPR Atual em Qualquer Navegador

Você não precisa de ferramentas complexas ou extensões para descobrir o Device Pixel Ratio da tela em que está lendo este artigo agora.

Método 1: Usando o Console do Navegador

1. Abra as ferramentas de desenvolvedor (pressione F12 no Windows/Linux ou Cmd + Option + I no Mac).
2. Clique na aba Console.
3. Digite:

   window.devicePixelRatio

4. Pressione Enter.

O número retornado é o DPR ativo exato da sua tela. Em um monitor padrão, retornará 1. Em um MacBook Retina, retornará 2. Em um iPhone, retornará 3.

Método 2: Monitorando Mudanças de DPR em Tempo Real com JavaScript

Você sabia que o DPR pode mudar dinamicamente durante o uso?

Se um usuário der zoom na página (Cmd + ou Ctrl +), arrastar uma janela da tela do notebook para um monitor externo 1080p, ou alterar a escala nas configurações do Windows, o DPR do navegador muda imediatamente.

Você pode monitorar essas alterações usando a API moderna matchMedia do JavaScript:

const updateDprNotice = () => {
  console.log(`O DPR atual agora é: ${window.devicePixelRatio}`);
};

// Cria uma media query correspondente à resolução atual
const dprQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);

// Ouve mudanças de resolução (ex: zoom ou troca de monitor)
dprQuery.addEventListener("change", updateDprNotice);

---

Como Corrigir Imagens Borradas: 5 Estratégias Comprovadas

Agora vamos para a parte prática. Como garantir que nossos gráficos e fotos fiquem cristalinos em todas as telas, sem enviar arquivos pesados e lentos para telas convencionais?

Aqui estão as 5 principais técnicas do desenvolvimento web moderno:

1. Use SVG para Logotipos, Ícones e Gráficos Simples

Sempre que uma imagem for composta por formas geométricas, cores sólidas ou logos, nunca a exporte como PNG ou JPEG. Em vez disso, use SVG (Scalable Vector Graphics).

Assim como as fontes tipográficas, os arquivos SVG contêm vetores descritos por instruções XML, e não matrizes de pixels rasterizados. Seja em um monitor 1x, em um iPhone 3x ou em um painel impresso em resolução 16K, o SVG sempre será renderizado com perfeição matemática na resolução máxima do hardware.

<!-- Nítido em qualquer visor existente, tamanho de arquivo minúsculo -->
<img src="/logo.svg" width="200" height="60" alt="Logotipo da Empresa">

Regra prática:

• Logotipos, ícones, emblemas de interface, setas e ilustrações vetoriais $\rightarrow$ SVG.
• Fotografias, capturas de tela complexas e pinturas digitais $\rightarrow$ Raster com srcset responsivo (veja abaixo).

---

2. A Regra do 2x para Imagens Rasterizadas (Solução Rápida)

Se você tem uma imagem bitmap (como uma foto de perfil ou avatar) que sempre será exibida em um tamanho CSS fixo — digamos, 80px × 80px:

1. Exporte a imagem com o dobro da resolução: 160px × 160px.
2. Salve em um formato moderno como WebP ou AVIF para manter o peso em kilobytes bem reduzido.
3. Defina explicitamente as dimensões no HTML ou CSS para o tamanho de exibição final:

<!-- O arquivo físico tem 160x160, mas é limitado a 80x80 pixels CSS -->
<img src="/avatar@2x.webp" width="80" height="80" alt="Foto de Perfil">

Em um monitor 1x, o navegador aplica uma leve redução mantendo a nitidez. Em uma tela Retina 2x, cada pixel físico recebe informação real nativa, garantindo uma foto com máxima nitidez.

---

3. Use srcset com Descritores de Densidade de Pixel (1x, 2x)

E se você não quiser forçar visitantes em conexões lentas ou em telas normais de 1x a baixar arquivos duas vezes maiores?

O HTML possui suporte nativo para troca inteligente de imagens com base no DPR através do atributo srcset com descritores de densidade (1x, 2x, 3x):

<img 
  src="/hero-800.webp" 
  srcset="/hero-800.webp 1x, 
          /hero-1600.webp 2x, 
          /hero-2400.webp 3x"
  width="800" 
  height="450" 
  alt="Espaço de trabalho moderno"
  loading="lazy">

Como o Navegador Interpreta Isso:

• Um usuário em um PC de escritório 1080p comum (DPR 1.0) baixa hero-800.webp (~45 KB).
• Um usuário em um MacBook Pro (DPR 2.0) baixa hero-1600.webp (~120 KB).
• Um usuário em um iPhone 16 Pro (DPR 3.0) baixa hero-2400.webp (~220 KB).

Cada dispositivo recebe a densidade exata que seus pixels físicos conseguem renderizar, economizando largura de banda e assegurando nitidez sem esforço manual.

---

4. Imagens Fluidas Responsivas com srcset e sizes (Para Layouts Dinâmicos)

Em sites responsivos modernos, raramente as imagens ficam fixas em uma largura exata. Um card pode ocupar 100% da tela no celular, mas apenas 33% em uma grade de três colunas no desktop.

Quando a largura da imagem varia de acordo com a tela, descritores de densidade (1x, 2x) deixam de ser suficientes. Nesses casos, usamos descritores de largura (w) combinados com o atributo sizes:

<img 
  src="/article-cover-800.webp"
  srcset="/article-cover-400.webp 400w,
          /article-cover-800.webp 800w,
          /article-cover-1200.webp 1200w,
          /article-cover-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 
         (max-width: 1024px) 50vw, 
         33vw"
  width="800" 
  height="450" 
  alt="Entendendo a resolução de tela"
  loading="lazy">

Por Que Essa Abordagem Funciona Perfeitamente:

O navegador multiplica o tamanho real do slot CSS renderizado pelo DPR da tela:

• Em um smartphone com viewport de 390px (DPR 3.0), a imagem ocupa 100vw ($390\text{px}$). O navegador calcula: $$390\text{px} \times 3.0 = 1.170\text{ pixels físicos necessários}$$ Ele escolhe automaticamente article-cover-1200.webp.
• Em um desktop 1080p com janela em 1280px (DPR 1.0), a imagem ocupa 33vw ($422\text{px}$). O navegador calcula: $$422\text{px} \times 1.0 = 422\text{ pixels físicos necessários}$$ Ele seleciona article-cover-400.webp.

Tudo isso acontece sem uma única linha de JavaScript. O navegador faz o cálculo ideal antes mesmo de começar a renderizar o primeiro pixel na tela.

---

5. Imagens de Fundo CSS em Alta Resolução com image-set() ou Media Queries

Se você define imagens de fundo diretamente no seu CSS, media queries tradicionais ou a função moderna image-set() permitem entregar imagens em alta densidade com total elegância.

Opção A: image-set() Moderno (Recomendado)

Compatível com todos os navegadores modernos (Chrome, Safari, Firefox, Edge):

.hero-banner {
  background-image: image-set(
    url("/hero-bg.webp") 1x,
    url("/hero-bg@2x.webp") 2x
  );
  background-size: cover;
  background-position: center;
}

Opção B: Media Queries CSS com min-resolution

Caso precise de controle minucioso combinando breakpoints de largura com densidade de tela:

/* Fundo padrão 1x */
.card-header {
  background-image: url("/card-bg.webp");
  background-size: 300px 180px;
}

/* Fundo 2x Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card-header {
    background-image: url("/card-bg@2x.webp");
  }
}

Por que 192dpi?
A resolução base padrão do CSS é definida como 96 pontos por polegada (DPI). Dobrando esse valor para uma tela 2x, temos $96 \times 2 = 192\text{dpi}$ (ou 2dppx, que significa dots per pixel unit).

---

A Armadilha Oculta: Canvas e WebGL em Telas High-DPI

Se você trabalha com o elemento HTML5 <canvas> (para gráficos interativos, animações, jogos ou áreas de assinatura), enfrentará o problema de desfoque por DPR de maneira ainda mais agressiva.

Por padrão, a tag canvas cria um buffer de desenho baseado estritamente em seus atributos HTML:

<!-- Canvas padrão: cria um buffer de desenho de apenas 300x150 pixels -->
<canvas id="chart"></canvas>

Se você aplicar regras de CSS para estilizar esse canvas na página:

#chart {
  width: 300px;
  height: 150px;
}

Em um MacBook ou tela 4K, linhas e textos desenhados nesse canvas ficarão visivelmente borrados.

Por quê? Porque o canvas gerou um buffer rasterizado de apenas 300 × 150 pixels, e o navegador esticou esse pequeno mapa de bits sobre uma área física de 600 × 300 pixels de hardware!

A Forma Correta de Tornar o Canvas Nítido em Telas Retina:

Para resolver, você deve dimensionar o buffer interno do canvas multiplicando por window.devicePixelRatio, enquanto mantém suas dimensões de exibição CSS devidamente travadas:

const canvas = document.getElementById("chart");
const ctx = canvas.getContext("2d");

// Tamanho de layout desejado em pixels CSS
const cssWidth = 300;
const cssHeight = 150;

// Obtém o DPR atual da tela
const dpr = window.devicePixelRatio || 1;

// 1. Define o buffer físico multiplicado pelo DPR
canvas.width = cssWidth * dpr;
canvas.height = cssHeight * dpr;

// 2. Trava o tamanho visual na página usando pixels CSS
canvas.style.width = `${cssWidth}px`;
canvas.style.height = `${cssHeight}px`;

// 3. Ajusta a escala das operações de desenho para manter o sistema de coordenadas em CSS
ctx.scale(dpr, dpr);

// Agora desenhe normalmente — tudo será renderizado com nitidez cristalina!
ctx.fillStyle = "#2563eb";
ctx.fillRect(20, 20, 100, 50);

Esse pequeno ajuste garante que bibliotecas de gráficos, motores de jogos e ferramentas de desenho vetorial sejam renderizados com perfeição absoluta em telas Retina.

---

Desempenho vs. Nitidez: Encontrando o Ponto de Equilíbrio

Agora que você já sabe como fornecer imagens 2x e 3x, surge uma dúvida fundamental: Devemos servir arquivos 3x para todos os smartphones modernos?

Na grande maioria das situações, a resposta é não.

Eis as razões:

1. Retornos Decrescentes para o Olho Humano:
   Em um smartphone segurado na distância de uso habitual (cerca de 25 a 30 cm), a visão humana não é capaz de distinguir pixels individuais quando a densidade ultrapassa aproximadamente 300 a 350 PPI. Uma imagem 2x em uma tela de celular 3x é indistinguível de uma imagem 3x real para mais de 99% das pessoas.

2. Explosão no Tamanho dos Arquivos:
   A contagem de pixels cresce de forma quadrática:

   • Uma imagem 1x contém 1x de dados.
   • Uma imagem 2x contém 4x dados ($2 \times 2$).
   • Uma imagem 3x contém 9x dados ($3 \times 3$)!

   Fornecer imagens 3x reais para fotos grandes pode transformar um arquivo WebP bem otimizado de 120 KB em um monstro de mais de 800 KB. Isso consome planos de dados móveis, prejudica métricas vitais da web (em especial o LCP / Largest Contentful Paint) e compromete o tempo de carregamento da sua página.

As Recomendações Práticas Mais Eficientes:

• Interface Vetorial (Ícones e Logos): Sempre use SVG. Zero distorção e tamanho quase nulo.
• Fotos e Banners Principais: Limite o limite máximo do seu srcset responsivo em 2.0x. Servir imagens 2x para telas 3x entrega mais de 95% da nitidez perceptível economizando até 60% de tráfego de dados!
• Compressão Moderna: Codifique sempre seus arquivos em WebP ou AVIF. Como as telas de alta resolução possuem pixels tão próximos, é seguro aplicar níveis de compressão ligeiramente mais agressivos (qualidade entre 75 e 80) sem qualquer perda visual perceptível.

---

Perguntas Frequentes (FAQ)

Qual é a diferença entre PPI, DPI e DPR?

• PPI (Pixels Per Inch): Densidade física do hardware — quantos emissores de luz reais estão contidos em uma polegada linear do painel de vidro.
• DPI (Dots Per Inch): Termo originário da impressão que descreve quantos pontos de tinta uma impressora deposita por polegada. No desenvolvimento web, costuma ser usado como sinônimo de PPI.
• DPR (Device Pixel Ratio): Um multiplicador de software utilizado pelos navegadores e sistemas operacionais para converter unidades lógicas de layout (pixels CSS) em pixels físicos da tela.

Por que meu monitor 4K relata uma resolução de 1920 × 1080?

Se você tem uma tela 4K (3840 × 2160) e o Windows ou o macOS está configurado com escala de 200%, o sistema operacional informa aos navegadores que a largura do seu desktop é de 1920 × 1080 pixels lógicos, com um Device Pixel Ratio de 2.0.

Seu monitor continua exibindo uma imagem 4K autêntica! O sistema simplesmente está agrupando blocos de 4 pixels físicos ($2 \times 2$) para desenhar cada pixel de layout lógico, garantindo que textos e janelas não fiquem minúsculos e ilegíveis.

O DPR pode ser um número decimal como 1.25 ou 1.5?

Sim. No Windows e no ChromeOS, os usuários podem configurar porcentagens personalizadas de escala como 125%, 150% ou 175%. Quando um usuário define a escala em 150%, o valor de window.devicePixelRatio no navegador passa a ser 1.5.

Usar o zoom do navegador altera o DPR?

Sim! Ao pressionar Ctrl + ou Cmd + para dar zoom em uma página, os navegadores modernos não esticam a página mecanicamente como uma lente de aumento. Em vez disso, aumentam dinamicamente o window.devicePixelRatio, recalculando o layout e orientando o atributo srcset a requisitar imagens de resolução superior.

---

Principais Conclusões

1. Existem Dois Tipos de Pixels: Pixels físicos são os pontos microscópicos do hardware; pixels CSS são os blocos lógicos usados pelo navegador para montar o layout.
2. O DPR é a Ponte de Conversão: O DPR indica quantos pontos físicos de hardware são utilizados para renderizar um único pixel CSS.
3. A Causa do Desfoque: Quando uma imagem fornece apenas 1 pixel de informação para uma área sustentada por 4 ou 9 pontos físicos, o navegador precisa esticá-la por interpolação, gerando desfoque.
4. Priorize o SVG: Qualquer forma, ícone ou logotipo que possa ser vetorial deve estar em SVG.
5. Mire em 2x para Fotos: Em imagens fotográficas rasterizadas, servir arquivos 2x via srcset entrega nitidez Retina sem sobrecarregar o peso da página.

Quer descobrir quais são as métricas exatas que a sua tela está reportando agora? Acesse nossa ferramenta gratuita na página inicial de WhatIsMyScreenResolutions.com para verificar instantaneamente sua viewport, resolução de tela e Device Pixel Ratio em tempo real.