The Tao of Computing:
A Down-to-Earth Approach to Computer Fluency
 
by Henry M. Walker Jones and Bartlett Publishers
 

Laboratory Exercise on Creating a Photo Album

Suppose you have taken pictures during a trip. This laboratory exercise considers issues related to posting your pictures on the Web for your friends and family.

  1. To make the discussion concrete, consider the following photo album of pictures taken during a trip to New Zealand in April/May, 2003. All of these pictures appear exactly as they downloaded after being taken by a Canon S230 digital camera.

    View this photo album, and determine approximately how long this page takes to load into your browser.

    While this photo album displays pictures in a moderate size, with two pictures side-by-side, note that you can click on any picture to see a display of the full picture.

The load time for this page illustrates a typical problem for Web pages. This page contains 14 images, plus the index page for the photo album. The following table show the names of these image files and their sizes.

File name Size File name SizeFile name Size
bay.jpg 738934    driving-w-1.jpg 977852    driving-w-2.jpg 876032   
hole-in-the-rocks-1.jpg 885650    hole-in-the-rocks-2.jpg 362536    index.html 4418   
paihia-departure.jpg 769052    sky-n.jpg 1034868    sky-nw.jpg 991461   
sky-sw.jpg 1048674    sky-tower.jpg 236136    sky-w.jpg 953236   
west-harbor.jpg 886281    witt-1.jpg 860535    witt-2.jpg 695415   

As you can tell, the index file is small, but the smallest image file is 236,136 bytes. Most image files are over 800,000 bytes, and two files are over 1 million bytes.

Overall, the pictures from the camera have a nice quality with good resolution, but the file sizes are large. During the lab, you are using computers with a high-speed Internet connection, and you noted the photo album took considerable time to load. If you were connecting from home with a slower connection (perhaps with a dial-up modem), the time to load this page could be prohibitively long.

The goal of this lab is to determine alternative ways to reduce the size of these files while maintaining acceptable quality.

  1. To experiment with a copy of this photo album, establish a subdirectory photo-album within your public_html/105 directory, and copy the files for the photo album your own account. This can be accomplished as follows:
    1. Open a terminal window on your workstation
    2. Within the terminal window, run the command
      
          ~walker/105/setup-photo-lab
      
    3. Move to your new photo-album subdirectory with the commands:
      
         cd public_html
         cd 105
         cd photo-album
      
  2. Load your copy of the photo album into your browser using the URL
    
       http://www.cs.grinnell.edu/~your-username/105/photo-album/index.html
    

Using gif Format

The first experiments for reducing file size involves the use of gif format. While gif format restricts images to only 256 colors, the resulting picture will require just one byte per pixel.

  1. Use GIMP to convert sky-tower.jpg, sky-w.jpg, and driving-w-2.jpg from jpg format to gif format.

  2. In the terminal window, change the file permission to 755 for each gif file, so that the file will be readable over the World Wide Web.

  3. Change file index.html, so that it references these gif files rather than the jpg files.
    1. The emacs editor provides typical editing capabilities.
      Start the editor in the terminal window with the command
      
         emacs index.html &
      
    2. Scroll down in the file to find sky-tower.jpg, sky-w.jpg, and driving-w-2.jpg. In each case, change ".jpg" to ".gif".
    3. Save your modified file using the "Files" menu and choosing "Save buffer".

  4. In the terminal window, use the command ls -l to determine the size of these new files. Are these files smaller, larger, or about the same size as the originals?

  5. Reload your browser with your copy of the photo album.

    Describe the quality of the new gif image, and compare it with the original version.

  6. Click on the image of these pictures. When viewing these images in your browser, how do the overall dimensions of these gif images compare with the size of the original jpeg images?

  7. Summarize your impressions of the effectiveness of replacing a jpeg image with a gif format of the same dimensions for this photo album.

Reducing jpeg Quality

