Pixels

A menor unidade de uma imagem ou tela digital, que guarda cor e brilho.

Hard

O que é

Pixel, abreviação de picture element, é o menor ponto endereçável de uma tela ou imagem. Cada um deles guarda uma cor e um brilho, e é a soma de milhões desses pontos que forma a imagem inteira, então sozinho, um pixel é imperceptível na distância normal de uso.

Resolução, nesse contexto, é simplesmente a contagem de pixels, já que uma tela de 1920×1080, por exemplo, tem cerca de 2 milhões deles. Mais resolução significa mais detalhe, mas também mais processamento e arquivos maiores, enquanto a densidade, medida em PPI, ou pixels por polegada, explica por que duas telas de mesma resolução podem parecer diferentes, porque a tela menor, com a mesma contagem, acaba parecendo mais nítida.

Pra quem desenha, entender pixel e densidade é o que garante que o asset fique nítido em cada aparelho. E quando a escalabilidade é o que mais importa, o vetor resolve melhor, justamente porque ele não depende de uma contagem fixa de pixel.

Em uma frase

Exporta esse ícone em vetor pra ele ficar nítido em qualquer densidade de tela.

A pergunta que ele responde

Por que meu ícone fica nítido numa tela e borrado em outra de densidade diferente?

Quando usar

Faz sentido ao pensar em resolução, densidade e nitidez de asset em telas diferentes.

Como não usar

O que atrapalha é exportar tudo em raster de tamanho fixo nos casos em que o vetor resolveria melhor, ignorando a densidade dos aparelhos onde aquilo vai aparecer.

Na prática

Pense num time que exporta o ícone em vetor em vez de num PNG de tamanho fixo. Com isso, o mesmo ícone fica nítido tanto numa tela comum quanto numa de alta densidade, sem precisar de várias versões.

Não confunda com

Vale separar pixel de resolução, porque o pixel é a unidade em si, enquanto a resolução é a quantidade de pixels que cabe na tela. E também ajuda diferenciar pixel de vetor, porque o pixel é fixo, ao passo que o vetor escala sem perder nitidez.

D

Em inglês

Pixels

Pronúncia

píc-séis

Também chamado de

pixel, px

Origem

n/a

Fonte

Saiba mais

Smashing Magazine, artigo sobre densidade de pixel e telas retina