DPI vs PPI vs densidade de pixels: um guia prático para designers

Três números, três significados:

• DPI (pontos por polegada) — quantos pontos de tinta uma impressora coloca por polegada linear. Uma propriedade de hardware da impressora.
• PPI (pixels por polegada) — quantos pixels da imagem são impressos ou exibidos por polegada linear no tamanho alvo. Uma propriedade de como a imagem é renderizada.
• Densidade de pixels — os pixels do dispositivo por pixel CSS em uma tela. Uma propriedade da tela (Retina, 4K, etc.).

Quase toda ferramenta de design rotula seu campo de “resolução” como DPI quando na verdade significa PPI. O uso incorreto está tão arraigado que a regra prática é: quando um designer diz DPI, assuma que significa PPI, a menos que ele esteja literalmente falando sobre a saída classificada de uma impressora física.

O que cada número realmente diz

DPI (impressora ou scanner)

Jatos de tinta modernos funcionam de 1200 a 4800 DPI. Impressoras a laser de 600 a 2400 DPI. Ambos os números descrevem com que precisão o hardware pode colocar pontos de tinta, não quanta informação de imagem uma página pode conter. Uma impressora de 4800 DPI não consegue imprimir uma imagem de 4800 PPI — a resolução de imagem efetiva típica (PPI) chega no máximo em torno de 300-400 mesmo nas melhores jato de tinta, porque renderizar um pixel de imagem requer múltiplos pontos de tinta (triagem por meio-tom).

PPI (o número de imagem encontra tamanho alvo)

PPI descreve uma imagem somente quando você especifica um tamanho físico alvo. Uma imagem de 3000×2000 pixels impressa em 10×6,67 polegadas é 300 PPI. Impressa em 5×3,33 polegadas é 600 PPI. Impressa em 20×13,33 polegadas é 150 PPI. Mesmo arquivo, três valores PPI diferentes.

Regras padrão para o PPI necessário:

• 72-96 PPI — exibição web. Os navegadores ignoram o PPI incorporado; somente a contagem de pixels importa.
• 150 PPI — impressão em jornal, pôster em grande formato visualizado à distância.
• 300 PPI — livro, revista, impressão fotográfica visualizada ao alcance do braço.
• 600+ PPI — arte vetorial, desenhos técnicos, tipografia fina.

Densidade de pixels (o número Retina)

Em telas modernas, “1 pixel” em CSS não é um pixel de tela. iPhones, MacBook Pros e a maioria dos telefones Android modernos usam um devicePixelRatio de 2 ou 3 — significando que um pixel CSS mapeia para 2× ou 3× os pixels físicos. É por isso que um designer trabalhando no Figma em 1× produz imagens que parecem suaves em um telefone, a menos que exportem em resolução 2× ou 3×.

Números concretos: um iPhone de 2020 tem resolução de pixel CSS de 390×844 mas resolução física de 1170×2532 (DPR 3×). Designers precisam conhecer os dois. O DPI da tela física é um número separado (~460 PPI para esse telefone), mas em termos CSS o que importa é a relação de pixel do dispositivo.

Números práticos para entregas comuns

Onde a confusão surge

1. O problema de exportação “72 DPI”

Um designer constrói no Figma/Sketch a “72 DPI” (o que não tem sentido na tela, mas é o que a ferramenta exibe), exporta um PDF e envia para uma gráfica. A gráfica recebe um arquivo que afirma 72 PPI em seus metadados; a saída renderizada tem ¼ da densidade pretendida, e a impressão parece pixelada. Solução: reexporte a 300 PPI e garanta que a contagem de pixels seja suficiente para suportar essa densidade.

2. Exportações Retina @1×

Um designer trabalhando no Figma em 1× exporta um ícone exatamente nas dimensões CSS (por exemplo, 24×24 px). Em um dispositivo 3× o ícone é renderizado com desfoque porque o upscale do navegador não é tão nítido quanto uma exportação nativa de 72×72. Solução: exporte @1× mais @2× e @3×, depois use srcset HTML ou image-set em CSS para servir o arquivo correto.

3. Confundir PPI de origem com PPI alvo

Um fotógrafo tira uma imagem RAW de 6000×4000. A câmera incorpora metadados de 300 PPI. O fotógrafo coloca isso em um layout web de 600×400. A imagem tem 10× mais dados de pixel do que o layout precisa; os metadados de PPI de origem são irrelevantes. Solução: reduza para as dimensões de pixel alvo (ou 2× delas para Retina) usando um algoritmo real de downsample — nossa ferramenta de redimensionamento de imagem lida com isso.

Referência rápida: quando cada número importa

