Cross-Platform Browsing Pages -- Advice for Web Authors

by Bob Baumel

My Cross-Platform Pages

The first two of these pages contain advice for web authors. The third contains advice for both web authors and Mac users on combating a common problem involving readability of Arial font in Macintosh web browsers:

Help with HTML

Some useful references in learning and using HTML:

Regarding the last link listed above, it's useful to remember that many people browse with graphics turned off (due to slow downloads), or actually use the Lynx text-only browser. Also, visually-impaired people use a text-only browser linked to systems that 'speak' the text. So, it is highly desirable to make sure your pages work properly in a text-only browser. In fact, if you are serious about supporting people with such browsers, you need to test your pages using a Live copy of Lynx, not just a Lynx Viewer as listed above. For information, see the

Web Graphics Info

Some sites with useful information on preparing graphics for the web:

A key issue is deciding which graphics format to use: GIF with the browser-safe color palette, GIF with an adaptive color palette, or JPEG format (The PNG format is still another choice, but isn't supported yet by many of the browsers in use, so should currently be avoided). The basic issue is always to produce graphics with adequate quality for this medium, but in as small a file as possible to minimize loading time. There are tricks for optimizing web images using various graphics programs. For GIF images, the free GIFWORKS site can help you shrink file size.

It is important to always use WIDTH, HEIGHT, and ALT attributes in every <IMG> tag. The ALT text is for non-graphical browsers or for people who have graphical browsers but have graphics loading turned off. See Cari Burstein's guide in the HTML section above for advice about suitable ALT text. Specifying WIDTH and HEIGHT for every graphic will speed up display of the page. Remember to always specify both WIDTH and HEIGHT of all graphics on the page--even those tiny decorative bullets, horizontal rules, etc.

In nearly every case, the WIDTH and HEIGHT specified in the <IMG> should match the exact size of the graphic. A common mistake is to use a large (in both file size and pixel dimensions) graphic, and then set WIDTH and HEIGHT in the <IMG> to display it smaller on the web page. When this is done, the original (big) graphic file gets downloaded from the web server to user's browser; then, the user's browser must resize that big graphic on the fly to the width and height specified in your HTML. This creates two problems: Your page will be slow-loading because it's the original (big) file that gets downloaded; also, the result usually looks pretty bad because most browsers produce poor results when resizing graphics on the fly. The correct strategy is to "pre-shrink" the graphic to exactly the desired size using your graphics software; then set WIDTH and HEIGHT in the <IMG> to the exact size of your pre-shrunken graphic. If you're not sure of the exact dimensions of your graphic, but you have Netscape, simply open the graphic file in Netscape; the pixel dimensions will then be displayed in the title bar at the top of the browser window (Unfortunately, most versions of Internet Explorer don't do this).

Is it ever legitimate to set WIDTH and HEIGHT in the <IMG> different from the actual size of the graphic? This is sometimes reasonable when the graphic is just a dot, one pixel wide by one pixel high; then you can set WIDTH and HEIGHT to expand it to a solid-color rectangle of any desired size. Each of the following seven images is a one-pixel dot, but the HTML of this page instructs your browser to expand it to a 20x20 pixel square:

Single-Pixel Images
[Transparent] [Red] [Green] [Blue] [Cyan] [Magenta] [Yellow]

Here, the leftmost image is transparent (not white). Transparent rectangles are sometimes helpful for controlling spacing of items on a page. These graphic files are tiny--just 43 bytes for the transparent dot and 35 bytes for each colored dot--so they take very little time to load. If you'd like to copy these files for use on your pages, you are welcome to do so (If using Netscape or Internet Explorer, right-click [Windows or UNIX] or click & hold [Mac] on the graphic to display the pop-up menu for saving it to disk).


My Other Cross-Platform Pages:

[Best Viewed with Any
Browser]

This page by Bob Baumel: Home page |
Last revised 2000-08-04