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.

Activity 2: Scilab basics

We tried out Scilab today. It's a scientific, high level, OPEN SOURCE programming language. It wouldn't install in my cluttered 32 bit vista laptop *not enough memory boohoo*, so ma'am Jing kindly lent me one of her old laptops. Hopefully, I can reformat to Ubuntu within the week.

This semester, we're using Scilab 5.3.3(downloadable at their home page) along with the SIVP module. If you are able to successfully install scilab, go to C:\Program Files\scilab-5.3.3\contrib and extract the SIVP .rar file. It's also possible that it's in Program Files (x86).

Run scilab and click on Toolboxes > SIVP_0.5.3 in the menu bar. If you set it up correctly, you should see:

 Start SIVP - Scilab Image and Video Processing Toolbox
Load macros
Load gateways
Load help
Load demos
-->

Let's get to the code!

Activity 1: Quantification of a picture

Grown-ups like numbers. When you tell them about a new friend, they never ask questions about what really matters. They never ask: “What does his voice sound like?” “What games does he like best?” “Does he collect butterflies?” They ask: “How old is he?” “How many brothers does he have?” “How much does he weigh?” “How much money does his father make?” Only then do they think they know him. If you tell grown-ups, “I saw a beautiful red brick house, with geraniums at the windows and doves on the roof…,” they won’t be able to imagine such a house. You have to tell them, “I saw a house worth a hundred francs.” Then they exclaim, “What a pretty house!”

 - 'The Little Prince'' by  Antoine de Saint-Exupéry 

Have you ever had a picture when you needed values? As scientists, we exceed the little prince's adults - we are obsessed with numbers... but lugging around and staring at an agglomeration of numbers isn't very practical - thus, graphs are used. Graphs are incredibly convenient. They allow us to compress a huge amount of information into a small space. They are ideal for first pass pattern checking and qualitative analysis. Nonetheless, we often need to go back to the quantitative side to further analyze the system. Yet sometimes, we are only provided with the plot and not the values. As such, the skill of translating a graph into a table of numbers is convenient.

For the first activity, we are tasked to digitize a handmade graph and use the pixel locations to infer the physical values of the points along the line. To recheck the values, the tabulated values will be replotted and overlaid against the original graph.

In figure 1, you can see a photograph of a plot in an old quantum mechanics book. To facilitate data collection, the picture was rotated, cropped, and grayscaled. As the lower right corner was significantly darker then the entire left side, a gradient mask was used while setting the contrast to produce a more uniform picture.

Figure 1. Original photograph

Figure 2 is then used for the rest of the process. The 582 x 777 picture corresponds to 0-200millibarn x 1.0-2.0 BeV graph.

Figure 2. Fixed image

In GIMP, a black layer was superimposed over figure 2. Selected data points were marked by the color white pencil tool of size 1 pixel. This new layer was saved as a .tif and opened with python. Other file types were found to blur the pixels. The code used to get the pixel locations is as follows:

1 import Image

2 import numpy as np

3 

4 im = Image.open(r"C:\Users\yupay\Desktop\points.tif")

5 points = np.array(im).nonzero()

6 points = np.array(points[1], 582 - points[0])

The superimposed black layer shows up as zeroes in im and the white pencil marks show up as 255(nonzero). The white pencil marks are easily grabbed in line 5.

Since the pixels are numbered  (top to bottom) x (left to right) instead of the XY coordinate system's (left to right) x (bottom to top), the array of locations is rearranged in line 6. To get the physical values, we apply the following formula:

6 points = [points[0]/777.+1.,points[1]/582.*200.]

For the x values, 777 pixels corresponds to the values between 1.0 and 2.0 BeV, while 582 vertical pixels corresponds to 200 millibarns. If we arrange it into xy pairs, we get:

Table 1. Obtained physical values

To check, we overlap the obtained values with the original... and voila!

Figure 3. Recreated plot over original plot

Eureqa formulize was used in an attempt to figure out the equation of the plot, but after two hours, a high equation complexity still yielded a low agreement with the given data points. Perhaps a longer runtime will improve the results.


The same method can be applied to another simple physics experiment. Figure 4 shows a polar graph from our Physics 191 class. We were asked to throw a marble at the center of the graph. Being imperfect humans, we missed a lot. We were then asked to look for a pattern in the accuracy of our throws. I used the method discussed here to automate the measurement of marble track locations from the center. Now, it's your turn to try!

Figure 4. Marble toss experiment

Hello world! This blog is made in partial fulfillment of the Applied Physics 186 course in UP Diliman. Thanks for visiting; I hope you learn something here!