bpp

What is bpp?

Bpp is an abbreviation for bits per pixel, it's an unit of measurement for how many bits are necessary to encode the data of one pixel of a computer image. Typical values for uncompressed image data include 1bpp, 8bpp, 24bpp, and 32bpp. Compressed image data can have rational numbers for values, e.g. 3.4bpp, by calculating the average bpp from the total number of bytes in the image divided by the total number of pixels in the image.

1bpp

An 1bpp image is an image that has 1 bit per pixel. Normally, this means a black and white image, where each pixel is either fully black or fully white. The image data is literally just 0's and 1's, with 0 for black pixels and 1 for white pixels (or vice-versa). It's technically possible for the colors to be something besides black and white, such as white and blue, or transparent and black.

8bpp

A 8bpp image can be either a monochrome image or an image with a 256 color pallette.

Like 1bpp, the monochrome 8bpp image doesn't need to be black and white (grayscale). It could be a gradient from black to red, or white to blue, or transparent to white, etc.

We can represent a number from 0 to 255 using 8 bits (1 byte), so in this case each pixel of the image could be thought of a number from 0 to 255. Number 0 is black, number 255 is white, and numbers 127 and 128 are almost exactly the "50% gray" between black and white, for example.

By the way, if we have a color value for 0 and a color value for 255, the process of calculating the corresponde value in the middle of these two is called interpolation. If 0 is red and 255 is black, we would need to interpolate between red and black to find the dark-red colors between these two color values.

This could be done with some basic multiplication and division, but for a small number of discrete values likes 8-bit unsigned integers, we can also use a look up table.

Essentially, this would be like having a list in the computer that says: 0 is black, 1 is black with 2% white, 2 is black with 4% white, 3 is black with 6% white, until 255 is 100% white. It's still called a table, though, because it could have more information than that.

With a look up table we can implement a palette. This is what the GIF image format uses, for example. PNG also supports this, but you rarely see an 8bpp PNG image out there.

With a palette, there would be a look up table that says which colors the numbers are supposed to represent. So 0 could be black, 1 could be white, 2 could be red, 3 could be blue, and so on. This could be entirely random, so it's different from merely interpolating two values. In this case, we can also say the number is the index of the color in the palette, and say we're using indexed colors.

On old computers, the entire screen was limited to a handful of colors. It's probably why terms like "high color," "true color," and "deep color" existed to market screens, despite none of them making any sense if you think about it. Let's say a computer could only have 16 colors in total on the screen, and color 1 was always white. Any image that used 1 for pixel data would display a white color.

Although this sounds weird now, it's how old video-game consoles, like the Nintendo and Super Nintendo, worked in their eras.

Many of these games had sprites that had transparent pixels, how would you handle transparency? Just make one index mean transparent. So if you use a the 16th color in a computer that only had 16 colors, or the 256th color in a computer that handle 256 colors, it would be transparent.

Nowadays computers can render than 256 colors, so this concept is mainly limited to the GIF format. In GIF, the pixel data is 8bpp and uses the system above, but each GIF file also comes with its own palette, so the values of the pixels don't refer to some palette available in the entire computer, but to the palette available in the file.

24bpp

A 24bpp image is typically a RGB image with 8 bits per color channel, that is, 1 byte for red, 1 byte for green, and 1 byte for blue. Three bytes in total, or 24 bits.

This color format generally doesn't support transparency. Before semi-transparent images became the norm, some programs had a special rendering algorithm that made a specific color, called "magic pink," get rendered as transparent. This means if you made a 24bpp BMP file, and it had pixels with the color #FF00FF, these pixels would be transparent.

32bpp

A 32bpp image is typically a RGBA image, which is a RGB image with an additional 8-bit channel called alpha. The alpha value of a pixel typically refers to how opaque a pixel is (0 for fully transparent, 255 for fully opaque).

When a semi-transparent image is rendered over another image, the resulting color of the pixels is calculated using an interpolating equation based on the alpha value. It's just like the idea of having a gradient, but per pixel, and which position in the gradient we are is determined by the alpha value.