Website Image Design Guidelines

Relevancy

Keep images relevant:

• Images should be related to the associated content.
• Imange should be consistent with and convey the brand message.

Rationale:

• Images should add to the content rather than distract from it.
• Users are more interested in valuable content than in marketingslogans or pictures of smiling people and beautiful scenary, especially if they take a long time to download.
• Too much fluff and not enough value frustrates users and weakens digital brands.

Optimize Images

Optimize images to decrease memory size:

• Crop images to keep them as small as is practical.
• Minimize the number of colors used as long as image quality is not significantly degraded.
• Use the maximum amount of compression that will not significantly degrade image quality.
• Do not use the HTML HEIGHT and WIDTH parameters to decrease the size of images.

Rationale:

• Optimizing, shrinking, and cropping images can significantly increase download speed without significantly decreasing image quality.
• However, using the HEIGHT and WIDTH parameters to decrease the physical size of images does not actually decrease the size of the file to be downloaded because the browser shrinks the images after they have been downoladed.

Repeated Images

Where practical, reuse common images such as the logo, buttons, and horizontal rules.

Rationale:

• This adds consistency to the website
• This decreases download time because browsers cache recent images.

Inappropriate Images

Use appropriate images:

• Do not use images that are inappropriate to the content of the website.
• Do not use images that are inconsistent with the digital brand of the website.
• Do not use images that are offensive, especially to the target audiences or customer organization.
• Do not use images that are inappropriately cutsey.

Rationale:

• Such use is unprofessional, and detrimental to the objectives of almost all websites.

Unauthorized Images

Do not use stolen images or movie clips.

Rationale:

• Almost all images and movie clips are copyrighted.
• Unauthorized use of copyrighted images and movie clips is illegal.
• Such usage is unprofessional.
• Such usage is not worth the risk in terms of legal and branding problems.

Background Images

Use appropriate background images:

• 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 unless required by the brand message of the website.
• 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.
• Such backgrounds can make it difficult to read the website content.

Image Backgrounds

Make the backgrounds of images either transparent or the same color as the solid color background image.

Rationale:

• This prevents the image’s rectangular white background from appearing over the background image.

Formats

Only use GIF, JPG, or PNG formats.

Rationale:

• All major graphic browsers support GIF, JPG, and PNG formats.
• Other formats may require the use of a drawing tool that the user may not have.

GIF Images

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 vendors of tools that generate GIF files rather than the users of these tools or the resulting GIF images.

JPG Images

Use JPG for photographic images or complex images.

Rationale:

• JPG files of photographic images or complex images are considerably smaller than corresponding GIF files, and thus take less time to download.

Specify Size

Specify the width and height of graphic images:

• 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.
• Retain the aspect ratio (i.e., the ratio of width to height) of the original graphic image.

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.
• Keeping the aspect ratio constant avoids distortion, maximizes the readability of any text, and minimizes the distortion of lines at different angles.

Textual Description

Use the ALT parameter of the HTML IMG tag to provide an alternative textual description of 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.