Navigation Bar

Home - Guide Search Table of Contents

Technical Guide

Introduction

Site Structure

Navigation

Page Layout

Color

Formatting Text

Images

Multimedia

HTML Code

Bibliography

Images

Understanding GIFs and JPEGs

The two commonly used image file formats for the Web are GIFs and JPEGs. GIF files are 8-bit color files (256 or fewer colors) and support transparent color, interlaced graphics and animation (see, GIF Animation, p. 21). GIFs are a good choice for images with large areas of homogeneous color. They are not good for complex pictures with lots of subtle shades and fine textures.

Using image-editing software, the GIF file format allows you to choose one color from the image (usually the background color) and make it transparent or invisible. However, be aware that if the background color occurs elsewhere in the image, you may end up with little "holes" in your image. If the graphic has anti-aliased edges (i.e. pixels of intermediate colors along the edges to "smooth out" the shape) you may get a halo effect around the graphic on the Web page. This effect can be reduced if you color the background of the graphic as close as possible to the color of the Web page on which you want to use it.

Web browsers display non-interlaced GIFs one line at a time and gradually build the image from top to bottom as it is downloaded. With interlaced GIFs a low-resolution version of the whole graphic is displayed while the file is downloading. As the file continues to download the graphic becomes sharer until complete. As opposed to waiting for the whole graphic to download line by line, viewers often appreciate the quicker delivery of this low-resolution preview.

Unlike GIFs, which are restricted to 256 colors, JPEG images are full-color images (24-bit color or "true color"). They provide good graphic compression and a choice in the degree of compression. This choice enables smaller file sizes but not without compromising picture quality. JPEGs are the best choice for photographic images, art work and complex illustrations where color and picture quality are of utmost importance. JPEGs are not good at handling hard-edged, brightly colored graphics with large areas of flat color and textual elements. They do not support transparency or interlacing.

File and Image Size

Web designers are always faced with the challenge of balancing picture quality with downloading time. In general, remember, the greater the number of colors and the larger the image size, the larger the file size. Image size should not exceed 595 pixels wide to prevent users from having to scroll horizontally. When an image file size exceeds 35k it may be wise to place a smaller or thumbnail version of the image on the page and link it, or a text reference, to a larger version. When doing this, be sure to provide the file size so that users will know if they should expect a long wait.

All image elements should contain height and width attributes. Specifying the height and width of the image will allow the browser to reserve space for the graphic, and lay out the Web page and display the text before the graphic has downloaded. The user can thus begin reading the page while the graphics are being downloaded.

Another important attribute of the image element is the "alt" tag. The "alt" tag is used to specify a word or string of text that is displayed before the graphic is downloaded. The text is displayed instead of the graphic for text-only browsers or for users with image downloading turned off to decrease downloading time. The text is also interpreted by speech-based browsers. Always provide a meaningful "alt" tag for every image used.

Useful image element tags that assist in the layout of the image on the page are: align (top, middle, bottom, left, right), vspace and hspace (used to define the amount, in pixels, of vertical and horizontal white space surrounding the image).

Careful HTML coding of an inline image would look something like:

<img src="images/bonavista.gif" height="185" width="300" vspace="6" hspace="6" alt="Scenic view of Bonavista">

Top of Page

Navigation Bar
Site Logo