[Previous] [Next]

The World Wide Web (WWW)

The only medium that is more congenial than FTP and Archie for locating and distributing graphics files is the World Wide Web (WWW). For graphics files, the Web offers the same basic service as FTP archives. In fact, many sites that grant access to graphics file archives using an FTP server also grant access to the same archive using a Web server. In this case, you may browse directories and download graphics files using your Web browser much the same way you would using FTP.

The added beauty of the Web is its graphics capabilities. Web browsers allow you to view files as you download them. And with some extra work, the Web server maintainer can provide thumbnail images of each file embedded in the Web page, so you can see what the image looks like before you decide to download it.

Another wonderful feature available in Web browsers is the Web Search. You can perform a search across the Web on a key word or phrase to help you locate information. Performing a search using the key phrases "file format", "graphics file", or "file archive" will turn up hundreds of pieces of information, most of which will probably be of interest to you.

For a list of some of the Web sites of most interest to graphics programmers and others interested in graphics files, see "Internet Graphics Resources" later in this appendix.

The following sections present some Web basics and describe ways you can use the Web both to retrieve graphics files and to embed them in your own Web pages.

Web Basics

The World Wide Web is a set of software programs called Web clients and Web servers. Servers contain information stored on disk, which they make available on the Internet. Clients (commonly called Web browsers) connect to the servers using a special networking protocol and retrieve the server's information. The networking protocol used by Web clients and servers is called HyperText Transfer Protocol (HTTP). HTTP is a protocol that does the following:

  • Enables a client to connect to a server.

  • Allows the client to request a piece of data (called a Web resource).

  • Provides the server with the ability to transfer the requested data to the client.

  • Enables the server to close the connection once the transfer has been completed.

Each time you click a new item on a Web page, your Web browser opens a connection to the specified Web server, makes a request for a Web resource (such as an image file), receives the resource (you hope!) from the Web server, and renders, displays, or plays the file on your local workstation.

The data that is delivered to your Web browser across the HTTP link is a MIME file. This file is a wrapper containing all of the data belonging to the requested resource.

A Web browser will immediately begin displaying the resource information as it is received. The information stored first in the MIME file is a textual description of the resource data. This description is known as the Web page and is stored using a format description language known as HyperText Markup Language (HTML). HTML is a standardized language developed specifically for applications-level communications between Web clients and servers. While HTTP negotiates the transfer of data between client and server, it does not care what that data actually is. HTML is the actual hypertext data being transferred between the clients and the servers.

HTML contains the hypertext structure and format of the Web page and the links to other Web resources. HTML is, however, only a framework built from text. Graphics, sound, video, and other non-textual data are not actually part of the HTML text. They are instead separate files that are referenced as MIME attachments. When the attachments are graphics data, that data is stored and transported using graphics file formats.

Graphics on the Web

For most of its history, the Internet has been a character-based communications channel. But in 1993, the National Center for Supercomputing Applications (NCSA) released Mosaic for X (v0.10) and changed the face of the Internet forever. Mosaic is a Web browser that is not only easy to use, but also supports the display of images embedded in the text. Prior to the release of Mosaic, Web browsers were character-based, able to display hypertext links only as blue or underlined words. Graphics data could be downloaded as files by a text-only Web browser but not displayed in a useful way.

Mosaic was the first graphical Web browser. Like character-based browsers, it was a piece of communications software, capable of interpreting and displaying HTML information. But Mosaic was built as an application under the graphical user interface (GUI) of MIT's X Window System. Mosaic presented an easy-to-use menu and a scrollable and resizeable window in which to display the retrieved text (the Web page), and it supported inline graphics. Now there are a number of other Web browsers, and Netscape Navigator at this point is the most popular. All graphics data on the Web is packaged using standard graphics file formats--the same ones in use throughout the rest of the computer industry. The three formats supported by all Web browsers today are GIF, JPEG, and XBM:

  • GIF files are used for storing graphics containing up to 256 colors, such as line drawings, cartoons, and simple color and gray-scale graphics and photographic images.

  • JPEG files are used for storing up to 16- and 24-bit photographic and photorealistic images.

  • XBM files, a part of the legacy inherited from the original X Window implementation of Mosaic, is an ASCII file format used for storing monochrome data only.

GIF is the format used for most Web graphics. GIF was created by CompuServe specifically as a serial graphics data transmission format, exactly what is used by the Web. GIF uses an efficient, if legally encumbered, method of data compression that results in reasonably small files. (For information about these legal encumbrances, see "Legal Issues" below and also the discussion in the section called "LZW Legal Issues" in Chapter 9, Data Compression).

GIF images are always displayed as inline graphics. That is, GIF images appear embedded in the text of the Web page itself. JPEG images, however, are displayed as external images in a separate window. An extension added to HTML 2.0 allows JPEG images to be displayed as inline images as well. This capability has been added to many Web browsers and it is expected to be a standard feature in HTML 3.0.

