the 72 PPI Web Resolution Myth

escrito por Steve Patterson.se você esteve em torno de computadores e imagens digitais por um tempo, especialmente se você é um web designer ou um fotógrafo publicando suas fotos online, você certamente ouviu dizer que a resolução correta para as imagens exibidas na web, ou em telas de computador em geral, é de 72 pixels por polegada (ppi).,

Você pode até ter ouvido dizer que enquanto 72 ppi é correto para imagens exibidas em um Mac, um PC baseado no Windows precisa da resolução definida para 96 ppi.

alguns dizem que é ” ppi “(pixels por polegada), outros afirmam que é “dpi” (pontos por polegada), e toda a coisa ficaria muito confusa se não fosse por um pequeno fato – é tudo um completo absurdo! Neste tutorial, vamos aprender por que simplesmente não existe tal coisa como uma resolução de tela ou web padrão e por que, se suas imagens estão destinadas à web, você não precisa se preocupar com a resolução de imagem em tudo!

um pouco de História…,

a origem da resolução de 72 ppi na tela data de meados da década de 1980, quando a Apple lançou seus primeiros computadores Macintosh. Estes computadores incluíam um display embutido de 9 polegadas com uma resolução de tela de 72 pixels por polegada. Porquê 72 pixels por polegada? É porque as telas Macintosh foram projetadas especificamente para funcionar em perfeita harmonia com as impressoras da Apple ImageWriter, que tinham uma resolução de impressão de 144 pontos por polegada – exatamente o dobro da Resolução da tela., Isso tornou mais fácil escalar a tela de exibição para a página impressa, o que significava que o seu texto e gráficos poderiam ser visualizados na tela no tamanho exato que eles apareceriam quando impressos. Mais tarde, como a Apple começou a fazer displays maiores para o Macintosh, eles se certificaram de manter as resoluções de tela definidas para os mesmos 72 pixels por polegada para que os usuários sempre ver uma pré-visualização precisa na tela do documento impresso (desde que eles estavam usando uma impressora ImageWriter).

mas a resolução de 72 pixels por polegada era um padrão apenas com a Apple, e não durou., Empresas de terceiros que vendem monitores para o Macintosh não cumpriram o padrão, e nem os monitores de PC concorrentes. Hoje, quase três décadas depois, a tecnologia melhorou muito e os dias de telas com uma resolução de apenas 72 ppi já se foram. Até a Apple, a empresa que começou tudo, agora vende suas exibições com resoluções muito mais altas. Já ninguém faz 72 ecrãs de ppi. Já ninguém está a usar 72 ecrãs ppi., E no entanto, mesmo que essa velha tecnologia esteja muito atrás de nós, ainda temos um monte de pessoas que continuam a acreditar que precisamos definir a resolução de nossas imagens para 72 pixels por polegada no Photoshop antes de carregá-los para a web. A maioria das pessoas acha que a razão é para que as imagens vão exibir corretamente na tela, então vamos começar as coisas aprendendo uma maneira fácil de provar que o seu monitor de computador, juntamente com cada monitor de computador moderno, na verdade tem uma resolução muito maior do que 72 ppi.,

Colocando A 72 PPI Padrão Para O Teste

Como todos os outros, estes dias, o monitor do seu computador (seja ele um monitor autônomo, um tudo-em-um sistema como um iMac, ou parte de um laptop) tem uma resolução de tela superior a 72 pixels por polegada, e você não tem que tomar minha palavra para ela. Você pode facilmente testá-lo você mesmo. Só precisa de uma régua ou fita métrica. Agora, quando uma loja vende um monitor de computador, eles geralmente dizem seu tamanho com base em sua largura diagonal, com alguns tamanhos comuns sendo 17 polegadas, 19 polegadas, 24 polegadas, e assim por diante., Tudo bem, mas para o nosso teste aqui, não precisamos de nos preocupar com esse número. O que precisamos descobrir é a largura real, em polegadas, do seu ecrã. Para fazer isso, basta pegar a sua régua ou fita medida e medir a sua área de tela da esquerda para a direita. Certifica-te que estás a medir apenas a área do ecrã. Não inclua nenhuma das fronteiras à volta do ecrã. Precisamos da largura real do ecrã (foto do monitor):

medir a largura do seu ecrã (não incluindo o contorno exterior).,

