cyberfrem.co.uk
Summary:
- DO minimise the number of images on each page.
- DON'T include irrelevant images.
- DO provide ALT tags for all images.
- DO specify HEIGHT and WIDTH tags for all images.
- DO optimise all images.
- DO maintain only one copy of each image file.
- DO avoid unnecessary animation.
- DON'T have overly large banner images.
- DON'T steal images.
- DON'T use images for text.
Elaboration:
- Use graphics sparingly.
- Too many can lead to congestion and increased download times.
Do not get carried away.- ie. do not include graphics that have no purpose on your page; only include them where they are relevant and add 'value'.
Provide alternative text.- Always include an 'alt' description tag with every one of your images so that visually impaired visitors, (and those who have stopped their browsers from displaying pictures), will be aware what the picture shows.
Specify dimensions.- Always include 'height' and 'width' tags with every one of your images so that the browser can immediately display any text upon loading a page whilst allowing for the exact space required for the image. Thus the reader can begin to read the text without having to wait for the image to load.
Optimise.- The smaller you can make your image files, the faster they will download. There are various techniques that you can
use to reduce the size of a graphic file without affecting its appearance; eg. reduce the number of colours used to a
minimum, ensure the resolution is no greater than 72 dots per inch (dpi) as this is all that is needed for screen
displays, etc.
Note that there are tools available that can optimise your files for you, (I use NetMechanic's GIFBot).
Avoid duplication.- Only maintain one copy of each image file and refer to its location consistently throughout your site. Your browser will then only need to download the file into its cache once, the first time that it is required, and after that simply re-display its cached copy; ie. subsequent pages will download faster.
Don't annoy!- Animated graphics take longer to load and can distract the reader from the information on the page so reserve them for only where it is important to attract the reader to something specific.
Banner graphics.- Do not make these so large that they dominate and push your contents 'below the fold'.
Thou shall not steal!- Do not use or take copies of other peoples' images without permission, (and do remember to give credit to your sources if they do allow you to use their images). If you are in any doubt, use public domain, royalty-free clip art or make your own.
Avoid text in graphics.- You are unnecessarily increasing the time taken to download and render a page. Treat text and graphics as completely, separate entities.