Graphics images may be an active part of your Web page, serving as the selectable items in a menu, or even as an entire menu itself. Other images may be the actual data you are retrieving, such as images from a database or an image file archive. And graphics images may only serve as pretty wallpaper-- something to please the eye rather than to download or actively interact with.

Embedding Graphics Files Using HTML

Only a single line of HTML code is required to embed an inline image in the source code of a Web page. This is accomplished using the <IMG> tag in the HTML language. Here is an example of an IMG tag that displays an inline image stored in a file called logo.gif :

<IMG SRC="graphics/logo.gif">

The image stored in logo.gif will appear wherever this statement appears in the HTML text. You can set certain attributes associated with the IMG tag to control how the image is displayed--for example:

<IMG SRC="graphics/logo.gif" ALIGN="TOP" WIDTH="150" HEIGHT="75">

Looking at this statement from left to right we see the following:

  • IMG indicates a tag containing the source file.

  • ALIGN indicates the alignment of the image with respect to adjacent text on the page.

  • WIDTH and HEIGHT indicate the size of the image, allowing the Web browser to fully display the text of the page before the image data is received.

In the above example, the file logo.gif resides on the same server as the Web page source. However, a graphic used in a Web page need not reside on the same Web server as the page that references it. For example, if the logo.gif file were on another Web site we could reference it as follows:

<IMG SRC="http://www.ora.com/textonly/logo.gif" ALT="Welcome!">

This example references an image file located on a machine with the named address www.ora.com. When this HTML statement is executed, an HTTP link is opened to the specified server, and the image resource is requested, transferred, and displayed.

This example also contains the ALT attribute, which specifies a string of text to display if the Web client cannot display graphics images (such as the text-based Lynx Web browser). Without the ALT attribute, the image would be represented by the default string "[IMAGE]". In the above example, the image stored in logo.gif would instead be represented by the text "Welcome!".

External images are referenced using the anchor <A> tag, as follows:

<A HREF="iaido.jpg">Fast draw and cut</A>

This example creates the underlined and highlighted line of text "Fast draw and cut" on the Web page. When you click on this line, the image file is retrieved from the Web server by your browser. This image may then be viewed or saved to disk as a file.

We can replace the text with a reference to an inline image. Now we have a thumbnail image that, if clicked on, will download the image:

<A HREF="iaido.jpg"><IMG SRC="iaido-thumbnail.gif"></A>

Of course, we can have both an inline image and text together:

<A HREF="iaido.jpg"><IMG SRC="iaido-thumbnail.gif">Fast draw and cut</A>

So far, we've shown only examples of linking to static images. You can view or save such images, but you don't really interact with them. The most common type of interactive graphics that you will find on a Web page are called clickable images.

Clickable graphics allow users to select a region of a graphics image just as they would select a push button or a menu item. This process is described as clickable because the selection is made using a point-and-click device, such as a mouse or another pointing device.

To make a graphics image clickable, you need to construct a pixel coordinate map of the image. This click map specifies the clickable regions of the image in pixel coordinates. Clickable regions may be described as circles, rectangles, polygons, or single points. Each clickable region is also assigned a URL (Uniform Resource Locator) to reference when that region is selected.

Once the map has been created and is in place, you need to add two tags to your HTML document that reference the image and its map:

<A HREF="/bin/cgi/maps/mainmenu.map">
<IMG SRC="/textonly/mainmenu.gif" ISMAP>

These HTML statements associate the map and the graphics file and display the graphics. The user is then presented with a graphics image to be used as a point-and-click menu. But what about clients who access the Web site using non-graphical browsers? How can they access this menu? The simple answer is "They can't." But you can display a text menu that both graphical and non-graphical Web browsers can use:

<A HREF="/bin/cgi/maps/mainmenu.map">
<IMG SRC="/textonly/mainmenu.gif" ISMAP>
<A HREF="back.html">Back</A>|
<A HREF="home.html">Home</A>|
<A HREF="search.html">Search</A>

These additional statements will display a three-item menu under the graphic that will be visible and clickable by both graphical and non-graphical Web browsers. These statements are not physically attached to the IMG tag. They are placed to appear just after the image, so the eye naturally associates them with the menu image.

If you have ever wondered what the HTML code for a particular Web page looks like, you can select your Web browser's View/Source menu item and see for yourself. You can also save the text of any Web page by using the browser's File/Save As command. These are very useful tools for anyone who is learning HTML.

Web Browser Helper Applications

All Web browsers have the ability to display HTML text, inline GIF images, and external XBM and JPEG images. (Many browsers also support inline JPEG images.) In fact, a browser will display or play back any type of data that it is configured to recognize. Because many of the resources on the Web are made of data such as audio, video, and PostScript, it is therefore important to know how to configure your Web browser to recognize as many types of data as possible.

A Web browser may be initially configured in such a way that it does not display or play back any unrecognized information that it receives. You will, however, want to configure your browser to ask you what you want to do with any unrecognized data. That way, you will at least have the option of saving the data to a file. You should also have the option of having the data sent to an external program that is capable of displaying it or playing it back. Such external programs are called helper applications.

