Graphics Checklist

Use this checklist to learn more about using graphics on your Web pages. Once you go through the list you should have a good understanding of the terminology and procedures you need to know.

1. How to place an image on a Web page
2. How to edit images/graphics:
   1. Resizing and Cropping Images
   2. Maintaining the aspect ratio when resizing
3. The graphic file formats used on the Web:
   1. GIF file format (GIF file extension)
      1. When to choose the GIF format
      2. Advantages of GIFs
      3. How to save (or export) to the GIF format
   2. JPEG file format (JPG file extension)
      1. When to choose the JPEG format
      2. Advantages of JPEGs
      3. How to save (or export) to the JPEG format
   3. PNG file format (PNG file extension). Not yet fully supported
4. Color on the Web
   1. RGB color vs. CMYK color
   2. Color bit depth
      1. 8 bit (a.k.a. indexed color), 256 colors
      2. 16 bit, 64 thousand colors
      3. 24 bit, 16 million colors
   3. Web-safe browser color palette at 256 color setting
   4. Image dithering
5. The Alternate (ALT) HTML Attribute
   1. How and why to include this attribute for an image
6. Anti-aliased text
   1. What it means
   2. Creating anti-aliased text
7. File size of images
   1. How to determine the size of a file
   2. How to keep the file size small
8. How to create and use specialized Web Graphics:
   1. Transparent GIFs
   2. Interlaced GIFs or progressive JPEG
   3. Animated GIFs
   4. Tiled backgrounds
   5. Image maps
   6. Thumbnail images
   7. Rollovers
   8. Invisible spacer
   9. Sliced images

Adapted from The Non-Designer's Web Book. Robin Williams and John Tollett. Peachpit Press, 1997. 2nd edition, 2000

Related issue: And while you're thinking "visually"... don't forget screen resolution (640x480, 800x600, 1024x768, etc.) when creating a Web page. This is a topic we will discuss further in class.