Working with Images

These are notes from a presentation Kristin A. Antelman gave during ALA Mid-winter's meeting, February, 1997

Working with Images


  • computers display 72 dpi (dots per inch)
  • don't scan higher unless you intend the image to be printed

Color Depth (i.e., the number of colors represented in an image)

  • 256 colors (8 bit graphics) is usually sufficient
  • photos and exhibit images should be scanned at thousands or millions of colors
  • reducing (indexing) to 7 bits (128) will decrease quality somewhat but file size significantly

Image and Graphic Design

Users and Access

  • who is your primary audience and what hardware do they have?
  • what is the speed of the network?
  • is your site accessed by many dial-up users?

Navigation of your Website

  • do your graphics aid novice users in navigating your site?
  • do your graphics have a clear meaning?
  • is their use consistent across your webpages?

Working with Images

Key Concepts

  • File size
    • dimensions in inches or pixels
    • bytes of memory
  • File formats
    • gif and jpeg are the most commonly used graphics formats
    • use gif for drawings, logos, icons, and screen capture
    • use jpeg for continuous tone images, such as photos

Tips for Creating, Editing and Using Images


  • try to avoid editing icons: they do not scale up or down well
  • try to create unique icons instead of using same old web icons everyone else uses
  • icons should be transparent (GIF89a)

Banner Logo

  • save as interlaced GIF (interlaced JPEG not yet widely supported)
  • image should be no wider than 470 pixels

Scanned Images

  • informational images
    • small is important
    • if JPEG, save at medium or high resloution
    • reduce to 256 colors
  • exhibit or archival images
    • produce high quality images in multiple sizes, including 72-dpi for display
    • use thumbnails to preview multiple images on a page


  • consider a simple imagemap or table with color background and plain text
  • for images, use sans serif font and use anti-aliasing to improve legibility
  • use beveling


  • smaller is better (e.g., <50K)
  • provide text links beneath imagemap
  • links on the imagemap should be obvious
  • avoid too much wasted space


  • Preview your webpages
    • in varous browsers, including previous versions
    • at different resolutions
    • at different color depths
    • at different browser widths
    • on different platforms