TIPS FOR FAST LOADING IMAGES

This page offers several methods for minimizing the size of graphic files, without losing attractiveness, to achieve fast loading times.

For every 10 seconds it takes for your graphics to load before your page contents can be seen, you risk losing 20% of your remaining viewers.* This illustrates the importance that web pages load quickly and image/graphic sizes remain as small as possible.

Most graphical web browsers support only two types of graphic files: GIF and JPEG. When deciding which one to use, pick the type that uses the least amount of memory space. GIFs are best used on solid colors and sharp-edged transitions of color and are limited to 256 colors or less. JPEGs, on the other hand, do not handle sharp edges well. Here are some guidelines:

GIF
• text and text art
• cartoons
• poster art
• line drawings
• art which needs transparent backgrounds

JPEG

• color photographs
• black and white photographs, unless very high contrast
• 3D rendering from VRML or ray tracing software
• art with many blends and gradients
• art requiring embedded and copyright notices

• Use correct GIF or JPEG format (see guidelines above).
• Limit final artwork to a resolution no higher than 72 dots (pixels) per inch.
• Don't make the graphic any larger on screen than it needs to be. Don't try to fill the screen; smaller images load quicker.
• Reduce the size of GIF files by selecting less than the standard 256 (8-bit) colors. If you don't use that many different colors, change to a lower number.
• A JPEG file can be saved with less detail to save memory space. Save the file as "low quality" or a low percentage/resolution to reduce the size of the file.

Loading Images Faster

• Use height and width tages to tell the browser exact size in pixels of the graphic.
  
  Example: <IMG SRC="MyLogo.gif" WIDTH=32 HEIGHT=50>
  The browser can not load text onto the screen until it knows the size of all graphics.
• If possible, keep the total page size under 30K. Try to keep individual graphics under 10K.
• Use progressive GIF and JPEG files that load low resolution layers to form a picture over time. Use the LOWSRC tag which produces the same effect.
• Try interlaced GIFs which display quickly and "clean" themselves up by becoming clearer.
• Limit the number of repetitions for animated GIFs -- they interrupt other processes.

Alternatives

• Use text representations with all images.
  Example: <IMG SRC="welcome.gif" ALT="Welcome!" >

* Source: "How to Create Small, Fast Loading Web Graphics" by Walt Howe and Delphi Internet Services Corp., © 1997