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 graphics.html web page. Add a level-2 heading "Graphic File Types" to the new section using an <h2> element. Add an id attribute so you can link directly to this section of the page, like this:
    <h2 id="filetypes">Graphic File Types</h2>
  4. Now, in the new section of the page, use any HTML that you feel is appropriate to 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.

When finished, proceed to the next lesson.