When you configure a browser to use a helper application, you are creating an association between an external application and a type of data. Whenever the browser receives data of a recognized type, it automatically launches the associated helper application to display or play back the data. This transparent operation allows uninterrupted viewing of any HTML document that contains links to many different types of data.

The browser identifies all of the data it receives by the data's MIME type. Remember that all data received by your Web browser is in the form of a MIME mail message. Each section of data in the message has a tag called a MIME type, which describes the type of data stored in the message. The Web browser reads the MIME message and compares the MIME type tag in each section of data with a list of associated helper applications in a file. If the MIME type association is found, the data is sent to the associated helper application.

The MIME type of a file is assigned to the message by the Web server to which your client has connected. If you are accessing local files, or files via FTP, your browser will attempt to determine the data type from the file's extension. The number of data types supported by a Web server can be very extensive. For example, Table A-1 lists the MIME types supported by the Netscape client for X Window:

Table A-1: Netscape MIME Types (for X Windows)

MIME Type/Subtype





Fractal Image Format



Macintosh BinHex Archive


exe bin

Binary Executable


ai eps ps

PostScript Program



Rich Text Format






C Shell Program



TeX DVI Data



GNU Tape Archive



LaTeX Document



Bourne Shell Program



UNIX Shell Archive



Macintosh Archive



UNIX Tape Archive



TCL Program



TeX Document


texi texinfo

GNU TeXinfo Document


t tr roff

TROFF Document



TROFF Document



TROFF Document



UNIX Manual Page



Zip Compressed Data


au snd

ULAW Audio Data


aif aiff aifc

AIFF Audio



WAV Audio



Compressed Data



GNU Zip Compressed Data



CompuServe Image Format



IEF Image


jpeg jpg jpe

JPEG Image


tiff tif

TIFF Image



CMU Raster Image



PBM Image



PBM Image



PGM Image



PPM Image



RGB Image



X Bitmap



X Pixmap



X Window Dump Image


html htm

Hypertext Markup Language


txt text

Plain Text


mpeg mpg mpe

MPEG Video


qt mov

Quicktime Video



Microsoft Video



SGI Video

Most books on HTTP and the World Wide Web contain extensive information on helper applications. A great deal of information is also available on the Web itself on this subject. (Perform a Web search on the key phrase "helper applications" and see for yourself.) We advise you to take a look at a Web page containing links to software archives that collect helper applications, such as:


Tips for Including Graphics on Web Pages

Here are some tips for using graphics on Web pages:

  • Use graphics sparingly on each page. Too many images may make it difficult for users to navigate easily through your Web pages.

  • Keep your graphics files small to reduce the amount of time it takes to transfer them across a network. A maximum size of 100K is an acceptable limit.

  • Make graphics files smaller by using compressed data formats, such as GIF and JPEG. Avoid uncompressed formats, such as XBM and PostScript Level 1 unless necessary.

  • Remember that solid colors compress better than dithered or gradient fill patterns.

  • Keep the size of the images as small as is convenient. Use 500x400 as a suggested maximum image size. Don't force the user to scroll or resize his or her browser window to see your graphics.

  • Display the text on the page first to give the user something to read while the graphics are loading.

  • Always specify the WIDTH and HEIGHT attributes of the IMG tag to allow a browser to format and display the page's text before all the inline image data has loaded.

  • If a page's menu selections are graphical, store them in an interlaced format so it may be possible for the user to select menu items before the graphic has completely loaded.

  • Access your Web page using a 9600bps link to get a reasonable worst-case access feel of the page. Trim or remove graphics to speed things up.

Here are some additional tips for increasing the performance of Web browsers:

  • Use the fastest possible data link. A single user with a 28.8kbps modem will experience much quicker access than a user with a 14.4 or 9.6kbps modem, or many users jammed on to a 56kbps DS0 line.

  • On slow data links, disable the loading of inline images to speed up your apparent access.

  • Enable text and image caching. It is faster for your browser to read previously loaded text and images from memory or disk than to constantly request data from a server. Use a large cache size.

  • Remember that you can never have too much memory installed in your computer or workstation.

Legal Issues

Under U.S. copyright law, and in other nations through the authority of the Berne Convention, all graphics and images are implicitly copyrighted upon creation. This means that the graphics images you see on a Web page are not freely available, unless explicitly permitted by the owners of the graphics files. Remember this the next time you fire up your screen capture application to get a sample of the wallpaper or the logo on somebody else's Web page. (See the section called "Trademarks, Patents, and Copyrights" in Chapter 8, Working With Graphics Files, for additional information.)

Note also that the LZW compression algorithm used to create all GIF files currently requires a licensing fee for its use. See the section called "LZW Legal Issues" in Chapter 9, for more details.

[Previous] [Next]

This page is taken from the Encyclopedia of Graphics File Formats and is licensed by O'Reilly under the Creative Common/Attribution license.