Using Images Effectively


    Using Alt= with your images

    When should we use an alt tag? (always is best) Whenever the image you are portraying is either not explained elsewhere on the page, and especially if the image contains text information.

    If you are using an ALT tag on buttons, put spaces in the ALT tag to separate them from nearby buttons. For example, instead of this:

    <img src="home.gif" alt="home">

    do this:

    <img src="home.gif" alt=" [home] ">

    Why do we do this? Consider this HTML:

    <img src="prev.gif" alt="prev">
    <img src="home.gif" alt="home">
    <img src="next.gif" alt="next">

    would appear as "prevhomenext" in Lynx. Contrast this with the use of the "fancy" method:

    [prev] [home] [next]

    Daniel Freeman -

    Load documents faster

    Some web browsing programs will wait until an image file has loaded to place the image before continuing to get the rest of the document information.

    Making use of the height= and width= elements will avoid this problem, and allow the progam to load text information more quickly, showing it before the image has loaded completely.

    Interlaced Gifs

    An image which appears at low-res, and slowly becomes more detailed is most likely an interlaced GIF file. Interlacing allows a user to get an idea more quickly of what an image will look like.

    • Other formats, such as progressive jpeg files, can support this feature -but are less common.
    • Interlacing should be avoided with transparent gifs (see below)

    Using Transparent Gif Files

    If when viewing a transparent GIF file, it appears "messed up" check to see if it has been interlaced. Some browsers are known to have problems displaying interlaced transparent GIF files. To prevent this problem, simply use the non-interlaced option when creating transparencies in your GIF images.

    Controlling image file size

    Large images are bandwidth hogs, and a major buzzkill for people on slow connections.

    There are many people who will not stick around waiting for a large image to load, preferring to move on to a faster loading page. If you don't want to scare off viewers (and who would?) avoid these large files, or use a small thumbnail image and link to allow viewers a choice in whether or not they want to spend the time to download and view the large image file.

    Shrinking Gif files

    I've seen a GIF go from 80K down to 15K using the method of posterization, available on any good graphics editing utility. This process merely groups colors which are close to one another into the same color. The amazing thing is that the smaller GIF, if shown side-by-side with the original, is almost indistinguishable.

    How does it do this magic? Many times, a scanned image will have a dark region which appears to the naked eye to be "black." However, the actual file contains a thousand gradiations between "jet black" and "raven black"--and all those tiny invisible nuances have to be saved in the file. Of course, this isn't just true for black but for all colors in the image.

    Not all posterization attempts leave the image virtually the same. Posterization does a butcher-job on gradients (fading from one color to another).

    Daniel Freeman -

    Image formats

    Currently, there are two main types of image formats on the web. To use them most effectively, it is important to know the features and limitations of each.


    • Limited to 256 different colors
    • Support for features like interlacing, animation, and transparency


    • Lifelike color
    • Variable compression
    • Good for photographs, may distort text and sharp edges.