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.

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.

2. 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
      

3. 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

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

5. 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.

6. 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".

7. 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?

8. 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.

9. 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?

10. 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

11. 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.

12. 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?

13. 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.

14. 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?

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

Reducing Image Dimensions

16. 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.
       
       
17. Use GIMP to change the size of paihia-departure.jpg to width 400 pixels in jpeg format at 0.75 quality.

18. 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.

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

20. 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.

21. 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.

22. 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.

23. 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?

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

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

25. 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?

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

27. 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.

28. 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:

• Approximate timing for questions 1 and 28.
• Answers to questions 7-10, 12-15, 23-28.
• A statement of the URL that may be used to access your copy of the page photo-album/index.html (step 28).

http://www.walker.cs.grinnell.edu/fluency-book/labs/photo-album.shtml

created 1 February 2004 last revised 19 February 2006
For more information, please contact Henry M. Walker at walker@cs.grinnell.edu.