The next experiments for reducing file size involve using jpeg format of a lower quality.

  1. Use GIMP to make the following reductions:
    1. Save west-harbor.jpg with image quality 0.75.
    2. Save sky-sw.jpg.jpg with image quality 0.50.
    3. Save sky-nw.jpg with image size about 30,000 bytes.
    4. Save hole-in-the-rocks-1.jpg with image quality 0.75.
      Close hole-in-the-rocks-1.jpg in GIMP, then re-edit this file to reduce it again with image quality 0.75.
      Repeat this process one more time -- again re-editing and saving with image quality 0.75.

  2. In the terminal window, use the command ls -l to determine the size of these new jpeg files. How much smaller are these new files than the originals?

  3. Reload your browser with your copy of the photo album.

    Describe the quality of these edited jpeg images, and compare each with the original versions.

  4. Click on the image of these pictures. How do the overall dimensions of these gif images compare with the size of the original jpeg images?

  5. Summarize your impressions of the effectiveness of reducing jpeg-image quality for this photo album.

Reducing Image Dimensions

So far, in using gif format or reduced-quality jpeg format, the overall dimensions of the images did not change. The final experiments involve reducing the dimensions of the images. On the photo album Web page, each picture is shown with a width of 400 pixels. Of course, clicking on a picture yields a larger image.

  1. Use GIMP to change the size of driving-w-1.jpg to width 700 pixels in jpeg format.
    1. After opening the image in GIMP, right click on the image to produce a menu of options. Select "Images" and "Scale".
    2. In the resulting window, set the horizontal width to 700, and save the image at 0.75 quality.

  2. Use GIMP to change the size of paihia-departure.jpg to width 400 pixels in jpeg format at 0.75 quality.

  3. Use GIMP to change the size of bay.jpg to width 400 pixels in two steps. First, save the file to bay.jpg to width 700 pixels. Then exit GIMP and re-edit the file to obtain a width of 400 pixels. In each case, save the file using 0.75 image quality.

  4. Use GIMP to change the horizontal width of driving-w-2.jpg to 700 pixels and also change the format to gif format.

  5. Use GIMP to change the horizontal width of hole-in-the-rocks-2.jpg to 400 pixels and also change the format to gif format.

  6. Use GIMP to change the horizontal width of witt-2.jpg to 700 pixels and also change the format to gif format. After exiting GIMP, re-edit the file to an overall width of 400 pixels -- still in gif format.

  7. For these new gif files, use the emacs editor to change the file index.html, so that these files are referenced as .gif files rather than .jpg.

  8. In the terminal window, use the command ls -l to determine the size of these new jpeg and gif files. How much smaller are these new files than the originals?

  9. Reload your browser with your copy of the photo album.

    Describe the quality of these edited images, and compare each with the original versions.

  10. Click on the image of these pictures. How do the overall dimensions of these gif images compare with the size of the original jpeg images?

  11. Summarize your impressions of the effectiveness of reducing the overall dimensions of images for this photo album.

  12. So far, we have tried experiments to reduce the size of each of the images in the photo album, except for the file witt-1.jpg. Review the results of your experiment, and utilize an appropriate technique to reduce the size of this file. Briefly justify the approach you used.

  13. Close your browser. Then reopen the browser, and reload your photo-album page. How long does this version take to load?

Work to be Turned In for this Lab

As with the previous lab on image processing, much of the work in this laboratory exercise involves reformatting or editing images, and there is little to report about this work (except that you did it). The parts for you to turn in involve observations of the resulting images and files.

Submitted material for this lab should include the following:



This laboratory exercise coordinates with Chapter 2 of Walker, Henry M., The Tao of Computing: A Down-to-earth Approach to Computer Fluency, Jones and Bartlett, 2005.




This document is available on the World Wide Web as
http://www.cs.grinnell.edu/~walker/fluency-book/labs/photo-album.shtml

created 1 February 2004
last revised 19 February 2006

Valid HTML 4.01!
For more information, please contact Henry M. Walker at walker@cs.grinnell.edu.