Entenda porque a quantidade de DPIs na verdade não faz nenhuma diferença nas imagens para interfaces digitais.
Esse assunto pode ser um pouco confuso, mas vamos tentar ser claros!
Quando se trata de materiais impressos, a quantidade de DPIs (dots per inch / pontos por polegada) está totalmente ligada à qualidade do material impresso, pois quanto maior a densidade de pontos, maior a nitidez e detalhes do material.
Já no meio digital, os DPIs não vão fazer diferença, pois se você tiver uma imagem de 1000px com 72DPIs ou uma imagem de 1000px com 300DPIs, o resultado e a qualidade serão exatamente os mesmos, ela continua tendo 1000px!
Tá, então o que importa para o meio digital? A resposta são os Pixels e os PPIs.
Oxe...mas qual a diferença entre DPI e PPI?
Se quisermos simplificar o pensamento, o DPI é para material impresso e o PPI é para material digital. Então, basicamente a lógica é parecida entre os dois, mas cada um com unidades de medida diferentes. Agora vamos ao exemplo:
Você já acessou algum site em que no computador a imagem está bonita, mas no seu smartphone ficou borrado, sem nitidez?
Isso acontece porque o PPI do smartphone é bem maior que o do monitor, e com isso dá para se ver muito mais detalhes, ou seja, no mesmo espaço em que caberia apenas 1 pixel no seu monitor, dependendo, cabe 4 pixels ou mais no seu smartphone, por isso a grande diferença de nitidez!
Ok... Chega de teoria e vamos pra prática. O que isso interfere no Web Design?
Se você tem uma imagem que irá aparecer com 500px no seu computador, para que ela não fique borrada no smartphone ou telas 4k você tem duas opções:
Salve a imagem com pelo menos o dobro do tamanho (1000px)
Ou utilize a imagem no monitor 4k / Smartphone com pelo menos metade do tamanho (250px)
Resumindo...
Para imagens não borrarem e manterem uma boa nitidez em monitores 4k, smartphones ou tablets com alto PPI, você sempre irá precisar do arquivo com o dobro do tamanho original!
Esperamos ter sido claros! Caso fique alguma dúvida, fique à vontade para nos perguntar!
Você gostou da dica? Tem outras dúvidas ou sugestões? Comenta aqui embaixo! ;)
Veja também a nossa dica sobre cor e contraste na web!
