An Introduction to Graphics Formats on the Web

Janet Daly

Photographs and illustrations are common on World Wide Web 
pages. Their visual appeal is one of the elements that have made the 
Web so successful.

To help publishers gain a basic understanding of issues related to 
online graphics, this article gives an overview of graphics formats for 
still images on the Web. It also offers pointers on how to choose the 
right format for your images. However, this isn't a how-to article. 
There's a steep learning curve involved in creating and manipulating 
computer graphics. If you plan to include graphics in your Web 
pages, you should either hire someone with experience or expect to 
spend many hours poring over software manuals and Web guides.

Bitmaps and Pixels
There are many graphics formats, and several new standards have 
been proposed. For now, the two main formats used to deliver 
images on the Web are GIF and JPEG. Both are "raster" or "bitmap" 
formats, which describe images in pixels (picture elements). A pixel 
is the smallest unit for storing information about an image.

The more pixels an image has, the higher its resolution. Resolution is 
measured in pixels per inch (ppi), often referred to as dots per inch 
(dpi). A 72-dpi resolution is adequate for images that will be 
displayed on monitors.

Graphics files are also described in terms of pixel depth, which 
determines the number of colors that can be displayed. Without 
getting into the math, an 8-bit graphic can display up to 256 colors (a 
palette often referred to as indexed color). A 24-bit graphic can 
display over 16 million colors.

As resolution or pixel depth increases, file size increases - sometimes 
geometrically. With Web graphics, it's important to keep your files 
small - preferably below 40K - so that they don't take too long to 
download. To keep file size in trim, you may have to sacrifice image 
quality. Most people who browse the Web are comfortable with 
graphics of average quality.

The GIF Format
GIF stands for Graphics Interchange Format. It is the predominant 
graphics format on the Web, one that all browsers and helper 
applications recognize. GIF is an 8-bit format, although a 24-bit 
version has been proposed. The GIF format uses the LZW compression scheme, 
which reduces file size without loss of image quality.

GIF files can be displayed "inline" - that is, as a component within a 
Web page rather than as a graphic that launches in a separate window.

A variant of the GIF format, GIF89a, lets you assign one color as 
transparent, so that the background color of your graphic is the same 
as the color of the browser window.

To learn more about transparent GIFs, see

http://melmac.corp.harris.com/transparent_images.html

You can also create an interlaced GIF. Interlaced GIFs deliver images 
to the browser in stages - first providing a skeletal image, then filling 
in until the image is complete. The benefit is that readers don't have to 
wait for the entire image to download before they can view other 
parts of the page.

The JPEG Format
JPEG is the acronym for the Joint Photographic Experts Group. This 
group developed the 24-bit JPEG format especially for photographic 
reproduction.

JPEG offers a range of compression options, with a trade-off between 
image quality and file size. Higher compression results in more 
information about the image being lost. It may take some trial-and-
error testing to decide what compression level works best for your 
files. To get a sense of the trade-off between file size and quality, 
see the Web page at

http://home.netscape.com/assist/net_sites/impact_docs/e-jpeg.html

JPEG does not support transparency or interlacing, and inline JPEG 
files are not supported by all Web browsers (they are supported by 
Netscape).

To find out more about the JPEG format, check the Usenet JPEG FAQ 
(Frequently Asked Questions) at

http://www.cis.ohio-state.edu/hypertext/faq/usenet/jpeg-
faq/top.html

GIF or JPEG?
Now comes the choice: GIF or JPEG? The consensus is that GIF is best 
suited for line art - charts, illustrations, and logos. However, it 
can be used for photographs, especially if you want them to have a 
transparent background.

JPEG, in the words of its developers, "is designed for compressing 
either full-color or gray-scale images of natural, real-world scenes. 
It works well on photographs, naturalistic artwork, and similar 
material; not so well on lettering, simple cartoons, or line drawings." 
These are the primary guidelines for choosing between GIF and JPEG. 
You may need to take into account additional considerations:

* If you want to include inline graphics and be sure that everyone 
with a graphical Web browser can see them, save your files in GIF 
format.

* If file size must be kept to a minimum, JPEG offers more 
compression power than GIF, although with trade-offs in image 
quality. To get a sense of how GIF and JPEG images compare in terms 
of file size, see

http://www.xmission.com/~mgm/gif/jpeg.html

* If high-quality photographic reproductions are essential to your 
page, save them in JPEG format. Keep in mind that it's good etiquette 
to first display a smaller version of the image that transfers quickly, 
and to make that smaller image a "hot link" to the larger, better-
quality file. This gives viewers the choice of whether or not to 
download the larger file.

Communicating with Those Who Can't See Graphics
Some readers of your Web pages may be using text-only browsers or 
may be visually impaired. To help them interpret your images, be 
sure to code alternate words for them. For details, see

http://web.mit.edu/cwis/faq/alt.html

Getting Help
Contact MIT's Campus Wide Information Systems (CWIS) team if you 
have questions about creating graphics for the Web or need help 
with tools and resources. You can reach them by sending email to 
<cwis help@mit.edu>.