Using graphics on the web

Keep graphics small

Most users have little patience for slow loading pages, and will rapidly abandon a slow site. Remember that many of your audience will be using a modem, and try to keep graphics file sizes under 40K. Be willing to sacrifice some image quality. You're producing a web page - not National Geographic Magazine.

Provide thumbnails for large graphics

If you feel your site absolutely requires large graphics, provide an in-line reduced thumbnail of the graphic on your main page, which will link to the larger graphic on a separate page. This way the user has a choice and can decide if she or he wants to view it then, at another time or at all. It's also a kindness to indicate the file size, so the user can estimate how long the display will take to load.

Use the same motifs throughout your site

Recycle graphics (icons, navigation bars), as they are cached locally once downloaded. Standardizing on a set of graphic arrows, bullets, logos etc. also provides your site with a characteristic "look and feel" that your audience can identify with.

Provide alternative text for non-graphics browsers

Use the [alt="" ] command to provide a text description for those using text to speech recognition or those who may have graphics loading disabled on their browsers. See Image Attributes for how to do this.

Use the appropriate file format

Graphics Interchange format - GIF - was originally developed for Compuserve for the rapid transfer of images. GIF compression works by encoding the identical repeating elements within any given graphic, storing the code in an attached table and using the data to display the image when called upon by the web browser. GIF compression does not alter the data of the image, but does not give the tonal quality of JPEG, either. It gives the best compression on images with many repeating elements, such as line-art images, screen shots, logos, cartoons & drawings with that are only 8 bit - or 256 colors. GIF images can be quite small and still look good, so it pays to experiment. There are two GIF variations that are enormously important to web development: transparent GIFS and animated GIFS .

Joint Photographic Experts Group- JPEG - compression should be used for continuous tone images such as color photographs or images with complex color that will show a "banding" when saved as GIF. JPEG is a "lossy" compression which means it drops data from the image to achieve optimal compression. The degree of compression, and therefore the degree of image loss, can be specified when you first save the image. Continuous tone images can often be compressed smaller than GIF images and look better as JPEG. It's important to remember that JPEG images will degrade each time they're edited and saved, so keep your original in another format for future editing. Once you save as JPEG compression, the lost data cannot be replaced.

Image resolution should be 72 dpi

Having the image resolution higher than 72 dpi (dots per inch) will result unnecessarily large file size, as most monitors will not be able to display a higher resolution than this.

Be mindful of color variations

There are several factors that influence how color is displayed on the web. For one thing, Macs and PCs do not share the exact same color palette. Using "web safe" colors will help with that. Other factors are different monitor settings, monitor quality and age. It's likely you'll never be able to reproduce the same exact hue, saturation and brightness on multiple monitors, so you want to make sure your colors are compatible in different situations, which you can only do by comparing your web pages on different computers.