Lesson 1: Understanding Web Graphics


You will first read a series of documents to develop an understanding of pixels and resolution for creating web graphics. Then you will learn about file size and graphics and explore how bandwidth limitations will affect your choices in choosing graphics. Finally, you will participate in an exercise to help teach you about different graphic file formats and how to choose which format to pick for different types of images.

Learner Outcomes

At the completion of this exercise, you will be able to:


  1. Read each of the three web pages listed in the Resources section below to learn about pixels, resolution, file size, and file type.
  2. `
  3. After you are finished reading, take a look at each of the images below. For each of the five images, which file format would be most appropriate for putting that image on a web page? Record your answers in a new section within your unit4.htm web page. Add a level-2 heading "Graphic File Types" to the new section using <h2> tags. Use any XHTML you feel is appropriate to format your answers.
  4. Inside the new heading tags, place an anchor like this: <a name="filetype"/>.
  5. On your portfolio home page, make the text referencing this lesson into a hyperlink to the new section, like this:

    <a href ="unit4.htm#filetype">

  6. Now, in the new section of your unit4.htm page, using any XHTML that you feel is appropriate, record your answer to the following question: For each of the five images below, which file format would be most appropriate for putting that image on a web page?

Image 1:

Image of a bar chart


Image 2:

Photograph of a monkey


Image 3:

Photograph of Mount Rainier


Image 4:

Drawing of four puzzle pieces, each a different solid color


Image 5:

Drawing of a Stop Sign

Resources/Online Documents

All done?

Be prepared to discuss your answers for the graphic file format questions with the class.