Qual é a relação entre bytes e pixels?

Um pixel é um único ponto na tela (ou display). Normalmente você pode vê-lo ao usar uma lupa.
A maioria das telas coloridas tem pixels que são divididos em subpixels vermelhos, verdes e azuis distintos. A quantidade de luz monocromática destes soma-se à cor geral do pixel (o olho faz a adição). Veja Pixel - Wikipedia.

No entanto também há telas pretas e brancas puras ou telas monocromáticas.

A cor pode ser representada por números.

Então uma tela preta e branca pura (que é exatamente apenas duas cores) precisa de apenas um bit por pixel. Então você pode usar um byte para controlar oito pixels.

Para um display monocromático você precisa de um número para cada pixel.
Aqui temos que adicionar outro aspecto: resolução de cor.
A gama de números que você usa para uma única cor determina o detalhe do controle da quantidade de luz monocromática.
E.g. com um byte você teria 256 passos de brilho para esta cor.

Um display colorido completo (vamos assumir que o RGB usual = vermelho/verde/azul pixels) tem três subpixels, então três cores que são controladas por três números que somam a cor do pixel.

No caso de um byte por subpixel, você teria 256x256x256 cores (então cerca de 16 milhões de cores) para um display usual. Havia e há outras combinações. Por exemplo, algumas telas antigas tinham um byte por pixel com 2 bits para vermelho, 3 bits para verde e 2 bits para azul (verde é o mais importante para os nossos olhos, é por isso que há frequentemente 2 subpixels verdes, enquanto vermelho e azul têm um subpixel). Por outro lado você tem telas com resolução de 12 bits por cor subpixel, então 36 bits para um pixel.

Embora a resolução usada para controlar as cores, a tela pode ter uma resolução de cor real diferente. É possível que a tela não seja capaz de distinguir fisicamente duas cores diferentes.

Um outro aspecto é a composição de imagens (por exemplo, janelas na tela).
Você usa um quarto número para controlar a transparência (opacidade) de uma cor. Então quando duas imagens são sobrepostas, a imagem inferior brilha através da imagem superior, dependendo de quão transparente é a imagem superior. É um fator e é chamado de "valor alfa". Quando compondo imagens o resultado tem uma resolução de cor superior à de cada imagem em si, dependendo da contagem de imagens sobrepostas. Mas o caso usual é apenas uma imagem, então os valores compostos são normalmente escalados para a mesma faixa de cores.

Como exemplo, o HTML normalmente usa uma notação com um byte para cada parte, então quatro bytes, representados por 8 dígitos hexadecimais: #11223344, ou outra notação, por exemplo: rgba(255,255,255,255,255), que pode representar resoluções de cores mais altas.