DPI de imagem explicado: 72 ou 300 DPI importa online?

Resposta rápida: DPI não é o botão de qualidade web

Para imagens de site comuns, 72 DPI vs 300 DPI não decide quão nítida a imagem parece online. O navegador trabalha principalmente com:

• as dimensões reais em pixels da imagem, por exemplo 1200 × 800;
• o tamanho CSS na página, por exemplo 600 px de largura;
• as regras de imagens responsivas como srcset e sizes;
• a densidade de pixels do dispositivo;
• a compressão e o formato usados no arquivo exportado.

Um JPG 1200 × 800 marcado como 72 DPI e o mesmo JPG 1200 × 800 marcado como 300 DPI aparecem exatamente iguais numa página web. Contêm os mesmos pixels. O valor DPI é, no fundo, uma instrução de impressão.

O DPI começa a importar quando a imagem precisa virar um tamanho físico. Uma foto de passaporte de 2 × 2 polegadas a 300 DPI precisa de 600 × 600 pixels. Uma cópia de 4 × 6 polegadas a 300 DPI precisa de 1200 × 1800 pixels. É aí que o número DPI se torna útil: conecta pixels a polegadas ou milímetros.

Então, quando alguém pede «300 DPI», a melhor pergunta em resposta é:

É para impressão ou você precisa mesmo de uma imagem com mais pixels para a web?

DPI, PPI, pixels e pixels CSS

O termo DPI é usado para várias coisas ao mesmo tempo — daí a bagunça nas dicas por aí.

Para arquivos de imagem digital, PPI é o termo mais preciso. Um arquivo não tem pontos de tinta: tem pixels. Mas as pessoas buscam «DPI», os laboratórios pedem «DPI» e clientes falam DPI quando querem dizer PPI, então este guia usa os dois com cuidado.

A fórmula prática é simples:

pixels = polegadas de impressão × PPI
polegadas de impressão = pixels / PPI

Se uma foto tem 3000 pixels de largura, pode ser impressa em 10 polegadas de largura a 300 PPI, 20 polegadas a 150 PPI ou 41,7 polegadas a 72 PPI. O arquivo não fica melhor nem pior — você só decide com que densidade esses pixels vão parar no papel.

O que o valor DPI dentro de uma imagem realmente faz

Muitos formatos de imagem podem armazenar um valor de resolução ou densidade. Nos softwares do dia a dia, você o vê como:

• 72 DPI,
• 96 DPI,
• 240 PPI,
• 300 PPI,
• um campo «Resolução» no Photoshop,
• metadados de densidade horizontal e vertical em um JPG ou PNG.

Esse valor é metadado. Ele sugere o tamanho em que a imagem deve ser impressa ou colocada em um layout que respeite essa densidade. Não adiciona detalhe.

Imagine uma foto 3000 × 2000:

Mesmos pixels. Tamanho de impressão sugerido diferente.

É aqui que muita gente tropeça. Se você só mudar o campo DPI, não redimensionou a imagem para a web, não a comprimiu e não a deixou mais nítida — apenas mudou a etiqueta de impressão.

O que os navegadores usam em vez disso

Para o trabalho comum em uma página web, os navegadores se apoiam nos dados de pixels do arquivo e nas instruções de layout da página.

Se o HTML ou o CSS dizem que uma imagem deve aparecer com 600 pixels CSS de largura, o navegador a coloca com 600 pixels CSS de largura. Se você entrega uma fonte de 1200 pixels de largura para esse espaço, tem pixels suficientes para uma tela de alta densidade 2x. Se entrega uma fonte de 400 pixels, a imagem provavelmente vai parecer mole porque o navegador precisa ampliar.

Por isso o trabalho com imagens web costuma soar assim:

• Imagem hero: exportar por volta da maior largura de exibição prevista, muitas vezes com variantes responsivas.
• Imagem de blog: uma versão de 1200-1600 px de largura, a menos que o design exija mais.
• Miniatura: exportar próximo ao tamanho do card mostrado.
• Ícone Retina: fornecer pixels de origem 2x ou 3x do tamanho CSS.
• Página lenta: redimensionar e comprimir os pixels, não a etiqueta DPI.

A documentação da MDN sobre naturalWidth ajuda aqui, porque descreve a largura da imagem em pixels CSS, não como «o que diz a etiqueta DPI». O guia da MDN sobre imagens responsivas também explica como srcset e sizes ajudam o navegador a escolher uma fonte adequada de acordo com layout e dispositivo.

Há uma sutileza técnica: o CSS tem uma propriedade experimental image-resolution, e o W3C CSS Images fala sobre metadados de resolução de imagem. A MDN hoje marca image-resolution como experimental e avisa que o suporte dos navegadores ainda não está pronto para produção. Na publicação web normal, não conte com o metadado DPI de um JPG ou PNG para controlar o tamanho visível na página.

