Images should be related to the associated content or brand message.
Rationale: Images should add to the content rather than distract from it.
Optimize images to decrease size. Crop images, and keep them small. Do not use the HEIGHT and WIDTH parameters to decrease the size of images.
Rationale: Optimizing, shrinking, and cropping images increase download speed without significantly decreasing image quality. However, using the parameter to decrease physical size does not decrease the size of the file to be downloaded because the browser shrinks the images after it has been downoladed.
Where practical, repeat common images such as the logo and buttons.
Rationale: This adds consistency to the website, and increases download speed.
Do not use images that are inappropriate, offensive, or cutsey.
Rationale: Such use is unprofessional, and detrimental to the objectives of almost all websites.
Do not use stolen images, movie clips, or sound files.
Rationale: Almost all images and movie clips are copyrighted, and their unauthorized use is illegal. Such usage is unprofessional, and not worth the risk in terms of legal and branding problems.
Background Images should not make it difficult to read the text. Keep the background unobtrusive. The background image should have high contrast to the text. Background colors should not clash with the text and graphic colors. Background colors should go well with the brand colors. Do not use dark or black backgrounds. Avoid backgrounds with lines that make text difficult to read. Ensure that the background image tiles seamlessly.
Rationale: Backgrounds should not detract from the text, graphics, or brand.
Make the backgrounds of images either transparent or the same color as the background image.
Rationale: This prevents the image's rectangular white background from appearing over the background image.
Only use GIF, JPG, or PNG formats.
Rationale: All major browsers support GIF, JPG, and PNG formats. Other formats may require the use of a drawing tool that the user may not have.
Use the GIF file format for simple images.
Rationale: GIF files are large and can take a long time
to download.
Comment: Although some books recommend against using
GIF because the algorithm for generating GIF images is
patented, this only affects tool vendors rather than the users
of the GIF images.
Use the JPG for photographic images or complex images.
Rationale: JPG files are considerably smaller than GIF files, and thus take less time to download.
Use the 'width' and 'height' attributes of the <img> tag to set the size of the image. Keep the size under width=535 pixels and height= 295 pixels.
Rationale: This allows the browser to format the page while the image is downloading, allowing the user to start reading the pages sooner and navigate to new pages before the image has finished downloading. This maximum image size limits scrolling with most monitors and browsers.
Use the ALT parameter of the IMG tag to describe the image.
Rationale: Browsers for the visually impaired can verbally describe the image. Many browsers use the value of the ALT parameter for pop-up definitions when the user moves the curser over the image.