Introduction to HTML Design, Part II

This assignment was part of a technical writing class taught at Georgia Tech during 1996-96. I no longer update it but thought the information might be useful to some.

IV. Managing Images

Large images take up considerable bandwidth and can take a prohibitively long time to load over a slow network connection or over a modem. Given the fact that the average person gets annoyed if a computing task takes longer than 20 seconds, the designer should minimize the use of large images and reduce the size of those images where possible.

Some strategies:

1. Size your graphics. Most computer monitors display 640 x 480 pixels on a 13 to 15-inch monitor (your screen is made up of small points called "pixels"). The Macintosh and Windows versions of Netscape and Mosaic both default to a window size that limits the horizontal display to about 500 pixels.

   Some designers say that to prevent spill-off of top title banners or other wide graphics, you should limit the horizontal measurement of the graphics to 472 pixels. I think the size of your banner depends on your audience--if your audience will contain folks who are unskilled at computers, then they won't know how to resize a window and you should keep your banner to 472 pixels. But, given that many users have nice big monitors and like to open up their browser windows wide, it seems silly to restrict the banner width if you know your audience can resize a window.

2. You should interlace GIF images by saving them in the GIF 89a format (a newer GIF format--the older is 87a). We'll talk more about what makes a GIF a GIF in a moment, but for now just remember that some images files have the file extension .gif--for example, Buzz.gif

   An interlaced GIF first makes a quick pass, displaying a rough version of the image, and then progressively fills it in. It creates a venetian blind effect and gives the viewer a quick view of the image and immediate access to text and links. Compare an interlaced image to a non-interlaced image.

   • Mainstream image editing programs like Adobe Photoshop can save images in 87a GIF format, but do not yet support the 89a GIF file format.

   • WWW designers who use Macs can employ the shareware program GIF Converter to convert GIF files from non-interlaced (87a) to interlaced (89a). In GIF Converter, pull down the file menu and select "Save As..." This box will display:

     

     Click on the "Options" button, and another window will display:

     

     Check the "Interlaced" check box and save the file.

     GIFConverter is located at: Library Cluster/Utilities/Graphics & Animation.

     Check the English 3020 folder for other utilities. Graphic Converter converts files across formats and platforms. It also allows you to edit files.

     Screensnap lets you take pictures of your computer screen (useful for program manuals). To take a screen-wide picture of your screen, use Apple's built in feature: Shift-Command (the Apple key)-3. A PICT file will be stored to your hard drive.

     Shareware graphics programs for Windows machines include LViewPro and WinJPEG. These can be downloaded off the Web. Then, there are commercial products like Corel Draw and Photoshop.

3. Specifying the height and width of images allows a browser to determine the boundaries of an image without examining the whole image file. Maintain the same dimensions as your original image!

   <IMG HEIGHT = 140 WIDTH = 140 SRC = "square_image.gif">

   Do not use this command to display a large image in a small space. Not only will other browsers ignore the "height" and "width" attributes, but you will also likely distort the image and it will certainly take longer to load. Resize the image in a graphics program like Photoshop or GIF Converter.

4. Use images with fewer colors. You can achieve an appealing effect without photographic quality.

5. Use the "ALT" option to accommodate users with text browsers.

   For example: <IMG SRC = "ball.gif" ALT = "*">

V. File Formats: GIF v. JPEG

GIF	8-bit per pixel, or 256 colors Remember--a pixel is small dot on your screen. Each pixel has its own color defined by certain bits assigned to it--here 8 bits. Each bit has two options--0 or 1--so if you have 8-bits, you have 28 unique combinations and hence 28 or 256 colors. LZW compression scheme: takes all original data and compresses it by replacing strings of data.
JPEG	24-bits per pixel, or 16.7 million colors (224 = 16.7 million) JPEG compression: removes low priority info -- called lossy because you "lose" data.
GIF Advantages	Widely accepted Decompresses quickly Works best with images using small color palettes (small number of colors)
JPEG Advantages	JPEG files are smaller than GIFs (because you've lost info) JPEG supports true color 24-bit image representation and consequently handles images of photographic quality better (bec. you can store 16.7 million colors) Compression scheme is in public domain. Compare the resolution and load time of this Hogarth JPEG (73K) and the same print as a GIF (205K).
GIF Disadvantages	Dithering (approximating a color) is needed to create colors beyond the 256 color palette. This can noticeably deteriorate the quality of an image. Because GIF supports (knows about) fewer colors, when you display multiple images, you can run into palette conflicts. Compression scheme is copyrighted.
JPEG Disadvantages	Lossy compression scheme reduces image quality Decompresses and therefore displays more slowly Fewer graphical applications support JPEG file format (changing)
Choose GIF	When audience's graphic support is unknown. When using graphics with smaller color palettes.
JPEG	When reproducing images over 256 colors (like photos). But see the Bandwidth Conservation Society's suggestions for downsizing photographic images. When using more than 5 images in a single page.

For more information (and some strongly expressed opinions!) on Web design, check out David Siegel's Web Wonk.