Last updated: October 29, 2002

Icons and Images

Image Formats

Icons and images should be stored in either PNG (.png), GIF (.gif), or JPEG (.jpg) format. In general, the PNG and GIF formats should be used for hand-drawn graphics, or images with lots of solid color areas, and the JPEG format should be used for photographs. PNG is a fairly new format, which came into use due to the patent restrictions on the GIF format. It was not supported in early browsers, but since Netscape 6.x and 7.x, Internet Explorer 5.x and 6.x, and Mozilla web browsers all support PNG, one should consider translating their existing GIF images to this format, and to use PNG for all future graphic images.

To convert a GIF image to a PNG image, use a command such as this:

/util/netpbm/bin/giftopnm < pic.gif | /util/netpbm/bin/pnmtopng > pic.png

Image Locations

In general, icons should be placed in the same directory as the HTML documents that reference them. In the case of icons that are referenced from many web pages, consider placing them in a top-level directory with a name such as "images".

Image HTML Code

It is recommended that any time an IMG tag is used in a document, the HEIGHT and WIDTH elements should be specified in it, as web browsers can use this information to optimize the display over slow connections.

For accessibility reasons, the ALT tag should always be used to specify a text replacement for the image. This text shows up when:

When using accessibility features;
Using a non-graphical browser such as lynx;
When the image can't be found; and
While waiting for the image to download on a slow connection.

In most browsers, the text in an ALT tag is displayed when the mouse hovers over the image. Mozilla 1.0 changes this behavior, and only displays ALT text when the image is not displayed. Another tag, TITLE, should be used to display "hover" text.

Examples:

<IMG SRC="/icons/back.gif" ALIGN="TOP" HEIGHT=40 WIDTH=40
        ALT="The Back Button" TITLE="Go back to the previous page">

<IMG SRC="/icons/UBiquity_Banner.jpg" ALIGN="MIDDLE" HEIGHT=179 WIDTH=566
     BORDER=0 ALT="UBiquity Banner Image"
     BORDER=0 TITLE="The UBiquity Distributed Computing Environment">

These display as:

Image Sizes

The size of images (in bytes) should always be considered, as many students and faculty log in from slow-speed PPP links. One way to reduce the size of an image is to reduce the number of colors, such as with the "ppmquant" command. Example:

giftopnm file.gif | ppmquant 16 | ppmtogif -interlace newfile.gif

This will reduce the number of colors in the image to 16. Note the use of the "-interlace" option; this will cause the image to be displayed progressively, which is visually pleasing over slower connections. Note that the tools shown above are part of a package known as "NetPBM" (formerly "PBMplus"). To use these tools, you must should these variables set in your .aliases file:

setenv PATH    /util/netpbm/bin:${PATH}
setenv MANPATH /util/netpbm/man:${MANPATH}

These commands will also let you view the on-line manual pages via commands such as "man ppmquant".

Finally, for a good collection of free images, click here.

Please click here to return to the advanced web page page.