There are many types of graphical and textual content
that simply cannot be reproduced using plain HTML,
- equations that use special characters
- text in non-European languages (Chinese, Japanese,
To represent these types of content, we typically use
bitmapped images. A bitmapped image is simply a series of
colored squares which appear to be an image when laid out
in a grid. When we work with graphical content sent by
contributors (ejournal editors, etc.), a graphic is either
delivered in a usable form, must be converted somehow.
Other graphics (logos for new sites, etc.) must be created
from scratch. Each of these possibilities is covered
Currently, there are three supported formats that can be
displayed as part of every web page:
- CompuServe GIF (.gif)
The GIF format, developed by CompuServe, is best used to
store screen-quality images that do not contain many
colors. GIF files are typically very small, but cannot
reproduce the range of colors necessary to reproduce
photographic images (use the JPEG format instead -- see
- JPEG (.jpg)
The JPEG format is primary used to store photographs.
JPEG is a "lossy" format, meaning that some image quality
is sacrificed in order to produce much smaller files.
Images of higher quality should be stored in TIFF format
instead (see below). Non-photographic images such as
graphs and charts will be smaller if stored in GIF format
instead (see above).
- TIFF (.tif)
The TIFF format is an archival format, meaning that it does
not sacrifice image quality in order to reduce file sizes.
TIFF images are excellent for storing detailed, high quality
images. However, TIFF files tend to be much larger than either JPEG or
GIF images, and cannot be opened using most web browsers without
installing and configuring additional viewing software or plugins.
- PNG (.png)
The PNG format is an open standard developed to replace
the Compuserve GIF format. Like GIF files, low-color
images stored in PNG format are typically quite small.
Unlike the GIF format, the PNG format can also be used to
store high-color images, which means it is also suitable
for storing photographic content. The PNG format is not
as widely supported as the JPEG or GIF formats, but its
popularity is growing.
If an image is not in any of these formats, it will need
to be converted. For more information on converting images,
visit the section of the handbook dealing with Photoshop. There is also a
page dealing specifically with converting
graphics from a Word document.
A bitmap image is stored with an indication of how many
pixels should be displayed in an inch of output one pixel
wide. This number is called the resolution of the image.
The higher the resolution, the more disk space an image
will require to store, and the more memory an image will
require when loaded as part of a web page. Print resolution
is generally 300 dpi or higher. Typical screen resolution
is 72 dpi, so an image stored at 300 dpi will be
approximately four times larger than expected when
displayed as part of a web page. This is why print-quality
images must be resized before they can be included in a web
page. For information on resizing images, check out the
section of the handbook dealing with Photoshop.