Desenvolvo banners da web há mais de um ano, mas nunca considerei o DPI.
Eu estava usando o 72DPI padrão, mas agora quero saber se é necessário criar designs da web no 72DPI? E se usarmos mais do que isso, por exemplo, 200DPI?
Sei que mais DPI significa mais qualidade de imagem e é por isso que quero usar alto DPI, mas recentemente li em algum lugar que, para banners da web, devemos usar 72DPI. Eu só quero saber se é obrigatório e isso afeta negativamente em algum aspecto?
Respostas:
As configurações de PPI (pixels por polegada) não são usadas em imagens da web. As imagens na Web, exibições de retina ou outras, são exibidas por suas dimensões de pixel (largura e altura) e não por nenhuma configuração PPI / DPI. De fato, muitas imagens da web, como png, gif, jpg, podem nem armazenar uma configuração de ppi em seus dados internos e dependem das configurações de largura e altura.
Uma imagem de 100 pixels x 100 pixels é exibida na Web, independentemente de qualquer configuração PPI / DPI.
É por isso que as imagens para telas de retina são salvas no tamanho 2x, em vez de uma configuração maior de ppi. A densidade de pixels das telas da retina é maior, no entanto, elas ainda exibem a imagem em qualquer estado da tela que seja a largura e a altura de uma imagem que não seja baseada em nenhuma configuração PPI.
Na realidade, um monitor usando uma densidade de pixels de 72ppi não é visto desde o início até meados da década de 1980. 72ppi não é preciso há quase 30 anos. Na verdade, nunca foi preciso para os sistemas Windows, pois o Windows usa um padrão de 96ppi para densidade de pixels.
Não acredita em mim? Experimente você mesmo. Crie duas imagens no Photoshop, 100 pixels por 100 pixels. Faça uma imagem 72ppi e a outra 300ppi. Salve os dois para a Web. Eles são diferentes em um navegador da Web? Não. Ambos são imagens de 100 por 100 pixels.
As configurações de DPI (pontos por polegada) são aplicáveis apenas ao imprimir uma imagem. O DPI não tem influência nas imagens destinadas à tela. DPI refere-se à quantidade de pontos / pontos de tinta que a impressora colocará dentro de uma polegada. Como nenhuma tela na Terra usa tinta, DPI é um termo incorreto para qualquer coisa relacionada às telas da tela.
Esteja ciente de que alguns fabricantes de móveis optaram por usar o termo DPIx ou xDPI, que às vezes é reduzido para simplesmente DPI. Esta não é a forma tradicional da sigla e o fabricante simplesmente turvou bastante as águas. Se você vê o DPI em relação às resoluções de tela para dispositivos móveis, eles estão falando sobre PPI efetivo e realmente não referenciando pontos por polegada. Um acrônimo mais apropriado seria xPPI ou PPIx, porque as telas móveis, como todos os monitores, usam pixels e não tinta.
Não faz nenhuma diferença qual configuração de ppi você usa para imagens da web. É a largura (pixel) e a altura (pixel) de uma imagem que são importantes.
Ao trabalhar com várias imagens, é importante manter a consistência. Você deseja que todas as suas imagens sejam definidas no mesmo ppi para evitar o redimensionamento e o dimensionamento de aspectos, caso você mova peças entre as imagens. Se você optar por usar 72, 96, 200 ou 145,8 ppi, não importa, mas todas as imagens devem ser definidas da mesma forma.
Embora o PPI definitivamente não importe - as dimensões de pixel são importantes para o design da Web e dos aplicativos, você deve ter muito cuidado ao usar aplicativos de design e misturar configurações de PPI. Aqui está o porquê:
No entanto, se você planeja usar o Photoshop e diferentes densidades de pixel para cada documento, arrastar camadas e copiar estilos de camada entre documentos dimensiona estilos de camada - arrastar uma camada de um documento do 326PPI Retina para iPhone para um documento do 264PPI Retina para iPad significa que todos os estilos de camada serão redimensionados em 20% (arredondado para o número inteiro mais próximo). E provavelmente não é isso que você deseja. Além disso, a visualização do OS X exibirá imagens de 72PPI no tamanho exato, independentemente da configuração.
Pixels por polegada é apenas uma tag
É por esses motivos que atribuo 72PPI a todos os meus documentos de design e recomendo que você faça o mesmo. Para alterar a densidade de pixels do documento do Photoshop sem redimensionar os dados da imagem, abra a caixa de diálogo Tamanho da imagem, desmarque Redimensionar imagem e digite a densidade de pixels desejada.
Vou entrar em detalhes o que o "dpi" realmente significa, por exemplos; com isso, você pode ver a resposta você mesmo. :
Em suma, sua imagem consiste em pontos de cor, um ao lado do outro. Mas eles não têm tamanho em nenhum sentido físico.
Agora, quando você mostra uma imagem em uma tela, normalmente apenas coloca as cores dos pontos da imagem na varredura de retângulos coloridos que sua tela pode exibir. Observe que ambos, o que eu chamo de "pontos" e retângulos aqui, são chamados "pixels" - mas olhando de perto eles são algo diferente.
Se exibirmos uma imagem dessa maneira natural em uma tela, podemos medir seu tamanho.
Por exemplo, nossa imagem tem 500 pontos de largura, os colocamos em retângulos coloridos na tela e vemos 5 polegadas de largura. Então, temos 100 retângulos por polegada, mostrando 100 de nossos pontos por polegada.
Ou seja, nossa imagem tem 100 dpi na tela.
Mas nem analisamos o valor de dpi em nosso arquivo de imagem!
Agora, se olharmos para o nosso arquivo, pode-se dizer que a imagem é 200 dpi! O valor de dpi é sobre quantos pontos de cor são visíveis por polegada de largura ou altura da tela. Portanto, o valor de dpi na imagem está nos dizendo que nossa imagem terá 2,5 polegadas de largura quando exibida - como uma promessa, não como um fato .
Quando atribuímos os pontos de imagem à tela, nem nos importamos com isso, porque apenas o exibimos e medimos o dpi físico real da representação de tela da imagem.
Então, como você vê, a promessa estava completamente errada . E ninguém liga! Porque simplesmente não é relevante.
O arquivo foi promissor - dizendo 200 dpi - ele terá "2,5 polegadas de largura quando mostrado". Em seguida, usamos uma tela que mostrava 5 polegadas de largura - podemos saber isso porque sabemos qual é a tela real.
Normalmente, nem sabemos o que o usuário final usará como exibição; portanto, podemos adivinhar apenas de qualquer maneira,
Então, agora faz sentido:
Além disso, não há apenas uma tela na qual a imagem possa ser exibida - eles podem ter tamanhos diferentes, portanto, nem é possível saber um valor real de dpi ao criar um arquivo de imagem.
Veja também minha resposta em O que exatamente é um "pixel"? .
Diretamente para a pergunta, com base no acima:
Quando você especifica dpi em um arquivo de imagem, isso não é tratado diretamente com a qualidade da imagem exibida no final.
Mas pode ser usado para comunicar sobre a qualidade da imagem - em termos de intenções: você pode dizer "Quero que esta imagem seja mostrada em uma tela de 200 dpi".
Se eu quiser mostrar esta imagem, talvez eu cuide e procure uma tela de 200 dpi; ou talvez eu apenas use uma tela antiga de 75 dpi que esteja na minha mesa. A imagem será bem grande, tenho que rolar - mas esse é o meu problema e: você nem descobrirá o que realmente é usado - o valor de 200 dpi não controlou a qualidade da imagem - apenas comunicou como exibi- la "da maneira certa" caminho "se eu me importo.
Acabei de testar duas cópias de uma imagem que fiz com o Photoshop. No entanto, defino um em 72 dpi e o outro em 720 dpi para ver se algum dos navegadores que eu uso os renderiza em tamanhos diferentes na tela.
Em todos os navegadores, exceto um, eles pareciam idênticos - em termos de tamanho e qualidade. No entanto, com o uso do Google Chrome, o fabricado aos 72 parecia bom, mas o fabricado aos 720 era extremamente pequeno - como se fosse 1/10 do tamanho.
Minha nossa. Parece um argumento para colocar todas as imagens autônomas (não restritas a uma página da web) em 72. Praticamente todas as minhas (que numeram centenas) estão em 120 dpi. Embora eles ainda pareçam grandes o suficiente no Chrome, talvez com esse navegador em mente eu deva trabalhar para colocá-los todos em 72. Talvez em algum lugar das letras miúdas das preferências do Chrome exista um remédio.