Por que o «72 DPI para web» virou folclore

A regra de «72 DPI para web» é sobretudo um hábito herdado.

Fluxos antigos de editoração eletrônica tinham uma relação mais próxima entre pixels de tela, pontos e polegadas. As convenções antigas de tela do Macintosh são frequentemente associadas a 72 pixels por polegada. O Windows e a história do CSS trouxeram o 96 DPI para o cenário. O W3C CSS Values define uma relação fixa em que 1in equivale a 96px, e a documentação da MDN sobre resolução explica que 1dppx corresponde a 96dpi em termos CSS.

Isso não quer dizer que você deva exportar imagens para a web em 96 DPI.

Quer dizer que o CSS tem um sistema de referência para suas unidades de layout. A sua imagem web real continua precisando de pixels suficientes para o tamanho em que aparece. Uma foto de 5000 px de largura é pesada demais para uma miniatura de 300 px, esteja ela marcada como 72 DPI ou 300 DPI. Um logo de 400 px de largura pode parecer mole num espaço de 600 px, independentemente do campo DPI.

Para imagens web, a pergunta melhor é:

Quantos pixels essa imagem vai ocupar no layout e quantos pixels de origem eu devo entregar para as telas que me interessam?

A armadilha da reamostragem no Photoshop

O Photoshop e ferramentas parecidas mostram largura, altura e resolução na mesma caixa. É útil para impressão, mas vira armadilha para a web.

A documentação da Adobe sobre Tamanho da Imagem separa:

• Dimensões: o número de pixels.
• Largura e altura: o tamanho físico ou de layout conforme a unidade.
• Resolução: pixels por polegada para a qualidade de impressão.
• Reamostrar: adicionar ou remover pixels.

O interruptor-chave chama-se Reamostrar.

Com Reamostrar desativado, passar de 72 PPI para 300 PPI mantém os mesmos pixels e muda apenas o tamanho de impressão sugerido. Um arquivo 3000 × 2000 continua 3000 × 2000. É trabalho no nível de metadados.

Com Reamostrar ativo, mudar a resolução pode adicionar ou remover pixels de acordo com os campos de largura e altura. Os dados de imagem mudam: o arquivo pode ficar maior ou menor, mais nítido ou mais mole, e podem aparecer artefatos de interpolação se você ampliar demais.

Para uso web, evite o pedido vago «deixa em 72 DPI». Diga o alvo real:

• «Redimensiona isso para 1600 px de largura.»
• «Exporta uma miniatura de 320 px.»
• «Comprime esse JPG abaixo de 200 KB.»
• «Faz uma imagem 2x para um espaço CSS de 600 px, ou seja, 1200 px de largura.»

Mudar o DPI muda o tamanho do arquivo?

Normalmente, não.

Se você editar apenas o metadado DPI/PPI, o tamanho do arquivo pode ficar igual ou variar por poucos bytes por conta dos metadados. Os dados de imagem continuam sendo a mesma grade de pixels.

O tamanho muda quando você faz uma destas coisas:

• Redimensionar as dimensões em pixels.
• Cortar parte da imagem.
• Baixar a qualidade JPG/WebP/AVIF.
• Converter para outro formato.
• Remover EXIF ou outros metadados.
• Achatar transparência.
• Reduzir frames ou duração de uma animação.

Se um site diz que o upload deve ficar abaixo de 500 KB, mudar de 300 DPI para 72 DPI é a saída errada. Redimensione a imagem, comprima-a ou faça as duas coisas.

Quando 300 DPI realmente importa

300 DPI é uma abreviação útil para impressão vista de perto. Significa que o arquivo de impressão tem 300 pixels para cada polegada de saída final.

Casos típicos a 300 DPI:

• fotos de passaporte e de visto,
• cópias de laboratório 4 × 6 e 5 × 7 polegadas,
• pequenos flyers e folders,
• imagens de livros e revistas,
• rótulos de produto vistos de perto,
• digitalizações em que textos pequenos ou linhas finas importam.

A conta:

Para impressão, o tamanho físico não é opcional. Dizer só «300 DPI» é incompleto. Uma imagem a 300 DPI para uma foto de passaporte 2 × 2 polegadas são 600 × 600 pixels. Uma imagem a 300 DPI para uma página A4 são cerca de 2480 × 3508 pixels. São arquivos totalmente diferentes.

Quando 300 DPI não importa

Focar em 300 DPI costuma ser o alvo errado para:

• imagens de sites,
• posts em redes sociais,
• anexos de e-mail,
• miniaturas de produto,
• capturas de tela de blog,
• ícones de app e gráficos de interface,
• formulários online que validam dimensões em pixels e tamanho de arquivo.

Alguns portais de upload citam o DPI nas instruções porque o resultado final é impresso. Ainda assim, na prática o portal costuma verificar dimensões em pixels, proporção, tamanho do arquivo, modo de cor ou posição do rosto, não a etiqueta de metadados. Se o requisito diz «2 × 2 polegadas a 300 DPI», converta para pixels: 600 × 600.

