Qual è la relazione tra byte e pixel?

Un pixel è un singolo punto sullo schermo (o display). Di solito puoi vederlo quando usi una lente d'ingrandimento.
La maggior parte degli schermi a colori hanno pixel che sono divisi in subpixel distinti rossi, verdi e blu. La quantità di luce monocromatica di questi si somma al colore complessivo del pixel (l'occhio fa l'addizione). Vedi Pixel - Wikipedia.

Tuttavia ci sono anche schermi in bianco e nero puro o display monocromatici.

Il colore può essere rappresentato da numeri.

Quindi un display in bianco e nero puro (cioè solo esattamente due colori) ha bisogno di un solo bit per pixel. Quindi puoi usare un byte per controllare otto pixel.

Per un display monocromatico hai bisogno di un numero per ogni pixel.
Qui dobbiamo aggiungere un altro aspetto: la risoluzione del colore.
La gamma di numeri che usi per un singolo colore determina il dettaglio del controllo della quantità di luce monocromatica.
E.g. con un byte avresti 256 passi di luminosità per questo colore.

Un display a colori (assumiamo il solito RGB = pixel rosso/verde/blu) ha tre subpixel, quindi tre colori che sono controllati da tre numeri che si sommano al colore del pixel.

Nel caso di un byte per subpixel, si otterrebbero 256x256x256 colori (quindi circa 16 milioni di colori) per un display normale. C'erano e ci sono altre combinazioni. Per esempio, alcuni vecchi display avevano un byte per pixel con 2 bit per il rosso, 3 bit per il verde e 2 bit per il blu (il verde è più importante per i nostri occhi, ecco perché ci sono spesso 2 subpixel verdi, mentre il rosso e il blu hanno un subpixel). D'altra parte ci sono schermi con una risoluzione di 12 bit per subpixel di colore, quindi 36 bit per un pixel.

Nonostante la risoluzione che usi per controllare i colori, lo schermo può avere una risoluzione reale del colore diversa. È infatti possibile che lo schermo non sia in grado di distinguere fisicamente due colori diversi.

Un altro aspetto è la composizione di immagini (ad esempio finestre sullo schermo).
Si usa un quarto numero per controllare la trasparenza (opacità) di un colore. Così, quando due immagini sono sovrapposte, l'immagine inferiore brilla attraverso l'immagine superiore, dipende da quanto è trasparente l'immagine superiore. È un fattore e si chiama "valore alfa". Quando si compongono le immagini, il risultato ha una risoluzione di colore più alta di ogni immagine stessa, a seconda del numero di immagini sovrapposte. Ma il solito caso è una sola immagine, quindi i valori composti sono di solito scalati alla stessa gamma di colori.

Come esempio, HTML di solito usa una notazione con un byte per ogni parte, quindi quattro byte, rappresentati da 8 cifre esadecimali: #11223344, o un'altra notazione, per esempio: rgba(255,255,255,255), che può rappresentare risoluzioni di colore più alte.