Read at your own risk
2011 October 1/10:32 PM
This document dates from the early web period, and is kept for archival purposes only. It is no longer updated, and contains much that is apocryphal, or at least wildly inaccurate.Images make and break the net for those of us with real connections. But not everyone has a real connection. A lot of people are still limited to text-only Unix accounts, or 14.4 modems. Those people are going to want to be exceedingly wary about what graphics they load.
A picture wastes a thousand words.
Never use an image to literally replace text. You might want to do this to make your web page look like a printed page, but all you’re doing is removing text from your page. Spiders (search engines) can’t index your image-based text. They only index real text. Browsers for the blind can’t read your image-based text. And so on. If you truly need complete control over layout and fonts, consider using Adobe’s Acrobat to create PDF files. But your best choice is to revel in the advantages of HTML and hand control over to the reader.
If you’re using a picture to say something in relation to your text--for example, a thought balloon, or a bullet—you can include “alternate” text that does the same thing in text instead of pictures.
<IMG SRC="/Icons/LeftArrow.gif" ALT="===> ">
If you’re using a picture as a link to somewhere else, put the name of the link in the alternate text!
<IMG SRC="/Icons/Shuttle.gif" ALT="[Space Shuttle]">
If you’re using the picture to supplement the text, for example, a chart, let them know what they’re missing. If they need to, they can download the chart and view it the hard way.
<IMG SRC="/Icons/President.gif" ALT="[Hairstyle/Attitude Chart]">
If you’re using the picture to replace text, put that text in the ALT!
<H1 ALIGN=CENTER><IMG SRC="rest.gif" ALT="Web Design for the Rest of Them"></H1>
Conserve for speed.
If you re-use your pictures, you can greatly speed up your load times.
If you have a picture, such as a logo, that appears on every page, call it from the same place every time. The browsers will load it the first time the user accesses your site, and from then on, they’ll only load it if the image itself has changed. But if you put that image into the same folder as each web page, browsers will see the image as a completely separate image, and reload it every time. This can be a major hit on performance. Remember that you don’t control more than a tiny, tiny fraction of the factors that contribute to how fast your pages load on someone else’s browser.
If you have a button bar that appears at the bottom of every page, and one part of the button bar changes but the rest remains the same, separate the parts out.
There is no server-side imagemap in Lynx.
Character-only browsers and browsers on slow connections aren’t going to be viewing your imagemaps. If its a map of the United States, with each state a different link, you aren’t going to be able to do anything about it except put a list of all the states elsewhere on your page.
If it’s a collection of squares, as most imagemaps are, consider not using an imagemap at all. If you actually use the separate squares as separate pictures, this
- allows you to add alternate text for each part of the total picture;
- allows Lynx users to access the information much more easily;
- and it allows you to ensure that the entire collection of images appears on the page, instead of rolling off the right when the reader has their page too small.
If you can’t use separate squares, consider at least using client-side image maps. If the browser can’t load the image, it can still provide a list of options from the map information.