Uma vez que você tenha medido a largura, a outra coisa que você precisa se certificar é que o seu monitor está configurado para a sua resolução de exibição nativa, que é o número real de pixels que o seu ecrã pode exibir da esquerda para a direita e de cima para baixo. Por exemplo, um monitor com uma resolução de exibição nativa de 1920 x 1080 (comumente referido como “full HD”) contém 1920 pixels da esquerda para a direita e 1080 pixels de cima para baixo., Eu estou atualmente usando um monitor com uma resolução de exibição nativa de 2560 x 1440, mas meu laptop tem uma resolução de exibição nativa de 1920 x 1200 por isso varia, o que significa que você precisa saber a resolução de exibição nativa de seu monitor específico e certifique-se que é o que você tem o monitor definido nas opções de exibição do seu sistema operacional.,

Agora que você já mediu sua tela largura real e você se certificou de que o seu monitor está funcionando em seu nativo a resolução da tela, para saber qual a sua real resolução de tela (em pixels por polegada), basta dar o primeiro número de nativos a resolução da tela, que indica a largura da tela em pixels, e dividir pela largura da tela em polegadas. Por exemplo, minha resolução de exibição nativa é 2560 x 1440, então eu vou pegar esse primeiro número, 2560, que é a largura da tela em pixels, e eu vou dividi-lo pela largura em polegadas, que no meu caso era 23.,4 (ou muito perto, de qualquer maneira). Usando a calculadora embutida do meu sistema operativo, 2560 ÷ 23.4 = 109.4, que eu arredondarei para 109. Então, apenas deste teste rápido e simples, eu confirmei que minha resolução de tela é de 109 pixels por polegada, não 72 pixels por polegada. Seu próprio teste com sua tela pode dar-lhe um resultado diferente do meu, mas a menos que você ainda está usando um daqueles computadores Macintosh originais de meados dos anos 80, ele será muito maior do que 72 ppi.se quiser, pode fazer a mesma coisa com a altura do seu ecrã., Basta tomar a medida da régua ou fita e medir a altura real do ecrã em polegadas (mais uma vez evitando a área de contorno em torno dela):

medir a altura do seu ecrã (não incluindo o contorno exterior).

então, pegue o segundo número da resolução de visualização nativa do seu ecrã, o que lhe dá a altura em pixels, e divida-o pela altura em polegadas. Mais uma vez, a minha resolução de exibição nativa é 2560 x 1440 então eu vou pegar esse segundo número, 1440, e dividi-lo pela minha altura de tela medida que era de 13.2 polegadas. Usando a minha calculadora, 1440 ÷ 13.2 = 109.,09 que mais uma vez vou arredondar para 109. Como podemos ver, você deve obter praticamente o mesmo resultado usando a largura ou altura do seu ecrã. No meu caso, ambos tinham 109 pixels por polegada, não 72 pixels por polegada.

para comparação, vamos verificar a Resolução real da tela do meu laptop. É um MacBook Pro (feito, claro, pela Apple, a empresa que nos deu o original 72 ppi padrão há muitos anos)., Meu MacBook Pro tem uma resolução de exibição nativa de 1920 x 1200, então assim como eu fiz antes, vou pegar esse primeiro número, 1920, que me dá a largura da tela em pixels, e eu vou dividi-lo pela largura da tela em polegadas, que neste caso é 14.4. Então, 1920 : 14.4 = 133.3, que vou arredondar para 133 pixels por polegada. Isso é muito mais alto do que 72 e ainda mais alto do que o meu monitor independente. Vou fazer a mesma coisa com a altura, tomando a altura em pixels (1200) e dividindo-a pela altura em polegadas (9). 1200 ÷ 9 = 133.3, novamente arredondado para 133 pixels por polegada.,

duas exibições diferentes, cada uma com duas resoluções de tela diferentes( 109 ppi e 133 ppi), ambas consideravelmente superiores a 72 ppi que, de acordo com muitas pessoas de hoje, continua a ser a resolução padrão da indústria para visualização de imagens na web e na tela., Se a minha tela, a sua tela e a de todos os outros tem uma resolução superior a 72 ppi, para não mencionar o fato de que ambos os meus telas tinham resoluções muito diferentes um do outro e sua tela pode ter uma resolução diferente também, então claramente, não só não há mais padrão oficial para resolução de tela, mas mesmo que houvesse, não seria mais 72 ppi. Aqueles dias, como os computadores Macintosh originais que foram projetados para, São história.,

a Resolução da imagem afecta o tamanho da impressão, não o tamanho do ecrã

