What we’re doing:

• Comparing file formats (GIF and JPEG)
• Re-sizing image files
• Image compression effects

Why we’re doing it: To better understand another form of data representation & give context for Friday’s lecture.

Preparation

1. Open a Terminal window
2. You may have a directory named 105 within your home directory, which you created in a previous laboratory session. Use the command ls to determine whether that directory exists. If it does exist, go to the next step. If it does not, create it by entering the following mkdir command in your Terminal command line, as shown below:

     mkdir 105

3. To run a program that will copy some images into that directory, enter (or copy) the following command to your Terminal command line:

     ~rodrigue8/courses/csc105/labs/image-proc-script

4. Move to your 105 directory with the command:

     cd 105

5. Check that the images college-logo.gif, paradise.jpg, rainbow.gif, and water-lilies.jpg exist in your directory:

     ls -l

6. In the file listing, the number displayed just left of the file date tells you the number of bytes in each file. How many bytes are in the original pictures college-logo.gif, paradise.jpg, and water-lilies.jpg?
7. While you will be working with copies of images on your account, this page shows the original images.

Exploring image file formats

In this part of the laboratory, you will work with a free and open-source image manipulation program (similar to Adobe’s Photoshop) called GIMP, which stands for GNU Image Manipulation Program. You will use GIMP to explore two common image file formats, gif and jpg. (The latter format is also referred to as jpeg).

Creating JPEG files from GIF files

The JPEG file format can utilize the full range of RGB values. In contrast, although GIF files can include any particular color, they are limited to a maximum number (often 256) of colors total. This is because the GIF format stores colors in a table, and then refers to those colors by their position in the table (i.e., their index position), rather than by the full RGB triple. (We will go over this further in class on Friday.)

As a practical matter, this means that image processing software such as GIMP generally can work with images in two color modes: RGB mode, and indexed mode. JPEG images use RGB mode, and GIF images use indexed mode. Thus, in converting an image from the JPEG format to the GIF format (or back), you will need to change image modes.

1. To open the laurel-leaf logo (a GIF image) in GIMP, type the command

     gimp college-logo.gif &

   The ampersand & at the end of this line tells Linux to open GIMP in windows separate from your terminal window, so that your terminal window is still free for you to use. The first time you use GIMP, the program might needs to set up some directories and files for its processing. To accomplish this, the program will lead you through a series of steps.

   The GIMP program will open several windows, including a picture with the image itself. At the top of the frame containing the picture, note that the caption includes the word Indexed color to show that a color table is being used.

   Throughout the initilization process for GIMP, you can safely accept the default values by just pressing Next or finish or similar options as they are presented. If it appears, close GIMP’s “Tip of the Day” window (after reading it, if you wish).

2. To change the mode of the image to full RGB:
   • Click on the Image menu of the window, then move the mouse over the Mode sub-menu, and then click on RGB.
   • Note that the caption of the frame now indicates RGB color rather than Indexed color.
3. To save the picture as a jpeg file:
   1. Click the File menu and select Export….
   2. In the “Export Image” dialog box that appears, click on the triangle just left of “Select File Type (By Extension)”.
   3. Scroll down the list of file types, and select “JPEG image”.
   4. Check that the file name has changed to college-logo.jpg, and click Export.
   5. JPEG allows various quality settings. In general, the better the quality, the larger the file. In the next dialog box that appears, accept the default quality (90), and click Save.
4. Close the image, either by selecting Close from the File menu, or by clicking on the X in the upper-right corner of the image window. (Do not close GIMP yet.)Although we exported a new version of the file, we did not save our modifications as a specially formatted GIMP image. We do not want to do so, so click Close without Saving in the dialog box that appears.
5. In the terminal window, you may see that GIMP has printed some messages, which you can safely ignore. Press Enter in the terminal window to get the usual prompt back.Then check that a new image was created with

     ls -l

   How many bytes are there in college-logo.gif? How many bytes in college-logo.jpg?

6. To open both of the college logo images:
   • Bring the GIMP toolbar window to the front again.
   • Select Open from the File menu.
   • Double-click on college-logo.gif in the dialog box that appears.
   • Open college-logo.jpg in similar fashion.

   (Yes, I realize that we just closed one of these images. It seems to be important that the image be closed and re-opened, after changing its file type, to illustrate the following issue.)

7. Arrange your windows so that you can see at least part of both images as well as the GIMP toolbar window. Then to get a close-up view of both images:
   • Find an icon on the GIMP toolbar that looks like a magnifying glass, and click on it. Now if you click on either image, it will zoom in.
   • Select one of the points in the laurel leaf logo, and zoom in on it in both images. (Be sure that you are zooming in on each image an equal amount. To do so, it will be useful to observe the icon in the lower-left corner of each image that shows the zoom amount as a percentage.) I recommend a zoom of at lesat 2000%.

   Describe what you see, paying particular attention to the colors that you see, in the close-up view of each image.

8. Which image format seems to be most suitable for the logo image?
9. Close both images, but do not close GIMP yet.

Creating GIF files from JPEG files

Converting an image from JPEG to GIF format with GIMP follows a similar process.

