Act 3: Different file types

Png jpg gif bmp tif. What do they really mean? Today, we'll learn about some of the most common image filetypes and explore their advantages and disadvantages.

Hmmm, so, when we're talking of pictures, what's usually important(besides looking good in them, of course)? We want quality photos at small file sizes, right?

First, let's talk about quality. The first computers didn't have any colors. People were happy creating images out of blue and white pixels, which were represented as 1 or 0. They're called binary or black and white images. The state of each pixel or block is stored in one bit, so the expected file size is just equal to the area of the image.

Figure 1. Sample of a black and white image
(screenshot of a .bmp, 18x21 pixels, 188 bytes, bitmap image)

Our common conception of black and white images is actually more properly called as grayscale image. It actually makes sense, since one uses shades of gray, not just black and white. For grayscale images, we don't simply have 0 and 1, we have shades of gray, starting from black at 0 and white at 255 - 256 (or 8bits) shades of gray! The expected file size is 8bits * area of image.

Figure 2. Grayscale image
(.png, 1116x1821, 1.08MB, grayscale)

In the histogram, we can see which shades dominate the picture. One can set a threshold, say 200, and convert all shades of gray darker than that to black and all shades lighter than that to white to end up with a corresponding black and white image, as in figure 4.

Figure 3. Histogram of a grayscale image(shown in figure 2)

Figure 4. Bitmap image of figure 2. Converted by setting a threshold in the histogram in figure 3.
(.bmp, 1116x1821, 245kB, bitmap)

It's time to add some more color in our lives! What if we don't need 256 shades of gray? What if we just need a few colors to paint super mario? We can make an indexed image. It basically has a list of colors vs a reference number. The number of colors determines how many bits are needed to store the state of each pixel. Thus, the expected file size is slightly larger than log_2 (#colors) * area.

Figure 5. Indexed image of super mario
(edited from www.onlinesupermario.com)
(.gif, 12.1KB, 544x594 pixels, indexed - 8 colors)

But what if we want the whole thing? Capitalizing from the fact that human eyes are receptive to red, green, and blue, truecolor images store 256 shades each of red, green, and blue. These are then combined to form the final image. The expected file size is then 3 color layers * 8 bits * area.

Figure 5. Truecolor image of super mario
(from www.onlinesupermario.com)
(.png, 12.1KB, 544x594 pixels, 238KB)

Figure 6. Truecolor image, basis of figure 2

Now that we know about different qualities of pictures, let's talk about how they make them smaller. One way to decrease the file size is by changing image types. All of those RGB channels will be repetitive data if you're picture is just black and white. Or, like supermario, you can simply reduce the number of colors! The file size of the indexed image is just 5% of the original image.

The other way to decrease file size is by selecting a lossy(in contrast to lossless) file type. This file setting will "lose" some of your data, essentially freeing up the space, but approximating what was in the "lost" pixels by looking at the surrounding colors.


jpg or jpeg (Joint Photographic Experts Group)
Arguably the most common file type in the internet. That's because it takes the middle ground. It is able to compress pictures without losing a lot of detail. However, it blurs adjacent pixels, so it isn't good for text and sharp images. I think that this blog automatically converts images to jpg, that's why figure 1 is simply a screenshot and not the original image. The original image shows up as figure 7 when converted to jpg.

Figure 7. Jpg equivalent of figure 1.

png (Portable Network Graphics)
This file type can also compress data, however it also has a lossless setting.

gif (Graphics Interchange Format)
This file type is indexed. It is great for computer generated drawings and text.

Figure 8. Smiley
(.gif, 200x200 pixels, indexed -4 colors)

My favorite filetype is any sort of vector image. :) Instead of storing the value of each and every pixel, the elements are saved in mathematical form, thus the sharpness does not decrease even if it is magnified a trillion times.

Additionally, closely related to taking the histogram is a process of transformation called leveling and curving. In leveling, you basically redefine the black, middle gray, and white colors. In this example, instead of having only 0 as black, all values below 76 are redefined to be black. Values from 187-255 are all as white as each other. Middle gray can be adjusted and takes on a linear relationship(thus, called leveling). Pushing middle gray close to black makes the figure brighter; putting it near white makes your image darker.

Figure 9. Using the level tool on figure 2

Curving, on the other hand, is the same process, except the relationship between old colors and new colors isn't linear. It's curved (how surprising)! The number of curvatures starts of at zero, but can be added upon by the user.

Figure 10. Using the curve tool on figure 2

The peak at x = 34, y = 252 transforms the previously dark grays (34 and surrounding numbers) to whites(252 and surrounding numbers). The dip at x2 = 108, y2 = 16 transforms the middle grays(108) to darks(16). The previously darker 34 is now brighter - this can be clearly seen in the eyes, as the pupil turned white.

Scilab and GIMP were used for this activity.