Se o facto de os monitores de computador terem hoje resoluções de ecrã superiores a 72 ppi não o convenceu de que já não existe um padrão de resolução de ecrã de 72 ppi, aqui está outro facto importante a considerar. Se você leu anteriormente através de nossa resolução de imagem, dimensões de pixels e tutorial de tamanho de documento, você já sabe que a resolução de imagem não tem absolutamente nada a ver com a forma como a sua imagem aparece em seu ecrã. De facto, uma imagem digital, por si só, não tem qualquer resolução inerente. São só pixels., Tem um certo número de pixels da esquerda para a direita e um certo número de cima para baixo. A largura e a altura de uma imagem, em pixels, é conhecida como suas dimensões de pixels, e isso é tudo o que uma tela de computador se preocupa.

O tamanho em que uma imagem aparece no seu ecrã depende apenas de duas coisas – As dimensões do pixel da imagem e a resolução do ecrã. Desde que você tenha configurado o seu ecrã para a sua resolução de visualização nativa, como discutimos anteriormente, então uma imagem será exibida pixel-por-pixel., Em outras palavras, cada pixel na imagem irá ocupar exatamente um pixel em sua tela. Por exemplo, uma imagem de 640×480 pixels preencheria uma área de 640×480 pixels da sua tela. Um banner de 800 pixels de largura em um site apareceria 800 pixels de largura na tela. Nem mais, nem menos. E não importa o que você definir a resolução da imagem no Photoshop, quer seja 72 ppi, 300 ppi ou 3000 ppi, ele não terá nenhum efeito em quão grande ou pequena a imagem aparece na tela.

isso é porque a resolução da imagem afeta apenas uma coisa – o tamanho da imagem quando é impressa., Ao definir a resolução no Photoshop, dizemos à impressora, não à tela, quantos pixels na imagem para se comprimir em uma polegada de papel. Quanto mais pixels você estiver apertando em cada centímetro de papel, menor a imagem aparecerá quando impressa. E de um modo geral, quanto mais pixels você imprime por polegada, maior é a qualidade da impressão.

Podemos facilmente descobrir quão grande uma foto irá imprimir com base numa determinada resolução de imagem., Basta pegar a largura da foto em pixels e dividi-la pela sua resolução da imagem, em seguida, pegar a altura da foto em pixels e dividi-la pela Resolução da imagem também. Se pegarmos uma imagem de 640 x 480 pixels, como exemplo, e definir sua resolução para 72 ppi no Photoshop, então podemos dividir a largura e a altura da foto por sua resolução para determinar que ela vai imprimir em papel a cerca de 8.9 x 6.7 polegadas., Se nós aumentar a sua resolução no Photoshop para, digamos, 240 ppi, que é mais comum de resolução de impressão, em seguida, novamente, se fizermos as contas, dividindo os pixels de largura e altura por 240 ppi, sabemos que a foto iria imprimir em um tamanho de 2,7 x 2 polegadas, que é muito menor do que se tivéssemos impresso em 72 ppi mas, em geral, a qualidade de impressão será muito melhor. Mas o mais importante para entender aqui é que, ao mudar a resolução, não estamos, de forma alguma, afetando a aparência da imagem na tela.,

para ver mais claramente como a resolução afeta o tamanho da impressão e não o tamanho da tela, aqui está uma imagem que eu tenho Aberto no Photoshop. Este rapaz também foi tentando fazer sentido de tudo isto 72 ppi web resolução coisas, mas parece que ele pode ser overthinking um pouco (pensando foto de criança a partir de ):

a resolução de Imagem é realmente esta complicado, mas, definitivamente, Um esforço.,

vou abrir o Photoshop a Imagem da caixa de diálogo Tamanho, indo até o menu Imagem na Barra de Menu no topo da tela e escolha o Tamanho da Imagem:

Vai de Imagem > Tamanho da Imagem.

no topo da janela de tamanho da imagem está a secção dimensões dos pixels que nos indica a largura e a altura da imagem em pixels. Aqui podemos ver que minha foto tem uma largura e altura de 500 pixels, tornando-o um tamanho decente para exibição na web., Esta é a única parte da janela de tamanho da imagem que o seu ecrã do computador se preocupa – as dimensões reais dos pixels da imagem:

a secção dimensões dos pixels mostra-nos a largura e a altura dos pixels.

