O mito do DPI
O tamanho de uma imagem em um layout de site é importante. Do alinhamento adequado à obtenção da quantidade certa de espaço em branco, o dimensionamento de fotos e gráficos com antecedência é essencial para criar uma aparência equilibrada.
As imagens na web são medidas em pixels . No entanto, muitas pessoas se dão ao trabalho de definir suas imagens para 72 pontos por polegada (
O equívoco sobre a resolução em imagens digitais vinculadas à web é que elas devem atender a um determinado número de pontos por polegada.
Na impressão, pixels por polegada e pontos por polegada afetam o tamanho de uma imagem em uma página. O DPI não se aplica ao layout na web.
Quando alguém converte uma imagem em 72 DPI , ela adiciona uma etapa extra sem nenhum benefício. As páginas da Web são medidas em pixels, não em unidades do mundo real, como polegadas.
Quando alguém lhe pede uma imagem da Web que tenha, por exemplo, cinco centímetros de largura, estima-se como ela apareceria em seu próprio monitor. Sem alterar as dimensões em pixels da imagem, essa imagem pareceria maior ou menor em monitores diferentes - e até pareceria diferente no mesmo monitor em uma configuração de resolução diferente.
O tamanho do pixel depende do contexto
Um pixel (que é a abreviação de “elemento de imagem”) é a menor unidade de medida em uma grade que exibe uma imagem digital. O DPI mede o tamanho desses pixels, ou pontos, quando são impressos.
A imagem abaixo é mostrada em diferentes DPI s.
36 DPI
150 DPI
3,096 DPI
Faça o download e abra-os em um editor de imagens para ver por si mesmo. Todos os três parecem iguais porque foram redimensionados, e não reamostrados.
Redimensionando alterações em tamanhos de pixel; Reamostragem de alterações na contagem de pixels
Existem duas maneiras de ampliar uma imagem: adicione mais pixels ou aumente os pixels. Da mesma forma, você pode reduzir o tamanho de uma imagem removendo pixels ou reduzindo pixels. Mas encolher e barbear são dois processos diferentes.
Mostrado acima, o redimensionamento de uma imagem altera o tamanho de seus pixels, não o número de pixels. Não estamos aumentando ou diminuindo o número de pixels, apenas alterando o tamanho desses pixels quando impressos. É uma relação inversa: imagens com pixels maiores terão uma densidade de pixels menor (menos pixels no mesmo número de polegadas) quando impressas.
Acima, a alteração de reamostragem altera o tamanho da imagem aumentando ou diminuindo o número de pixels. Imagens com mais pixels conterão mais informações e, muitas vezes, proporcionarão gráficos mais ricos.
O design da Web está preocupado com a redefinição de resolução, não com o redimensionamento, porque cada pixel em uma página da Web sempre terá o mesmo tamanho. Uma página da Web que mede 800 pixels de largura pode acomodar imagens de até 800 pixels de largura. Ampliar cada pixel não altera o fato de que o layout pode conter apenas 800 deles.
Você não pode fazer uma imagem parecer maior na tela ao redimensionar seus pixels porque cada pixel na mesma tela terá sempre o mesmo tamanho.
Redimensionamento e reamostragem no Photoshop
A caixa Image Size do Photoshop ( Image ‚ü Image Size ) controla o redimensionamento e a alteração de reamostragem das imagens.
A caixa de seleção "Resample" altera quantos pixels se encaixam em uma polegada linear - literalmente, os pixels por polegada. Se desligarmos a reamostragem, a única maneira de alterar o tamanho da imagem seria ampliar seus pixels para impressão.
Com a caixa de reamostragem deixada desmarcada, alterar a caixa de "resolução" alteraria o tamanho físico da imagem quando impressa, mas não o número de pixels. Quando impressa, uma imagem aparecerá maior ou menor. Em uma página da web, seria do mesmo tamanho.
Um experimento
Descobrir se o DPI é importante em layouts da web pode ser feito por um pequeno experimento. Se alterarmos uma imagem de 300 x 100 pixels em 72 DPI para 300 x 100 pixels em 144 DPI, quantos pixels teríamos?
- Faça uma imagem de 300 pixels de largura e 100 pixels de altura, a 72 DPI .
- Vamos fazer algumas contas. Quantos pixels isso seria?
- Agora redimensione a imagem para 300 x 100 pixels em 144 DPI .
- Vamos fazer mais um pouco de matemática. Quantos pixels é isso?
As respostas são:
- 300 x 100 = 30.000
- 300 x 100 ainda é 30.000
Pixels por polegada na tela
O número de pixels por polegada ainda é relevante on-line, mas as configurações de DPI não afetam como uma imagem é exibida.
Monitores de computador podem ser medidos fisicamente em polegadas, e cada um exibe um certo número de pixels. Por exemplo, digamos que um monitor de 19 ″ mostre 1280 x 1024 pixels. O usuário pode alterá-lo para exibir 1600 x 1200 pixels, aumentando assim seu PPI (ou seja, adicionando mais pixels no mesmo número de polegadas). A diferença importante na impressão é que você pode controlar os pixels por polegada de uma imagem.
Você pode tentar isso na maioria dos computadores modernos. Em um Mac, vá para o menu Apple ‚ü Preferências do Sistema e, em seguida, clique em“ Displays ”para ver as várias resoluções nas quais você pode configurar seu monitor. No Windows, clique com o botão direito do mouse na área de trabalho e selecione “Personalizar” e escolha “Configurações de exibição”. Altere a resolução da tela (número de pixels) e observe os itens na área de trabalho do Mac ou PC ficarem maiores ou menores.
Obviamente, o seu monitor não está mudando de tamanho. Mas se você segurar uma régua na tela, verá que o tamanho dos ícones e das janelas é inversamente proporcional ao número de pixels exibidos. Por exemplo, um laptop de 13 ″, um monitor de 17 ″ CRT e um monitor de tela plana de 21 ″ todos podem apresentar uma área de trabalho que mede 1024 x 768 pixels. Mais pixels significam ícones menores; menos pixels significam ícones maiores. Mais pixels no mesmo monitor proporcionam uma maior densidade de pixels; menos pixels é menor.
A diferença se torna mais perceptível com outros tipos de displays:
- Um outdoor digital de 47 x 12 pés pode usar apenas 888 x 240 pixels (cerca de 1,6 PPI).
- Uma tela do iPhone hoje mede 2 x 3 polegadas e contém 320 x 480 pixels (cerca de 160 PPI) .
Um único arquivo PNG com 100 x 100 pixels caberia tanto no outdoor 888 x 240 quanto no iPhone 320 x 480. Mas parece muito maior no quadro de avisos porque os pixels da placa são 100 vezes maiores que os do iPhone (1,6 vs. 160).
A ilustração abaixo mostra dois dispositivos com diferentes dimensões de pixels.
A mesma imagem está sendo mostrada em dois monitores diferentes. As diferenças no PPI de cada exibição fazem com que a imagem no visor direito pareça maior, mesmo que tenha menos pixels no total.
Você pode testar isso sozinho:
- Crie um JPG que mede 960 x 100 pixels, em qualquer densidade de pixel.
- Meça à mão com uma régua.
- Observe a mesma imagem em um computador com um monitor maior ou menor. Por exemplo, se você criou a imagem em uma tela de 20 ″, teste-a em um laptop de 13 ″.
- Imprima o mesmo número de pixels em diferentes densidades de pixels para ver diferentes tamanhos no papel.
O resultado é que essa imagem teria o mesmo número de pixels, mas uma largura diferente em polegadas. O layout do site apareceria em tamanhos diferentes, apesar do código idêntico. (Para um caso extremo, olhe para a página inteira em um iPhone; 960 pixels é ajustado para três polegadas ou menos, sem que o próprio arquivo seja alterado.)
Por que 72 é significativo
Muitos formatos de arquivo, incluindo JPG, TIF e PSD, armazenam a configuração de densidade de pixels da imagem. Se você salvar um JPG a 200 pixels / polegada, ele permanecerá em 200.
Outros formatos, incluindo GIF e PNG, descartam a densidade de pixels. Se você salvar uma imagem de 200 DPI como PNG, ela não salvará esse DPI. Muitos editores de imagem, incluindo o Adobe Photoshop, supõem que uma imagem é de 72
Setenta e dois é um número mágico em impressão e tipografia. Em 1737, Pierre Fournier usou unidades chamadas ciceros para medir o tipo. Seis ciceros eram 0,998 polegadas.
Por volta de 1770, François-Ambroise Didot usou ciceros um pouco maiores para se ajustar ao “pé” francês padrão. A pica de Didot tinha 0,1776 polegadas de comprimento e era dividida igualmente em 12 incrementos. Hoje nós os chamamos de pontos.
Em 1886, o American Point System estabeleceu uma “pica” como sendo 0,166 polegadas. Seis destes são 0,996 polegadas.
Nenhuma das unidades se afastou de 12 pontos por pica: 6 picas por polegada = 72 pontos por polegada. Foi um padrão importante em 1984, quando a Apple se preparou para introduzir o primeiro computador Macintosh. A interface do Mac foi projetada para ajudar as pessoas a relacionar o computador com o mundo físico. Engenheiros de software usaram a metáfora de uma mesa para descrever os trabalhos arcanos de um computador, até os ícones “papel”, “pasta” e “lixo”.
Cada pixel na tela original do Mac de 9 polegadas (diagonal) e 512 x 342 pixels mediu exatamente 1 x 1 ponto. Segure uma régua no vidro e você verá que 72 pixels na verdade preencheriam 1 polegada. Dessa forma, se você imprimiu uma imagem ou texto e a manteve ao lado da tela, tanto a imagem quanto a cópia impressa seriam do mesmo tamanho.
Mas as primeiras imagens digitais eram desajeitadas e irregulares. À medida que a tecnologia de tela e a memória melhoraram, os computadores conseguiram exibir mais pixels no mesmo monitor de tamanho. A combinação de uma impressão na tela ficou ainda menos certa quando os aplicativos raster e vetoriais permitiram que os usuários aumentassem o zoom e examinassem os pixels de perto. Em meados da década de 1990, o Microsoft Windows podia alternar entre 72 e 96 pixels por polegada na tela. Isso tornou os tamanhos de fonte menores mais legíveis porque mais pixels estavam disponíveis por tamanho de ponto.
Hoje, designers e clientes entendem que os tamanhos dos itens na tela não são absolutos. Diferenças no tamanho da tela e na funcionalidade de zoom são comuns. Mas 72 ainda é o padrão.
Maior tela PPI significa melhor legibilidade em tamanhos de ponto menores
Telas com maior PPI são ótimas para legibilidade. Mais pixels por polegada tornam a letra mais fácil de ler. Isso também significa que imagens e texto devem ser maiores (em pixels) para serem legíveis.
A amostra de texto acima foi redimensionada a partir de duas configurações de PPI de tela diferentes. A linha superior tem pixels menores (ou seja, um PPI maior na tela), portanto, 8 pontos é o menor tamanho de fonte legível. O texto na linha inferior é pouco legível abaixo de 10 pontos.
À medida que os monitores de PC ultrapassavam a densidade de pixels dos monitores Mac em meados dos anos 90, os sites construídos no Windows apresentavam tamanhos de fonte menores, para grande desânimo dos usuários de Mac. Hoje, as telas de ambas as plataformas possuem densidades de pixels altas o suficiente para fazer as diferenças serem discutidas.
Imagens Web Elásticas Com Navegadores Modernos
Sabemos agora que apenas a DPI não altera o tamanho de uma imagem na Web e não temos controle sobre em qual dispositivo uma imagem é exibida. Então, as dimensões de pixel de uma imagem são a única coisa que importa? Sim por enquanto.
Layouts de largura de fluido, que mudam de acordo com o tamanho do navegador, podem acomodar melhor uma variedade de dispositivos e monitores. Os navegadores modernos, do FireFox 3, Safari 3 e Internet Explorer 7 e superior, são melhores que versões mais antigas para redimensionar imagens em tempo real. o max-width A propriedade CSS força as imagens a caberem no contêiner, mas não aumentam além do tamanho real. Por exemplo:
p { width: 25% } / * Um quarto da área de conteúdo * / img { max-width: 100% }
p { width: 50% } / * Metade da área de conteúdo * / img { max-width: 100% }
p { width: 75% } / * Três quartos da área de conteúdo * / img { max-width: 100% }
/ * Sem largura definida para o parágrafo * / img { max-width: 100% }
Aqui vemos uma imagem de 800 pixels de largura cabe em quatro elementos de parágrafo de tamanhos diferentes. Se a largura da página fosse flexível, redimensionar a janela do navegador expandiria a imagem, mas não ultrapassaria as dimensões originais de 800 x 323 pixels. Nunca se tornaria distorcida, ou “pixelada”, de expansão excessiva.
Preparar imagens para a web significa planejar em pixels. Se alguém solicitar um gráfico de 2 pol. Para a Web, não para impressão, pergunte: "Qual é o tamanho dos seus pixels?"
Escrito exclusivamente para WDD por Ben Gremillion . Ben é um web designer freelancer que resolve problemas de comunicação com melhor design.
Em que mídia a resolução conta? Qual é a melhor maneira de dimensionar imagens online? Compartilhe suas ideias abaixo.