Home Page Construction Set / ERIC'S TIPS FOR WEB AUTHORS

Images

  1. Keep it simple and stupid. Instead of using fancy bullets (such as the ubiquitous colored balls) or creative horizontal rules, stick with the built-in widgets. It may save a few seconds of loading time and will look good on every browser.

  2. Don't insist on putting thumbnail pictures of the sites you are linking to. This used to be the rage, but it took forever to load then, and it still takes forever to load (Caution: many inlined images). It looks totally unprofessional, especially when the pictures or icons are not the same size. And the "broken or missing picture" icons that appears if your images are not available looks bad and distracts from your page.

  3. Don't be an image parasite. An image parasite is someone who inlines pictures from someone else's server rather than serving them himself or herself. This is a big no-no, unless the owner has given explicit permission for you to do so (for example, Netscape asks authors to load backgrounds from their server rather than downloading copies of them). Being a parasite is a Bad Idea (tm) because it burdens the host's server without the host getting any credit (or compensation).

    Don't think that you can get away with leeching, either. With the advent of referrer logs, it's possible for a Web author to determine which remote Web page is causing so many hits on his or her server. Armed with this information, you're likely to get a nasty piece of e-mail at the least. :-)

  4. Use the WIDTH and HEIGHT attributes in all <IMG> tags. One of the strongest features of advanced browsers is the ability to lay out and display text before images begin to load. That way, users can read text or follow links without having to wait for the document to load completely. If you do not put WIDTH and HEIGHT information for your images, then browsers must wait until they receive all the image information to figure out how to properly display the text.

    Rather than having to go through every picture on all of your pages and figure out the dimensions, try using a neat Perl-based utility, WWWis, that will automatically determine the sizes of all referenced images in an HTML document then alter the tags accordingly.

  5. Avoid inlining JPEG images. First, only the latest generation of graphical browsers supports inlined JPEGs, which means older browsers will not be able to see those images. Second, most browsers are used with 16- or 256-color displays, meaning the browser will dither your nice 24-bit graphics down to GIF-quality 8-bit depth. Third, you can't interlace JPEGs (see next tip).

    JPEGs are good for reducing the size of graphics files for faster transport, but your inline graphics shouldn't be very large to begin with (try to keep all inlines under 30 KB). Save JPEG images for large, high quality, linked pictures or for small, low resolution <LOWSRC> images (see Creating High-Impact Documents for details on using JPEGS in this manner).

  6. Interlace, interlace, interlace. If you use GIF images, you should interlace them. Interlacing allows the browser to display the image as it downloads. This gives the reader the impression that the picture is loading faster than it actually is. It also creates a cool visual effect: a fuzzy picture that "focuses" to a sharper and sharper image. For a demonstration, see Creating High-Impact Documents.

    There are several tools that will create interlaced GIFs from your boring and slow GIFs. GIFConverter (Macintosh) and L View Pro (16- and 32-bit MS-Windows) are easy-to-use utilities that also provide basic image editing and conversion functions. On Unix platforms, I recommend giftool.

  7. Give download information on linked pictures. For example, instead of:

    Add some useful information that will all the user to decide whether she or he can "afford" to download it:

    Without the extra information, the reader has no clue whether his or her browser can even display it (for example, Netscape cannot display TIFF files, while WebExplorer can) or how long it will take to download (1.3 MB takes significantly longer than 20 KB!).

  8. If you have an image archive, include thumbnails of all downloadable graphics. Few things are more frustrating than having to download every file in order to find the image you are looking for. It's a complete waste of time, network bandwidth, and money for readers to have to download the full sized files to browse your collection. Thumbnails will save time, and will improve the appearance of your pages if done correctly.

    For example, if I had a directory full of images, I might create a download page with entries similar to this one:

    [Thumbnail Graphic] The Home Page Construction Set's ultra-lame masthead graphic. Eric's simplistic interpretation of HTML source transformed into a rendered Web page.
    [16 KB, 320x200 GIF]

    Keep your thumbnails small (roughly 2-3 KB) and about the same size (don't forget to include WIDTH and HEIGHT in your <IMG> tags!). Quality doesn't matter as long as you can identify the images. You should also limit the number of thumbnails per page to around 10 or the next Ice Age could be here before the page is finished loading.

  9. Quantize the color maps in your images down to a standard colormap. This is an advanced tip; your ability to do this will depend on your access to color editing software and your desire to tinker with the dozens of colors that make up your images. If you've ever loaded a picture and the colors of your windows change to a unique combination of neon colors in the process or if an image displays completely different in a Web browser than in a graphics program, you've seen the effects of a colormap conflict.

    A conflict occurs when the number of colors requested by all screen elements (images, windows, desktop, etc.) exceeds the number of colors that can be displayed at once by your system. For most systems, this is 256 simultaneous colors. To resolve the conflict, the browser will either

    1. honor the colors requested by the image you want to display, causing the "neon" effect--the browser arbitrarily assigns existing colors to other elements in the screen, freeing up the colors needed to display the image, or
    2. dither the image. Dithering reduces the number of colors in an image by matching them to the existing colormap. This operation usually results in a displayed image with slightly different colors than the original one and/or a loss of image sharpness and quality.

    To avoid a conflict, you should try to have your images share a common colormap. This colormap should ideally be around 200 colors so as to allow enough free colors for the browser and system demands. Advanced image correction and editing software will allow you to change all of your images to a common color map. Even if you don't create a common colormap, try to reduce the number of colors in your images to avoid conflicts, either by directing your image software to save with a reduced colorset or by manually editing the colormap (for example, similar "white" colors should be replaced with a solid white).

    I recommend Adobe Photoshop (Windows, Macintosh), xv [FTP Directory] (X-Windows), and L View Pro (16- and 32-bit MS-Windows) to edit your image colormaps.

[ Previous Topic | Next Topic | Tips Table of Contents | HPCS ]

Last Modified: January 27, 1996
/ Eric Sasaki
esasaki@nyx.net (feedback welcome)

All original content Copyright © 1994-96 Eric Sasaki. All rights reserved.