10. Open the image paradise.jpg in GIMP.
11. Now change the color mode of the image to “indexed”:
    • Click on the Image menu, mouse over the Mode sub-menu, and then click Indexed….
    • Click Convert in the dialog box that appears, to accept the default number of colors (256). This will cause a color table to be created for the image.
    • Note that the caption of the frame now indicates Indexed color rather than RGB color.
12. Save the picture as a GIF file, following an analogous process as used above for saving in JPEG format, this time selecting “GIF image” as the file type and verifying that the file name changes to paradise.gif before clicking Export. Leave the default options for the follow-up dialog box and click Export one final time.
13. Close the paradise image (without saving).
14. Re-open the file paradise.gif and the original file paradise.jpg as well.
15. Now take a closer look at each of these pictures, again focusing on the colors they contain in a given region. I suggest looking at some area in the sky or the distant hills. (Again, as you zoom in, be sure to zoom in on each image an equal amount.)Describe what you see when zooming in on each image.
16. Back in your terminal window, check the size of each version of these files. How many bytes does each one require?
17. Which image format seems most appropriate for the “paradise” image?
18. Do you have a hypothesis about what types of images are most appropriate for each of these two image formats?
19. Close both of the “paradise” images, but don’t close GIMP yet.

Re-sizing images

In this part of the laboratory, you will experiment with scaling images. One reason for doing so is that images taken with modern digital cameras tend to be very large in terms of the numbers of pixels involved. As a result, if we post a full-size image on the web, it can take a very long time for the web page to load in a browser because all those pixels need to be transferred to the user’s computer for viewing. Thus, it is preferable to post small versions of your images.

1. Open the image water-lilies.jpg in GIMP.
2. This image is already reasonably small, as you can see by moving your mouse to the far bottom-right corner of the image, and then looking at the pixel coordinates displayed in the bottom-left of the window. Estimate the number of pixels in each row and column of this image.
3. Now select Scale Image… from the Image menu. In the dialog box that appears, change the width of the image to 600 (pixels per row). When you have done so, press Enter or TAB, and you should see that the height of the image is also automatically changed to maintain the correct “aspect ratio” (ratio of width to height). This will keep the the image from getting distorted.
4. Click on the Scale button to shrink the image to the specified size.
5. Finally, save your reduced-size image. (If you would like to keep the original image as well, be sure to use Save As and give your new image a new name.)
6. We reduced the width of the image by 600/800 = 75%. How much do you expect the file size to change by?
7. How many bytes was the water-lilies file before you scaled it down? How many is it now? Does this match your prediction? If not, try to figure out why.
8. Close any images you still have open, but do not close GIMP.

Exploring image compression

In this part of the lab, you’ll experiment with the effects of image compression in the JPEG and GIF formats.

Exploring GIF compression

GIF uses a “lossless” compression method, which means the image file stored is smaller, but the resulting displayed image is precisely the same. Here you will look at two images that can indicate a little bit about how GIF represents images.

1. Open the image rainbow.gif in GIMP.
2. From the Image menu, choose Transform and then click Rotate 90° clockwise. The resulting image should contain vertical, rather than horizontal stripes.
3. Save the resulting image using Export under the File menu. Be sure to give it a new name, such as rainbow-vert.gif
4. How many bytes is the original (horizontally striped) rainbow.gif file? How does this compare to the rotated (vertically striped) GIF file?
5. Can you hypothesize why there may be such a difference?Think about how you might describe this picture to someone so that they might draw it themselves. What if you could only describe the color and how long to draw the color horizontally?
6. Close any images you have open, but do not close GIMP.

Exploring JPEG compression

JPEG uses a “lossy” compression algorithm, which makes the image files much smaller, but they can be visibly affected because data is lost in the compression process. In this part you’ll explore these effects on image quality and file size.

9. Open the image water-lilies.jpg in GIMP.
10. Choose Export from the File menu. Give the file a different name, but keep the jpg extension at the end of the file name. Click Export.
11. A dialog box titled “Save as JPEG” will appear. Check the box labeled “Show Preview in image window”. This will allow you to see the result of saving the compressed image without actually saving and reopening it. Position the dialog box and the image so that you can easily change the Quality slider while also viewing most (or all) of the image.
12. Experiment with the quality slider.
    • How quickly does the file size reported decrease?
    • How much does the file size decrease before the difference in image quality becomes visibly noticeable?
    • How low can you set the Quality before the the image is really drastically altered (e.g., blocky edges, strange colors and “noise”)? What is the file size?
    • What does the image look like for extremely low Qualities (e.g. 1-6)?
13. What can you conclude about the relationship between the compressed file size and visible image quality?
14. Is it possible for such images to be compressed (i.e. a quality less than 100) without visible loss? Why do you suppose that may be?
15. Close any images you still have open, and also close GIMP.

Twine Time

This Twine Time got kind of long, so I gave it a page to itself: Conditional Love.

Acknowledgements

The Laurel Leaf, WaterLilies, and Paradise images used in this lab were copied from the original lab by Henry Walker. The rainbow image was created by Jerod Weinman and is released to the public domain.

Twine Time was developed by Liz Rodrigues who consulted Melissa Ford’s Writing Interactive Fiction With Twine.