Para telas, use requisitos em pixels. Para impressão, use requisitos em pixels mais o tamanho físico.

Retina e HiDPI não são «300 DPI»

Telas de alta densidade precisam de mais pixels de origem do que as antigas, mas isso não é a mesma coisa que mudar os metadados do arquivo para 300 DPI.

Exemplo:

• O design mostra uma foto de produto com 600 pixels CSS de largura.
• Uma tela 1x se contenta com uma fonte de 600 px de largura.
• Uma tela 2x se beneficia de uma fonte de 1200 px de largura.
• Uma tela 3x pode se beneficiar de uma fonte de 1800 px de largura quando o detalhe importa.

A imagem pode continuar marcada como 72, 96 ou 300 DPI, e a lógica do layout não muda. O que importa é a relação entre pixels de origem e pixels CSS exibidos.

É por isso que as imagens responsivas usam descritores como 1200w ou 2x, não «300dpi». O navegador procura simplesmente uma imagem com dados suficientes para o tamanho renderizado, a densidade da tela e as condições de rede.

Como traduzir pedidos comuns

Pedidos de mudança de DPI muitas vezes querem dizer outra coisa. Traduza o pedido antes de mexer no arquivo.

Essa pergunta a mais evita a maioria dos erros de DPI.

Como a PhotoTools trata as tarefas ligadas ao DPI

A PhotoTools é construída em torno daquilo que realmente muda a saída: os pixels.

Para trabalho web:

1. Use Redimensionar para definir as dimensões reais em pixels.
2. Aplique compressão se houver um alvo de tamanho de arquivo.
3. Deixe o original intocado.
4. Exporte uma cópia web com nome útil, como hero-1600.jpg ou card-600.webp.

Para impressão de fotos de passaporte ou identidade:

1. Abra o Criador de Foto de Passaporte.
2. Escolha um preset como 2 × 2 polegadas, 35 × 45 mm ou um tamanho personalizado.
3. A ferramenta converte o tamanho físico da foto para pixels no DPI escolhido.
4. Monta uma folha de impressão 4 × 6 ou 6 × 4 polegadas no navegador.
5. Imprima a 100 %, tamanho real, com «ajustar à página» desativado.
6. Meça a foto impressa antes de entregar.

A implementação local usa o tamanho de foto escolhido, o tamanho da folha e o DPI para calcular as dimensões em pixels. Por exemplo, uma folha 4 × 6 polegadas a 300 DPI vira uma tela de 1200 × 1800 pixels. Uma área de foto 2 × 2 polegadas a 300 DPI vira 600 × 600 pixels.

Isso é um layout de impressão de verdade. Diferente de abrir uma imagenzinha web, mudar o campo de metadados para 300 e torcer para a impressão sair nítida.

Checklist prática

Use esta checklist antes de mexer num arquivo por causa de uma menção a DPI:

• Se o destino é um site, peça dimensões em pixels e limites de tamanho.
• Se o destino é impressão, peça o tamanho físico e o DPI/PPI alvo.
• Se o arquivo está pesado, redimensione ou comprima em vez de mexer nos metadados.
• Se a imagem está borrada, cheque pixels de origem, compressão e tamanho de exibição.
• Se a impressão está mole, calcule se a fonte tem pixels suficientes.
• Se a impressão saiu com o tamanho físico errado, cheque a escala da impressora e o formato do papel.
• Se é foto de passaporte ou de visto, meça a cópia impressa e confira a exigência oficial.

Em resumo: o DPI liga os pixels ao papel. Pixels e CSS controlam a web.

Fontes técnicas consultadas

Este guia foi revisado diante de:

• W3C CSS Values and Units Module Level 4, pelas unidades absolutas de CSS, as unidades de resolução e a relação 1dppx = 96dpi.
• W3C CSS Images Module Level 4, pela forma como o CSS define a resolução de imagem e a propriedade image-resolution.
• MDN: image-resolution, pelas notas atuais de implementação e o status experimental de image-resolution no CSS.
• MDN: HTMLImageElement naturalWidth, pelo dimensionamento das imagens no navegador em pixels CSS.
• MDN: referência do elemento img, por srcset, sizes, descritores de largura e escolha de fonte pelo navegador.
• Adobe Photoshop — tamanho e resolução da imagem, pela distinção do Photoshop entre dimensões, resolução e reamostragem.
• Adobe Photoshop — redimensionar e reamostrar, pela forma como a reamostragem muda os pixels e por que resolução e tamanho físico são conceitos de impressão.

Em resumo: mexer na etiqueta DPI raramente é a solução. Decida antes o destino e depois mude os pixels, a compressão ou o layout de impressão de que esse destino realmente precisa.