Web Design Wikiclass | Tutorial / Web Graphics: Image Formats and File Size

Overview: This tutorial gives you hands-on experiment about various image formats used in web graphics. You will understand more about when and how to use web image formats.

Activity 1: Install GIMP

Install GIMP for Activities 2 and 3.

URL: http://www.gimp.org/

GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.

Additional tool for you: FastStone Photo Resizer

URL: http://www.faststone.org/FSResizerDetail.htm

FastStone Photo Resizer is an image converter / resizer intended to enable users to convert, rename, resize, crop, rotate, change color depth, add text and watermarks to images in a quick and easy batch mode. Drag and Drop mouse operation is well supported.

Activity 2

Create a web page with the following content. Replace the images with your own images and use the data about your images. You may want to use the following HTML code to start with.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>WD Tutorial 06</title>
      </head>
      <body>
      <h1>Activity 2</h1>
      <p>1. I use PowerPoint to make a graphic work.</p>
      <p>2. I use GIMP to capture the image.</p>
      <p>3. I cut a portion of the image to 456x320 and then save it in GIF format.</p>
      <p><img src="a2img1.gif" alt="" /></p>
      <p>The file size is 15,807 bytes (in GIF format).</p>

      </body>
      </html>

1. I use PowerPoint to make a graphic work.

2. I use GIMP to capture the image.

3. I cut a portion of the image to 456x320 and then save it in GIF format.

The file size is 15,807 bytes (in GIF format).

4. If I save it in PNG format using the highest compression.

The file size is 24,234 bytes (in PNG format).

5. If I save it in PNG format using the lowest compression.

The file size is 30,161 bytes (in PNG format).

6. If I save it in JPEG format using the 100% quality factor.

The file size is 91,129 bytes (in JPEG format).

7. If I save it in JPEG format using the 80% quality factor.

The file size is 37,382 bytes (in JPEG format).

8. If I save it in JPEG format using the 60% quality factor.

The file size is 27,054 bytes (in JPEG format).

9. If I save it in JPEG format using the 40% quality factor.

The file size is 21,345 bytes (in JPEG format).

Conclusion: GIF or PNG-8 work best to retain crisp detail in simple illustrations (less than 256 colors), and for web graphics containing text (so the text edges remain sharp).

Activity 2 Submission:

(Q1): Briefly describe your findings in this activity.

Activity 3

Create a web page with the following content.
Replace the images with your own images and use the data about your images.

1. I get the following image from my Facebook account

The image size is 604x453. The file size is 59,190 bytes (in JPEG format).

2. I open the image with GIMP and save it back to JPEG format using quality factor 80.

The file size is 54,288 bytes (in JPEG format).

3. If I save it to JPEG format using quality factor 60,

the file size is 32,643 bytes (in JPEG format).

4. If I save it to JPEG format using quality factor 40,

the file size is 25,657 bytes (in JPEG format).

5. If I save it to JPEG format using quality factor 20,

the file size is 16,722 bytes (in JPEG format).

6. If I save it to JPEG format using quality factor 10,

the file size is 10,366 bytes (in JPEG format).

7. If I save it to PNG format using the highest compression rate,

the file size is 406,174 bytes (in PNG format).

8. If I save it to PNG format using the lowest compression rate,

the file size is 822,695 bytes (in PNG format).

9. If I save it to GIF format,

the file size is 134,330 bytes (in GIF format).

Conclusion: JPEG is still great for photographs displaying millions of colors at a very small file size.

Activity 3 Submission:

(Q2): Briefly describe your findings in this activity.

Activity 4

Explore the Website of Hong Kong International School (URL: www.hkis.edu.hk). Examine how web images are used in the Website.
(Q3): Find one web page there that you think the images are properly formatted and optimized. Explain your reasons.
(Q4): Find one web page there that you can optimize the use of web images. Explain why the use of web image is not optimized and suggest how to optimize it. (Hints: note the file format of the images used in the Website.)