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:

• use the concepts of pixels and resolution to appropriately size images for web pages.
• understand how file size and bandwidth limitations influence the use of web graphics.
• differentiate between different image file formats and determine which type is appropriate for displaying different types of web images.
• locate images on the Web and determine whether it's okay to use them

Activities

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. 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>
3. 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?

Resources/Online Documents

• Web Graphics Basics
• sitepoint.com: GIF, JPG, and PNG - What's the difference?
• Web Style Guide: Characteristics of Web Graphics

All done?

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

When finished, proceed to the next lesson.