Sempre utilizei 72 dpi nas minhas imagens, mas atualmente este padrão vem apresentando baixa definição graças a variedade de dispositivos com resoluções diferentes (notebook, tablet, smartphones e etc). Qual seria o DPI recomendado para ser utilizado nos dias de hoje?
1 Resposta
Resposta rápida:
Tanto faz :)
Calma, tem explicação!
DPI significa "Dots per Inch", ou "Pontos por polegada". No arquivo digital, esta informação é um mero número armazenado nos metadados.
O conteúdo da imagem em si são os pixels. Quanto mais pixel, mais definição. o dpi é um "aviso" para o programa de saída, dizendo "faça esses pixels caberem nesse espaço".
Na mídia impressa geralmente temos uma quantidade de pontos muito maior do que é necessário para a resolução do olho humano, e as impressoras comuns de mercado atualmente costumam ter saída de mais de 600 dpi, e geralmente o material enviado para as mesmas não precisa ser preparado com tanto detalhamento.
Entretanto, pela mesma razão, esta medida não faz sentido para telas. A tela é medida em pixels, e uma imagem 100x100 pixels @ 72 dpi aparece do mesmíssimo tamanho que uma imagem 100x100 pixels @ 9000 dpi, quando vista na tela, pois essa informação é ignorada. Afinal, na tela a intenção é usar todos os pixels disponíveis, pois usualmente o olho consegue discernir cada um deles individualmente.
Tanto que muitos formatos de imagem normalmente não armazenam nativamente a informação de dpi, como o Jpeg, por exemplo.
O problema do design adequado em várias "resoluções de tela" (entre aspas, pois na verdade resolução é um termo ambíguo para explicar a quantidade de pontos do dispositivo) está no tamanho efetivo da imagem em pixels.
Exemplo prático:
Imagine uma imagem 300x300 px @ 300 dpi. Se tem 300 pontos por polegada, e a largura dessa imagem é 300 pixels (que equivale ao ponto, em imagens digitais), essa imagem ao ser impressa (sem que se edite a mesma, ou que se escale ela no programa de saída) teria uma polegada de largura e uma de altura.
Agora, imagine se as saídas em tela fossem respeitar o valor em dpi: Você faz uma imagem dessas e joga na tela, e ela aparece como um quadrado de uma polegada, aí joga na tela do celular e ela continua com uma polegada de largura e uma de altura... Ou pior! Imagine você apresentando a mesma imagem num projetor, para uma platéia. Ela teria que continuar aparecendo na medida de 1x1 polegada para manter os 300dpi. Provavelmente não é o resultado desejado.
Em suma: quando você muda o tamanho de um arquivo composto por pixels, o dpi passa a ser o resultado da quantidade de pontos final x a área efetiva ocupada, e não o que está indicado no arquivo.
É o que acontece na tela (ainda bem!): o dpi 'verdadeiro' da imagem é o do dispositivo. Da imagem original o que conta são os pixels.
Solução:
Se você quer fazer um site ou app que aproveite bem tanto um celular com 800x480 pixels e um notebook desses novos com tela de 3200x1800 pixels, um caminho é usar imagens vetoriais, como SVG, que são escalonáveis sem perda de qualidade, ou o que é mais tradicional, que é salvar várias imagens de tamanhos diferentes, e usá-las de acordo com o tamanho da tela.
No caso de múltiplas imagens, você pode recorrer ao media-query do CSS, que permite que você especifique os atributos de acordo com a área disponível na tela, entre outras coisas.
Exemplo de media-query:
#cabecalho {background: url(/imagem_grande.png) left center no-repeat}
@media (max-width: 800px) {
#cabecalho {background: url(/imagem_media.png) left center no-repeat}
}
@media (max-width: 480px) {
#cabecalho {background: url(/imagem_pequena.png) left center no-repeat}
}
Ou seja, o elemento de ID #cabecalho
vai exibir a imagem_grande.png
, mas se a largura da área exibida for menor que 800px, o estilo será sobreescrito pelo do media-query inicial e o elemento exibirá a imagem_media.png
, e mais que isso, no caso de telas de largura até 480px, a imagem será a imagem_pequena.png
.
Este exemplo foi extremamente simplificado, lembre-se que com media-queries você pode mudar completamente o layout da página, não apenas o tamanho das imagens. O que vai dentro do media-query é CSS convencional, então podem ser mudadas cores, os alinhamentos e o que mais você imaginar.
Lembre-se de definir um
@media print
caso use vários media queries e queira controlar o aspecto da versão impressa separadamente.
E ainda sem solução definitiva:
Para os novos displays em alta resolução, ainda há uma discussão em andamento, pois por questões de compatibilidade, o WebKit, por exemplo, trata cada pixel como um conjunto de 4 pixels, 2x2, quando se trata de displays "Retina". Solução similar a essa é o que acontece com aplicações que usam "ampliação de dpi" no Windows.
O proposto pelo próprio pessoal do webkit.org é usar SVG para resolver o problema da ampliação ficar "feia", mas onde não for possível, há o reparo técnico 1, que é usar imagens com o dobro de pixels escalonadas para baixo, como CSS background, possivelmente combinadas com um dos filtros do media-query que é o min-device-ratio
. O problema é que isto é uma solução específica do WebKit, aparentemente não muito sólida. Resta saber o quanto é efetiva em outros navegadores.
Mais detalhes podem ser vistos neste artigo (en).
Update: uma luz no fim do túnel, vinda do W3C (tomara que não seja um trem):
"O atributo SRCSET - Uma extensão HTML para imagens adaptativas" (en)
Update2 (2017): finalmente houve adoção do
srcset
:
Como trocar a imagem em telas menores (aqui no SOpt)
1. gambiarra
-
Aos amigos de Portugal, "tanto faz" tem o mesmo sentido aí? Aqui tem o sentido de "pouco importa", ou "qualquer coisa". Se aí for diferente, edito a resposta para ficar melhor.– Largato ♦Commented 30/03/2014 às 11:59
-
Bacco, eu discordo do "tanto faz" e não achei sua resposta satisfatória. Quanto menos pixel por polegada, menor a definição da imagem. Um website com 72dpi visto no "Macbook Pro Retina" fica evidente a qualidade ruim das imagens . 72dpi é um padrão utilizado a muito tempo, e hoje não parece fazer sentido visto a qualidade das telas atuais.– PauloCommented 30/03/2014 às 19:28
-
@PauloMaciel, é melhor você dar mais detalhes sobre seus conhecimentos na própria pergunta. Agora mesmo, você diz "vem apresentando baixa definição", mas não provê nenhuma prova ou argumento. Commented 30/03/2014 às 20:14
-
@PauloMaciel infelizmente nem tudo que é fato é satisfatório, mas é assim que funciona. Não depende da minha vontade. De qualquer forma, faça testes, experimente, e no fim você perceberá que o que está faltando é pixel (e que ampliar imagem na tela sem ter pixels pra isso é sempre ruim).– Largato ♦Commented 30/03/2014 às 23:35
-
@brasofilo, eu desenhei um circulo com preenchimento branco em um background transparente e exportei em png. Ao adicionar esta imagem no website em cima de uma cor verde, o circulo ficou com um perceptível serrilhado. Após alterar o DPI e exportar novamente em png com background transparente, o circulo perdeu o serrilhado. O fato de ter acontecido isso me gerou essa questão.– PauloCommented 30/03/2014 às 23:44