Como o CSS se comporta a nivel de Pixels
Neste artigo gostaria de compartilhar um pouco sobre meus estudos e o que aprendi a respeito de pixels, pixel ratio, como o CSS aplica a estilização a nível de pixels e a importância desse conhecimento para um desenvolvedor front-end.
Trabalho em progresso ..
O que é um Pixel?
Pixel é o menor elemento em uma tela sendo capaz de produzir um pouco mais 16,7 milhões de combinações de cores, porém uma tela não é composta de um único pixel ela possui milhões deles e a forma pela qual utilizamos para dimensionar a qualidade de uma tela é através do PPI (Pixels Per Inch) em tradução é o equivalente á Pixels Por Polegada.
Polegadas
Polegadas foi criada por Eduardo I, no século XVI (16) devido o uso do próprio polegar como meio de medição e o seu tamanho de 2,54 centímetros se refere ao comprimento do polegar de um adulto médio da base até a ponta da unha.
Em dispositivos eletrônicos polegadas é um parâmetro que geralmente utilizamos para dimensionar o tamanho de telas como celulares e TVs, é muito comum as pessoas ter como principal requisito para comprar uma TV nova a quantidade de polegadas, quanto maior, melhor a resolução, certo? veremos mais a frente que não.
Mas como polegadas se aplica a TVs?
Afim de exemplo, imagine que cada quadrado azul representa uma polegada em uma TV, como na imagem abaixo.
Pixels Per Inch
PPI representa a quantidade de Pixels contidas em uma polegada, quanto menor for a quantidade de pixel menor será a resolução da imagem e o caso inverso também se aplica, quanto mais pixel por polegada melhor será a resolução.
Utilizando o exemplo anterior, a imagem abaixo representa os pixels em amarelo separados por polegada.
Com esse exemplo fica evidente que quanto mais pixels melhor será a qualidade da imagem dado que o nível de detalhes aumenta, então as polegadas não reflete diretamente na qualidade da imagem, concluindo que comprar uma tela de 50 polegadas não significa alta resolução o que ira determinar será o PPI, polegadas é apenas uma unidade de medida.
Imagem exemplificando a qualidade de acordo com o aumento de pixels
Tamanho de um pixel
Um pixel não possui um tamanho fixo e universal o seu tamanho vai depender da quantidade de pixel por polegadas e do tamanho fisico da tela.
Para fins práticos vamos usar como exemplo uma Smart TV de 32 polegadas com uma resolução de 1280x720. Podemos obter a quantidade de Pixel por polegada (PPI) em nossa TV realizando alguns cálculos.
128O² + 72O² = 2156800 pixels (2,156,800 milhões de pixels no total)
As polegadas em telas de dispositivos é obtida na diagonal devido ao formato retangular e para isso precisamos obter a raiz quadrada do valor de pixels, sendo ele 1468.60:
1468.60 / 32 = 45.89 pixels
Chegamos ao valor de 45.89 pixels dentro de uma polegada em uma TV de 32 polegadas com uma resolução de 1280x720.
Mas ainda não sabemos o tamanho de cada pixel e para chegar a esse valor fazemos:
1 / 45.89 = 0.0218 polegadas
Transformamos em milímetros: 0.0218 x 25.4 = 0.55372 mm
Então o tamanho de um pixel em mm é: 0.55372 mm
Uma maneira bem simples de saber quantos pixels por polegada o seu monitor atual tem é acessando o site DPI Love.
Medição de Polegadas
Está seção é apenas para fins de conhecimento, se não deseja saber como calcular polegadas pode pular para a próxima seção.
Até aqui aprendemos de onde se originou a medição por polegada e como obter a quantidade de pixels por polegadas em uma TV mas a medição por polegada não segue o valor real de 2,54cm ele é uma base que é calculada com base no tamanho físico da tela, tudo parte daí..
Bom aqui você vai precisar lembrar do teorema de Pitágoras que você provavelmente aprendeu no ensino médio, pois é, lembra quando você perguntou pra professora onde usuária isso na sua vida ? o momento chegou (risos).
Mas dessa vez vai ser bem simples, faça a medição da altura e largura da tela, eleve ambos ao quadrado e some o resultado obtido, em seguida, faça a raiz quadrada do valor e você terá encontrado a diagonal, para finalizar basta dividir o resultado por 2.54 e por fim a quantidade de polegadas, vale lembrar que a medição deve ser feito na área útil da tela, apenas aquilo que forma as imagens.
E claro que calcular a polegada não é algo necessário no dia a dia, boa parte dos aparelhos já vem descrito esse valor mas é muito importante entender a parti de quais meios é possível chegar nesse valor e sua importância.
Em resumo nas telas dos dispositivos é realizado esse ultimo calculo para chegarmos a quantidade de polegadas de uma tela, ele não segue o valor real mas leva em consideração a largura e altura física da tela.
Por que isso é importante?
Bom sabemos que existem uma variedade enorme de aparelhos nas mãos dos usuários, em diferentes tamanhos e resoluções e entender o básico de pixels ira te ajudar e muito a entender pequenos problemas que podem surgir.
Para exemplificar melhor, temos abaixo dois Macbook’s, um Air e Pro respectivamente, ambos com o mesmo tamanho de tela porém com a quantidade de pixels diferentes.
Macbook Air 13,3: 1440x900 px
Macbook pro 13,3: 2560x1600 px
Quando desenvolvemos um site e criamos uma div com 200x200 px’s, estamos dizendo claramente que aquela div deve ocupar 200 pixels da tela.
No caso dos Macbook’s essa div deveria ter o mesmo tamanho em ambas as telas levando em consideração que são exatamente do mesmo tamanho, 13,3 polegadas, correto? não!
Repare que é muito evidente a diferença entre eles, como o Air possui menos pixels nossa div fica maior, já o Pro como possui muitos pixels comprimidos nossa div fica menor, como mostrado na imagem:
Esquerda (Air) | Direita (Pro)
Você ja tentou mudar a resolução do seu computador nas configurações? reparou que as coisas ficaram muito grandes ou muito pequenas ?, ou até mesmo conectou seu computador em uma Tv de 50 polegadas e tudo ficou minúsculo?. Isso acontece devido a quantidade de pixels por polegadas em diferentes dispositivos é o efeito do que aprendemos até aqui.
Viewport
A área real da tela é chamada de viewport, não incluindo menus do sistema operacional, abas e configurações do browser é apenas a área em que o site é exibido, essa é a viewport.
Celulares e computadores possuem a viewport de tamanhos diferentes e cada uma delas possuem tamanhos distintos, alguns smartphones possui uma viewport de 360x640 pixels CSS.
Nós desenvolvedores utilizamos o CSS para posicionamento e estilização de elementos dentro da viewport, já sabemos que uma tela possui milhões de pixels físicos porém esses pixels são diferentes de pixels (px) do CSS e esse conceito chamamos de DPR.
Fica a dica para dois sites:
- Visualizar a viewport do seu dispositivo: https://whatismyviewport.com
- Consultar viewport de outros dispositivos: https://viewportsizes.com
Device Pixel Ratio
DPR (device pixel ratio) que em português significa Proporção de pixels do dispositivo, é uma relação entre pixels fisico da tela e pixels de CSS, em alguns casos chamados de pixels físicos e pixels lógicos. Em termos mais simples, isso informa ao navegador quantos pixels reais da tela devem ser usados para desenhar um único pixel CSS.
Cada dispositivo possui um DPR diferente, aparelhos com altas resoluções de imagem tende a ter um DPR muito superior resultando em imagens incríveis e você como desenvolvedor precisa saber qual é o DPR de cada dispositivo que esta sendo executado a sua pagina, até por que não faria muito sentido tentar renderizar uma imagem com alto nível de detalhes em uma tela com DPR baixo, neste caso o multiplicador tiraria uma média reduzindo a qualidade da imagem gerando gasto desnecessário com processamento para obter a imagem e renderiza-la, por vezes gerando imagens borradas, como na imagem abaixo:
O DPR é calculado dividindo a resolução real da tela pelos pixels CSS da Viewport, utilizando o site What is My View Port é possível identificar a viewport atual e consultando os detalhes do seu dispositivo obter a resolução real, sendo assim afim de exemplo temos um monitor com a viewport (1732x891) e resolução real (1920 x 1080) e dividindo 1920 / 1732 temos 1,10, ou seja, nosso DPR esta na faixa de 1.
Como dito acima um pixel CSS é diferente de um pixel na tela, existem dispositivos que utilizam 2x2 pixels físicos para um pixel CSS, 3x3, 4x4 e o limite atualmente é 5x5. Abaixo temos uma imagem para exemplificar esse conceito.
Repare que um pixel CSS (azul) quando possui um DPR 1 ocupa exatamente um pixel físico (vermelho) da tela e o número de pixels físicos “dentro” de um pixel CSS aumenta em conjunto com o DPR.
Assim podemos concluir que um pixel CSS não é a mesma coisa que um pixel físico e a quantidades de pixels em diferentes telas afeta diretamente como as coisas se comportam, conhecer como cada aspecto daquilo que criamos mais afundo torna nosso trabalho cada vez mais refinado, é claro que projetar todos os softwares olhando para o DPR não é necessário, alguns nem precisam desse nível de detalhes.
Mas eu tenho certeza que a partir de hoje você nunca mais verá o CSS como antes e quando olhar para uma tela, terá uma perspectiva diferente.
Espero que esse artigo seja de extrema utilidade para você e como eternos aprendizes, caso identifique algum erro por favor, escreva um comentário e com certeza iremos aprender mais.
Grande abraço.
Minhas redes: https://linktr.ee/marcelxsilva
