UNIT 4 > MODULE 2

Lesson 1: Understanding Web Graphics

Overview

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:

Activities

  1. Open up Web Graphics Basics and read the sections on pixels and resolution. Try and start thinking about web graphics in terms of how many pixels in size they are. Why is the total size in pixels of an image more important for web graphics than its resolution?
  2. Read the section on "Resolution," in the Yale University Web Style Guide, 2nd Edition. Why is it important to size web graphics the same number of pixels that they will appear on the screen? Will a graphic appear the same size on all computer monitors?
  3. Read the section on "Graphics and Network Bandwidth," in the Yale University Web Style Guide, 2nd Edition. Then, read the section on file size in Web Graphics Basics. Remember that not all web users have high speed connections and think about how file size and bandwidth considerations affect your choices for using graphics on your web pages.
  4. Read the section on "Graphic File Formats," in the Yale University Web Style Guide, 2nd Edition. Then read the section on graphic file types in Web Graphics Basics. Further information on the difference between GIFs and JPEGs can also be found by reading the WebMonkey article GIF vs. JPEG.
  5. 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 unit4lesson.html document. Use any XHTML you feel is appropriate to format your answers. Using <h1> tags, head this section of the unit4lesson.html document, "GIF vs. JPEG".
  6. Before the new heading, place an anchor like this: <a name="file">.
  7. On your portfolio home page, make the text referencing this lesson into a hyperlink to the new section within the file unit4lessons.html, like this:

    <a href ="unit4lesson.html#file">

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.