• Trabalho web: somente contagem de pixels + DPR importam. Ignore metadados PPI incorporados.
• Trabalho de impressão: PPI importa absolutamente. Corresponda à distância de visualização da impressão (300 PPI para segurar na mão, 150 PPI para pendurar na parede, menor para distante).
• Arquivo fotográfico: mantenha a fonte original em resolução completa. Gere variantes reduzidas para cada uso subsequente.
• Design de UI: projete em dimensões CSS 1×, exporte em 2× e 3×.

Para a comparação mais aprofundada de uma página, veja nossa comparação DPI vs PPI. Para o lado de conversão de cores do design, a página de metodologia de cores cobre RGB vs CMYK e perfis ICC.

Exemplo prático: exportar um ícone para três plataformas

Um ícone de barra de ferramentas de 24×24 pixels CSS precisa parecer nítido em um navegador desktop, em um iPhone 15 Pro (DPR 3×) e em uma gráfica a 300 PPI.

• Desktop @1×: exporte PNG 24 × 24. Tamanho do arquivo ~1,2 KB.
• Retina @2×: exporte PNG 48 × 48, servido via image-set ou srcset com o descritor 2x. Tamanho do arquivo ~2,8 KB.
• iPhone @3×: exporte PNG 72 × 72, servido com 3x. Tamanho do arquivo ~4,5 KB.
• Impressão a 300 PPI, impressa a 0,5 polegadas:exporte PNG 150 × 150 (ou melhor ainda, um SVG para que o rasterizador da gráfica lide com a resolução).
• Melhor resposta para tudo: use o código-fonte SVG. Primitivos vetoriais não se importam com DPR ou PPI; o renderizador rasteriza na resolução alvo sob demanda. Reserve PNG/JPG somente para conteúdo rasterizado (fotos, ilustrações com gradiente).

Erros comuns

• Alterar o campo PPI no Photoshop em vez de reamostrar.O diálogo “Tamanho da Imagem” do Photoshop tem uma caixa de seleção “Resampling”. Alternar PPI sem resampling muda apenas os metadados de tamanho de impressão; a contagem de pixels e a qualidade visível são inalteradas. Com o resampling ativado, você realmente adiciona ou remove pixels.
• Projetar no Figma em 2× por padrão.O Figma usa 1 unidade = 1 pixel CSS. Se você projetar em dimensões 2×, seu @1× exportado terá o dobro do tamanho pretendido e seu @2× será 4×. Projete em 1×; deixe a exportação lidar com os multiplicadores.
• Misturar impressão e web no mesmo arquivo.Um PDF de impressão de 300 PPI incorpora rasters dimensionados para impressão; uma exportação web da mesma fonte é excessivamente grande para a web. Mantenha masters separados para web e impressão, ambos derivados do original.
• Esquecer sangria e corte na impressão.Um cartão de visita de 3,5" × 2,0" precisa de 3,625" × 2,125" (sangria de 0,125"). A 300 PPI isso é 1087 × 637 pixels, não 1050 × 600.
• Tratar “web” como uma resolução única.As viewports modernas variam de 320 px CSS (telefones pequenos) a 3840 px CSS (monitores 4K), com DPR de 1 a 4. Gere pelo menos três tamanhos raster por ativo e deixe o navegador escolher.

Casos extremos

• Telefones dobráveis. Alguns dispositivos Samsung Galaxy Fold relatam DPR 2,625 — uma razão fracionária. Os navegadores rasterizam via o descritor srcset mais próximo; use 1×/2×/3× e deixe-os escolher.
• Zoom do navegador. Um usuário com zoom de 200% efetivamente dobra seu DPR. Ativos vetoriais lidam com isso graciosamente; rasters são ampliados pelo navegador. Forneça resolução suficiente para que o upscale do navegador tenha margem.
• Impressão em casa vs impressão gráfica. Jatos de tinta em casa são nominalmente 1200-4800 DPI, mas entregam apenas ~200 PPI de detalhes de imagem efetivos. Gráficas comerciais entregam verdadeiros 300 PPI. Combine sua fonte com a gráfica de destino, não com a impressora doméstica.
• Dispositivos de papel eletrônico. Kindle Paperwhite, reMarkable e similares usam e-ink Carta a ~300 PPI mas se leem muito diferentemente de LCD. As curvas de contraste da imagem importam mais do que o PPI aqui; designs planos vencem.

Fontes: Referência de Produção de Impressão da Adobe (2023); HTML Living Standard do W3C (conjunto de fontes de imagem); Diretrizes de Interface Humana da Apple sobre Layout; Módulo de Valores e Unidades CSS Nível 4 do W3C (unidades de resolução).