A coder and her camera 📸

After I bought my tickets to Japan, I decided to invest in a camera to capture all the Instagram-worthy moments there. Which camera though, was the ultimate question — point-and-shoot, DSLR, mirrorless? Canon, Sony, Fujifilm? After days of research, I committed to the Olympus mirrorless, interchangeable lenses camera two days before and took off. I was going to be traveling for two weeks with a camera I barely knew how to use. Because you know, I live for the thrill of the moment.

Since then, I’ve learned terminology like bokeh, depth-of-field, and the Rule of Thirds, but I had absolutely zero knowledge about how a camera stored its photos. So, how exactly does a digital camera store the photos you take?

When you snap a photo, the light hits an image sensor chip, composed of millions of photo sensors, and stores an electrical charge in each of them. The energy in each sensor is converted into a voltage that represents the luminescence of a pixel. These pixels collectively create a Bitmap image, where each pixel is stored as a number in bits.

This is a black-and-white image broken down into a grid of pixels:

A 10x10 image. Each pixel stores a binary number, 0 or 1. 1 is black, 0 is white

For those unfamiliar, a computer uses the binary number system —0 or 1 — to store data. You’ll notice that each pixel above holds 1-bit, or binary digit, with two possibilities— 0 or 1. That means we can only store 2 colors in an image. How do we store more than 2 for colored images? Easy. We can just add more bits to a pixel! If each pixel holds 2-bits, the possible combinations are 00, 10, 01, 11 — that’s four possible colors. Most computers work with 8-bits of data, so 2⁸ would render 256 possible colors to store. If you’re a web developer or familiar with HTML, you will know that colors can be specified using RGB values, and the range of values for red, green and blue colors are 0–255, because there are 256 possible combinations when using 8-bits.

So if each pixel stores 8-bits of data, and we have a 10x10 image, then that image is 800 bits. The larger the image or the more bits we use, the more memory required for storage. Is there a more efficient method to represent colors using binary?

Yes, there is! The Huffman Code is an algorithm that compresses data such that there is no loss of information when decoding. The concept is to assign less bits to frequently-used values and more bits to least-used values. That will reduce the number of total bits required for storage. The first step to this algorithm is to build a Huffman Tree, then traverse it to assign codes to values.

To build a Huffman Tree, you look at the two least frequently used values, and create a parent node that is the sum of the frequencies of the two values. Continue doing this until you are only left with two values. I recommend watching this video for an in-depth tutorial of building Huffman Trees.

After building the tree, you will assign a 0 if you traverse left of the node, and a 1 if right. Once you reach the value you’re looking for, your code is a combination of 0’s and 1’s. You’ll notice that it’ll take a shorter path to traverse the tree for a value more frequently used, which generates a code with less bits.

A simple Huffman Tree: assign 0 if you traverse left, 1 if traverse right

If I have a 10x10 image, the number of bits per pixel isn’t necessarily 8 to represent 256 colors — it varies based on frequency thanks to the Huffman Code. That is how we are able to efficiently store images in our memory cards and our computers.

For funsies: Here are a few photos that I took in Japan —