abaixo das dimensões do pixel está a secção do tamanho do documento que nos diz O tamanho da imagem que irá aparecer no papel se a imprimirmos. Esta secção trata exclusivamente do tamanho da impressão e não tem qualquer efeito sobre a forma como a imagem aparece na tela. Acontece também ser o lar para a opção de Resolução tudo-importante (a razão de estarmos todos aqui!,), o que faz sentido porque a resolução afeta o tamanho da impressão, não o tamanho da tela. Como podemos ver, o Photoshop tem ido em frente e definir a resolução de uma foto minha de 72 pixels por polegada (sim, até mesmo o Photoshop é contribuir para a 72 ppi mito), e logo acima da opção de Resolução, nas caixas Largura e Altura, podemos ver que em 72 ppi, o meu 500 x 500 pixel da imagem de impressão em 6.944 x 6.944 polegadas em papel (500 ÷ 72 = 6.944):

O Tamanho do Documento secção mostra-nos o tamanho de impressão, com base na resolução atual. Não tem efeito no tamanho da tela.,

vamos ver o que acontece se eu aumentar a resolução da imagem. Antes de o fazer, porém, vou desligar rapidamente a opção de repetição da imagem perto do fundo da janela, para que a imagem mantenha as suas dimensões originais dos pixels quando alterar a resolução:

desligar a opção de repetição da imagem.

com a imagem de novo desligada, vou aumentar a resolução de 72 pixels por polegada para 240 pixels por polegada. Podemos ver na seção de dimensões de pixels no topo que o aumento da resolução não mudou as dimensões reais de pixels., Ainda são 500 x 500 pixels, o que significa que ainda iria ocupar uma área de 500 x 500 pixels na tela. Mas a 240 ppi, agora seria impresso em papel com um tamanho de apenas 2.083 x 2.083 polegadas (500 ÷ 240 = 2.083). Mudar a resolução mudou o tamanho da impressão da foto, mas nada mais:

a imagem iria agora imprimir menor, mas permaneceria exatamente o mesmo tamanho de 500 x 500 pixels na tela.

vou novamente aumentar a resolução da imagem, desta vez para algo louco como 500 pixels por polegada, só para tornar a matemática realmente fácil., Uma imagem de 500 x 500 pixels, com uma resolução de 500 pixels por polegada, seria impressa como uma imagem de 1 x 1 polegada em papel (500 ÷ 500 = 1). Mais uma vez, as dimensões reais do pixel da imagem não mudaram., Mesmo a 500 ppi, a minha imagem aparecer maior ou menor na tela que seria a 72 ppi, ou 240 ppi, ou a qualquer resolução porque ela ainda é um de 500 x 500 pixel de imagem, independentemente da configuração de resolução, e suas dimensões de pixel são todos a tela do seu computador se preocupa com:

A 500 ppi, a imagem de impressão muito pequena, de fato, mas ainda aparecem como uma de 500 x 500 pixel da imagem na tela.

finalmente, aqui está uma comparação lado a lado da imagem como aparece em todas as três resoluções acima., Eu fiz a imagem menor (agora é apenas 200 x 200 pixels) para que eu possa caber todas as três versões ao lado um do outro, mas a primeira versão à esquerda foi salva em 72 ppi. A versão no meio foi salvo em 240 ppi, e a versão da direita foi salvo em 500 ppi:

A 72 ppi (à esquerda), 240 ppi (médio) e 500 ppi (direita) da imagem.

como podemos ver claramente, a resolução não tem qualquer efeito sobre a aparência da imagem na tela., Todas as três versões ocupam um espaço de exatamente 200 x 200 pixels, independentemente da configuração de resolução. A qualidade de cada versão também é exatamente a mesma. Cada versão iria imprimir em um tamanho muito diferente por causa das diferentes configurações de resolução, mas não faz qualquer diferença para o tamanho da tela ou para a qualidade da imagem.

embora seja duvidoso que este 72 ppi web e resolução de tela nonsense vai desaparecer a qualquer momento em breve, espero que este tutorial tenha pelo menos tornado mais fácil de ver por que é, de fato, absurdo neste ponto., Monitores de computador hoje em dia todos têm resoluções de tela superior a 72 ppi, e a opção de resolução de imagem no Photoshop afeta apenas o tamanho de impressão de uma foto, não o seu tamanho de tela.

de Qualquer foto com dimensões de pixel pequeno o suficiente para exibir na web seria pequena demais para qualquer um baixar e imprimir uma boa qualidade de versão em um tamanho útil, assim, com todos esses motivos em mente, se sua foto irá apenas ser visualizados na tela, seja na web, em um e-mail, ou qualquer que seja o caso, simplesmente não há razão lógica por você precisará definir a sua resolução de 72 ppi no Photoshop., A menos que esteja a imprimir a foto, não precisa de se preocupar com a resolução da imagem. E aqui está!

obtenha todos os nossos Tutoriais Photoshop como PDFs! Descarrega-os hoje!

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *