5. Imaging Comparison

The exercise involves creating, processing and displaying a series of images. The images will be two bitmaps, and the two a vectors. Each image should be 500px wide (the height is up to you). They will be processed as a GIF, PNG, and JPG, as well as SVG for the vector images. Each image will be displayed and labeled with the format and file size, using the figure and figcaption elements, as shown below

GIF: 6.847K
PNG: 11.4K
SVG: 537 bytes
icon 1
JPG: 58.568K

The same flexible layout from the previous exercise will be used.


  1. Use two images, one a bitmap or photograph, the other a vector. These types will be explained. Use original images, not sourced from the web.
  2. Each image will be processed as a GIF, JPG, and PNG. Note the file size after the image has been processed. Each image will be labeled with its type and file size.
  3. The HTML syntax needs to be correct.
  4. The HTML file needs to reside in a directory (this is five) inside whatever you called the exercises directory, and will be named index.html.
  5. The CSS will be in an external sheet, and will import a reset stylesheet.
  6. This file must contain anchors back to your home page and the index page for exercises, and additionally, link to your other exercises
  7. As with the all assignments, once the local version is finished and tested, upload the changes to the server, and test from there.