Compreenda como píxeis, canais de cor, profundidade e transparência se combinam para formar uma imagem apresentada no ecrã.
Uma fotografia no ecrã parece contínua, mas uma imagem raster contém sobretudo uma grelha de valores numéricos que o navegador ou software transforma em cores visíveis.
Compreender esta estrutura explica porque uma imagem fica desfocada quando é ampliada, porque PNG pode manter transparência, porque duas imagens com as mesmas dimensões podem ter tamanhos diferentes e porque mudar .jpg para .png não converte realmente um ficheiro.
Uma imagem de 1.200 × 800 contém 960.000 píxeis; uma de 4.000 × 3.000 contém 12 milhões. Mais píxeis significam mais amostras, não automaticamente melhor qualidade: ótica, focagem, ruído, compressão e tamanho de apresentação também contam.
Pixel vem de picture element. No ficheiro não é um pequeno quadrado físico, mas uma amostra numa posição da grelha com um ou mais valores associados.
Ao ampliar uma fotografia para 800%, o software apenas atribui uma área visual maior a cada amostra. Um píxel não tem, portanto, um tamanho físico universal.
O mesmo ficheiro com 1.200 píxeis pode ser mostrado em 300 píxeis CSS, 600 píxeis CSS ou impresso em tamanhos físicos diferentes.
Na Web, o modelo mais comum é RGB:
Com 8 bits por canal, cada componente possui 256 valores de 0 a 255. Três canais permitem:
256 × 256 × 256 = 16.777.216 combinações.
0,0,0 dá preto; 255,255,255 branco; 255,0,0 vermelho.
Uma fotografia RGB pode ser vista como três imagens de intensidade, uma para vermelho, verde e azul. Muitos tratamentos - correção de cor, balanço de brancos, filtros e extração de paletas - trabalham sobre os canais antes de recompor o resultado.
Depois de JPEG, PNG ou WebP serem descodificados, o navegador trabalha sobre píxeis numa representação comum.
8 bits por canal significam 2⁸ = 256 níveis; 16 bits significam 2¹⁶ = 65.536. Uma profundidade maior preserva mais valores intermédios e reduz o risco de banding em correções fortes, mas aumenta os dados processados.
Não confunda profundidade, espaço de cor e formato de ficheiro: são propriedades diferentes.
RGBA adiciona um quarto canal, alfa. Em 8 bits:
Transparente não significa branco. Um logótipo transparente deixa aparecer o fundo; substituir a transparência por branco cria um retângulo visível sobre fundos escuros.
JPEG clássico não suporta alfa; PNG, WebP e AVIF podem suportá-lo.
Um píxel pode ter RGB vermelho e alfa 0: é invisível, mas a cor subjacente continua armazenada. Durante redimensionamento e interpolação, uma gestão incorreta desses valores pode criar halos em torno dos recortes.
Na Web, a propriedade mais concreta é normalmente a dimensão em píxeis: 800×600, 1920×1080 etc. A densidade do ecrã descreve quantos píxeis físicos existem numa determinada superfície.
Um ficheiro 2000×1000 continua 2000×1000 mesmo que uma metainformação diga 72 ou 300 DPI. Na Web contam sobretudo dimensões intrínsecas, CSS e densidade do ecrã.
Se uma origem 400×300 for mostrada a 1600×1200, o software precisa de criar valores intermédios por interpolação. Diferentes algoritmos podem privilegiar nitidez ou suavidade, mas não conseguem recuperar com certeza detalhes inexistentes na fonte.
JPEG, PNG, WebP e AVIF definem como dados e metadados são organizados e comprimidos. Depois da descodificação, a aplicação obtém píxeis e canais para trabalhar.
Por isso mudar apenas a extensão não converte o conteúdo: é necessária descodificação e nova codificação.
Para aprofundar consulte Resolução de imagem, formatos de imagem Web e compressão de imagem.
Coleção
1 / 14
Distinga dimensões, densidade de píxeis e DPI para redimensionar uma imagem para Web ou impressão sem perder nitidez.
Compreenda como RGB, HEX e HSL descrevem cores sRGB para escolher uma notação CSS legível e converter valores sem confusão.
Escolha o formato adequado para fotografia, captura, transparência ou interface sem sacrificar desnecessariamente qualidade e desempenho.