Maddog's HTML for Real People Image Checklist

Copyright 1997 ...[please view copyright info ]...
[INDEX]         Image Checklist
[Note: this checklist represents suggested practices, not requirements for HTML; you are free, of course, to author HTML outside these guidelines... but consider the potential consequences]

when using font or background color ('BGCOLOR='):
Use RBG-codes instead of color-names (for maximum compatibility with old & new browsers)
Use standard 16-color pallette (for maximum compatibility with old & new browsers, and most operating systems)
RGB-codes are enclosed in quotation marks and are preceded by '#' sign

[Note: if no background image is specified, and 'BGCOLOR', 'FONT', 'LINK', & 'VLINK' colors are not specified, the following conditions are automatically fulfilled .]

'FONT' color has good contrast with specified background color (BGCOLOR) or background image (BACKGROUND)
'FONT' color has good contrast with "silver" and "white" backgrounds, which might override specified background colors (for maximum compatibility with old & new browsers)
'LINK' & 'VLINK' colors have good contrast with specified background color (BGCOLOR) or background image (BACKGROUND)
'LINK' & 'VLINK' colors have good contrast with "silver" and "white" backgrounds, which might override specified background colors (for maximum compatibility with old & new browsers)
'LINK' & 'VLINK' colors are different than the 'FONT' color (and not "black")
'LINK' color is different than the 'VLINK' color

when using background image ('BACKGROUND='):
Keep images small (less than 6KB image filesize, or 100 x 100 pixels suggested)
Use '.JPG/.JPEG' format image, if possible
Check readability of text with background image

when using inline images:
Use '.GIF' format images for inline images (for maximum compatibility with old & new browsers)
Keep inline images reasonably small (less than 6KB image filesize, or 100 x 100 pixels suggested)
Limit the number of inline images to reduce download time (fewer than 1 medium (<15KB) plus 6 small sized images (<6KB), or less than 50KB when all image filesizes are added together for that page); use off-page images if yo u need to display more or larger image files
Use alternate text for each inline image ('ALT=')
Specify 'WIDTH=' and 'HEIGHT=' for each inline image (when known, to allow loading images last)
When using images containing their own text, use 10-pt or larger fonts in the image (to assure readability)
When using small images, consider their readability on a smaller diagonal-measure monitor, or on a higher-resolution monitor

when using off-page images:
Use '.JPG/.JPEG' format for off-page images (whenever possible)
Limit the off-page image size to 600 x 400 (WxH) pixels (for maximum compatibility with older monitors); alternatively, allow the operator to choose between an image limited to 600 x 400, and a larger image
When using images containing their own text, use 10pt or larger text in the image (to assure readability)
When building the link for an off-page image, provide a caption specifying the file format (GIF or JPEG, etc.) and off-page image filesize (in KB)

when using clickable images:
Use '.GIF' format for "icon" or "button" or "thumbnail" images
Keep "icon" or "button" or "thumbnail" images small (<5 KB or <75x75 pixels)
Use alternate text for each clickable image ('ALT='), unless you are using a clickable caption
When building clickable "icon" or "button" images, use the 16-color pallette when possible (for maximum compatibility with old & new browsers)
When building clickable "icon" or "button" images, use 10-pt or larger fonts in the image (to assure readability)
When building clickable "thumbnail" images, use the 256-color pallette when possible (for maximum compatibility, and minimum image filesize)
If you include a caption with a clickable "thumbnail" image, consider making the image 'BORDER=0'.

Determine the typical download time for your page with images:
Add the filesize of the web page (HTML file) to the filesizes of all inline images plus the filesize of any background image; divide that figure by 1.4 (if in KB, or by 1400 if in bytes) to get the number of seconds for a t ypical download. Try to keep this to less than 60 seconds (by making images smaller or using fewer images), unless you tell the remote operator ahead of time how long it will take (or how big it is). [Note: Don't be fooled by how long it takes you to load the page locally, because local cache may be involved for images, even when "reloading"]


-PREVIOUS- -INDEX- -NEXT-

Overseer: Monty Northrup ... maddog@io.com ... leave e-mail ...
...to maddog 'n' miracles homepage...