Digital photos have the capability to represent 281 trillion colors. The most common color system used for computers can represent over sixteen million different colors, which is still six million more than the human eye can even see. You have never taken a picture of something that could not be reproduced digitally; all of the necessary colors can be created through binary code. Digital images are just combinations of 0s and 1s, a fact that has always made me realize how little I know about the device I use daily.
You might be wondering, how can so many colors be represented? For starters, images are made up of pixels, short for picture elements. Pixels are the extremely small boxes that make up your device’s screen. They are the smallest indivisible part of a digital image and are always entirely one color. All digital colors are a combination of three colors: red, blue, and green. To achieve a wide variety of different shades and colors, each of these primary colors is on a scale of 0-256. In every individual pixel, each of these colors is represented by something called a byte. Bytes are made up of bits, or individual 0s and 1s used in binary coding. Each byte contains a varying number of bits, but most commonly there are eight. This common system is known as 8-bit color graphics. The bits in a byte create a combination of numbers, which correlate to a number from 0-256. The shade for each color is combined, making the final color for that pixel. This same process is used to determine the color of every pixel on your screen. To loop back to the 16 million colors that I mentioned earlier, what is 256 x 256 x 256? 16,777,216.
Got all that? Let’s recap the main points.
– A bit is a singular 0 or a 1 in a line of binary code.
– Eight bits make up a byte (hence “8-bit”).
– Three bytes are used to make up a singular pixel.
– Each byte represents one of the three colors: red, blue, and green.
– Red, blue, and green are each on a scale of 0-256.
To put it simply – Images are made up of pixels. In each pixel, there are three bytes, one for each color (red, blue, green). These bytes contain bits (0s and 1s) which combine to make a shade of each color on a scale of 0-256. The combination of these three colors creates the intended final color for that pixel.
For my friends who learn through examples, picture an image that is 250px wide and 350px tall. In this image, there are…
– 87,500 pixels (250px x 350px)
– 262,500 bytes (87,500 pixels x 3 bytes)
– 2,100,000 bits (262,500 bytes x 8 bits)
The color of a pixel in this image could look something like this…
– Red = 45
– Blue = 220
– Green = 125
Or this…
– Red = 0
– Blue = 25
– Green = 240
The number of colors available depends on the number of bits per pixel (BPP). More bits per pixel means exponentially more colors available. Since humans can only see 10 million colors, there is generally no need to use anything higher than 24 BPP. To be clear, 24 BPP is the same thing as 8-bit (8 bits x 3 bytes = 24 BPP). At this point, I was wondering why we wouldn’t always use 48 BPP. It’s better image quality, right? Well, sort of. If each pixel contained 48 bits, images would take an extremely long time to load and would take up significantly more storage space on your devices. There is a tradeoff between image quality and storage/loading time. Since the human eye can’t even detect most of these colors, using 48 BPP would waste space and provide nearly no additional benefit. Below is a table showing the relationship between BPP and the number of colors that can be depicted digitally.
BPP vs. # of colors
– 1 = 2 (Monochrome)
– 2 = 4 (CGA)
– 4 = 16 (EGA)
– 8 = 256 (VGA)
– 16 = 65,532 (XGA, High Color)
– 24 = 16,777,216 (SVGA, True Color)
– 32 = 16,777,216 + transparency
– 48 = 281 trillion
There are two ways an image can be represented on a computer: they are either “bitmap” or “vector” images.
Of the two types, bitmaps are easier to understand. A bitmap is exactly what it sounds like… a map of bits built pixel-by-pixel. Think of bitmaps as a grid, with specified colors designated for each pixel in the grid. For bitmap images, one pixel is assigned and saved for each little part of the image. The issue with bitmap images is that if they are enlarged, the resolution decreases. This happens because you are enlarging the individual pixels, which were generated to look good from a certain distance.
Vector images provide instructions for how to create an image. Instead of saving pixel colors and locations, vector images provide coordinates, line color, line thickness, fill color, and other information for each element so the image can be recreated. It is best described as a relative series of equations and specifications for how to recreate an image. Each component of the image has instructions for where it should be and how it should look. Since each component has its own set of instructions, they can each be changed individually without interrupting the remainder of the photo. Vector images are extremely useful for images that will need to be different sizes (from smartphone to billboard) because you aren’t just expanding pixels, you are recreating it at a larger scale.
Sources:
1. Stanford University. “Bits and Bytes.” [Online]. Available: [https://web.stanford.edu/class/cs101/bits-bytes.html](https://web.stanford.edu/class/cs101/bits-bytes.html).
2. Indiana University Knowledge Base. “Bits, bytes, and their multiples.” [Online]. Available: [https://kb.iu.edu/d/afmr](https://kb.iu.edu/d/afmr).
3. EasyTechJunkie. “What is a Bitmap Image?” [Online]. Available: [https://www.easytechjunkie.com/what-is-a-bitmap-image.htm](https://www.easytechjunkie.com/what-is-a-bitmap-image.htm).
4. Datavideo. “What are 8-bit, 10-bit, 12-bit, 4:4:4, 4:2:2, and 4:2:0?” [Online]. Available: [https://www.datavideo.com/us/article/412/what-are-8-bit-10-bit-12-bit-4-4-4-4-2-2-and-4-2-0](https://www.datavideo.com/us/article/412/what-are-8-bit-10-bit-12-bit-4-4-4-4-2-2-and-4-2-0).
5. American Chemical Society. “The Three Primary Colors and All the Rest.” [Online]. Available: [https://pubs.acs.org/doi/pdf/10.1021/ed075p312A#:~:text=Combinations%20of%20red%2C%20blue%2C%20and,all%20of%20the%20other%20colors](https://pubs.acs.org/doi/pdf/10.1021/ed075p312A#:~:text=Combinations%20of%20red%2C%20blue%2C%20and,all%20of%20the%20other%20colors).
6. OpenAI. “GPT-3: Language Models for Text Generation.” Available at: [https://chat.openai.com]