Yale C/AIM Web Style Guide

Contents

Web Graphics

Introduction

Color display primer

Graphic file formats

Interlaced GIF

Transparent GIF

JPEG graphics

Summary-File formats

Illustrations

Optimizing graphics I

Optimizing graphics II

Height & width tags

Colored backgrounds

Imagemaps

If you put HEIGHT and WIDTH tags into your HTML image source tags, the information tells the browser how much page space to devote to the graphic. Thus the browser starts to lay out your Web page even before the graphics files have begun to download. This does not speed up the downloading of the graphics (nothing but a faster data connection can do that), but it does allow the user to see the basic page layout quickly. When you supply the HEIGHT and WIDTH of page graphics the browser will often fill out the text blocks first, then "pour" the graphics files into the spaces allotted. Thus the user can start to read your page while the graphics are downloading. All of the graphic references in this style manual include height and width tags.
The HEIGHT and WIDTH tags are additions to the basic image source tag:

<IMG SRC="picture.gif" HEIGHT="30" WIDTH="475">

For best performance, make sure all of your image source tags include height and width information (even for small button graphics).

Note that the examples below only work well the first time you try them. After that your browser will probably cache the images locally, and subsequent loading will occur (very quickly) from your hard disk, not from the Web. Both example photographs are interlaced GIFs (300 x 409 pixels).

Load an image without HEIGHT and WIDTH tags

Load an equivalent image with HEIGHT and WIDTH tags
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.