Using Web Images Effectively:
10-IKE's Ten Web Image Tips

  1. Start with good quality images
    • Use a good quality camera
    • If scanning, use a higher resolution than needed, correct and enhance the image, and shrink the size to one half, then sharpen
    • Crop out any extraneous parts of the image

  2. Use the right format
    • Use jpeg for photographic images
    • Use gif for solid color, crisp edges and text
    • Use png for gradients with transparency
    • Use gif for animated graphics

  3. Keep the file size small
    • Nobody likes to wait forever for an image to download
    • Reduce jpeg file size by increasing compression
    • Reduce gif file size by reducing the number of colors

  4. Code correctly
    • Be sure to include width and height attributes in the img tag to speed up download time
    • When using a an image at smaller dimensions than the original, scale it in your photo editing program, not in your HTML code
    • Don't forget alt text in img tags

  5. Text or pic
    • A limited number of fonts are universally available for use on the web
    • A logo may need to be converted to a graphic
    • Text downloads faster than images, so use text when possible

  6. Colors and gradients
    • Save black and white photos as grayscale jpegs
    • When using gifs for gradients, you will get a smaller file size if the gradient runs from top to bottom rather than side to side

  7. Backgrounds
    • Avoid "busy", distracting backgrounds
    • Any image that is smaller than the browser's window will tile by default when used as a background image
    • You can use Cascading Style Sheets to prevent an image from tiling

  8. Animation
    • Use animations judiciously
    • Endlessly looping animations are generally very annoying
    • Two common animation formats are gif and swf

  9. Avoid cliches and bad design
    • Your web page should have one focal point, not a hodgepodge of them
    • Animated cartoon mailboxes have been way overdone
    • As have animating rainbow bars that separate topics
    • A graphic should not be so large that it cannot be viewed all at once; you have to scroll to see whole image

  10. Purpose
    • Images should have a purpose; they should help the visitor understand what you are trying to convey, not be merely decoration
    • Don't use huge navigation buttons as a substitute for images; they just look amateurish