Aqui explicamos qual é a melhor resolução para as imagens voltadas para Web, o que é DPI. De quebra explicamos a diferença das telas Retina (Apple), HD, Full HD e 4K.

Vamos direto ao ponto. A melhor resolução das imagens para a Web é 72dpi. Porém, saber a fórmula e não entender vai te colocar numa posição desagradável quando seu cliente ou seu chefe te perguntar: o que é isso? Neste artigo vamos explicar o que é e porque usar 72 dpi.

A imagem que você vê numa tela, seja celular, desktop ou tablet, é formada por pixels (que são os pontos da tela) A “medida” dos pixels é chamada de resolução da imagem. Quanto maior a resolução, maior a quantidade de pixels.

Até aqui é fácil de entender. Então, para ter a melhor imagem, por que não usamos a maior resolução possível e fim de papo? Porque é a utilização da imagem que vai definir o que é alta resolução ou resolução ideal. Vamos para o mundo real.

Imagem para Web versus imagem para impressão

Se a imagem é para ser exibida nas telas então sua resolução deve estar em harmonia com a resolução da tela. Se a imagem digital vai ser usada para impressão muda completamente a resolução, porque a exibição será num papel, ou banner, etc. No primeiro caso a resolução indicada é 72dpi, já no segundo pode ser 300dpi ou 200dpi, de acordo com a impressora, tipo de papel, etc. (não vamos entrar aqui nos detalhes das imagens impressas).

veja uma tabela prática

uso da Imagem x resolução:

Tela (lojas virtuais, sites, etc) > 72 dpi
Impressão jato de tinta > 200 dpi
Impressão laser ou gráfica > 300 dpi ou +

O que é DPI?

DPI é uma sigla em inglês para dots per inch ou pontos por polegada. Dissemos que as imagens digitais são formadas por pontos, mas quando medimos a resolução de uma imagem não usamos o total de pontos, utilizamos o total de pontos em cada polegada (inch).

Para não confundir com os pontos usados há centenas de anos na impressão, quando a imagem é digital usamos pixels ou invés de pontos. Estamos nos referindo aos pixels das telas. Podemos dizer pixels por polegada ou pontos por polegada.

O que acontece se usar mais de 72 dpi numa imagem para a Web?

O primeiro problema é que o arquivo vai ficar maior, quanto mais pontos em cada polegada, mais informação logo o tamanho do arquivo fica maior. E imagens com tamanho maior levam mais tempo para carregar e seu visitante vai dar bye bye para seu site =)

Outro problema é que a imagem vai ser exibida num tamanho maior na tela e sua qualidade vai ser exatamente a mesma! A qualidade da exibição é a tela que determina, e a tela é física, não aumenta nem diminui de qualidade.

O que muda se a tela for HD, Full HD, 4K (Ultra HD) ou Retina?

Uma coisa é o tamanho físico da tela, por exemplo um celular com 6,5 polegadas, outra é a quantidade de pixels que vão ser exibidos nesta tela. A medida das telas é feita pela quantidade de colunas ou linhas. Então, quanto mais colunas e linhas, mais espaço para exibir elementos (numa comparação muito simples, um mercadinho de bairro tem espaço para quatro corredores, o hipermercado tem 30 corredores mas os produtos são do mesmo tamanho em ambos mercados, assim como as imagens serão com as mesmas dpi)

As telas High Definition (HD), ou de alta definição, são formadas por 1.280 colunas por 720 linhas de pixels. Sua resolução de imagem é de 720p (1280 x 720 pixels), o que significa aproximadamente 1 milhão de pixels totais)

As telas Full HD nada mais são do que telas de alta definição, porém com um número maior de linhas: 1920 x 1080 pixels. Sua resolução de imagem é de 1080p (1920 x 1080 pixels), o que significa aproximadamente 2 milhões de pixels totais.

Já para as telas 4K (Ultra HD), sua resolução de imagem é de 4K (3.840 x 2.160) o que significa aproximadamente 8 milhões de pixels totais.

A tela Retina da Apple

“Tela Retina, ou Retina Display, nada mais é do que um nome comercial que a Apple usa para os seus displays com alta densidade de pixels. A primeira aparição foi no iPhone 4, lançado em junho de 2010. Na ocasião, Steve Jobs destacou que a ideia da empresa foi comprimir quatro vezes mais pixels em um display dos que os concorrentes. Com isso, o número de pontos usados para formar uma imagem ou texto pode ser mais preciso e o resultado final, muito mais nítido.” (fonte: techtudo)

Uma dica para as telas Retina é que as imagens podem ser criadas com o dobro do tamanho, por exemplo um logo para uma tela comum tem 120x50, para uma tela retina pode ser criado com 240x100, para ficar mais nítido. Mas a resolução em ambos os casos será de 72 dpi.

Isto é tudo!

Espero que tenha ajudado!

Boa sorte com suas imagens.

Algumas fontes para este artigo:
TechTudo - https://glo.bo/2Xag8H3
Dell - https://dell.to/2YRfsGT