Producing Images for the World Wide Web

by Chris Savage
Network Notes #33
ISSN 1201-4338
Information Technology Services
National Library of Canada

August 30, 1996

Introduction

Current computer technology offers tremendous power for capturing, creating, and editing images electronically. With a grounding in the fundamentals of electronic graphic design, it is simple to create high-quality electronic images using ordinary off-the-shelf scanning and image-editing software. This Network Notes discusses the core principles of electronic image preparation for computer display and transmission over the WWW. It covers the impact of viewing technology, storage and delivery media on image design, as well as the differences between image file formats for WWW viewing and editing. Procedural recommendations for producing electronic images for the World Wide Web are also provided.

For a more detailed discussion on image file formats, please refer to Network Notes 24: Graphics and Sound File Formats by Kivi Shapiro.

Differences of View

In order to produce high-quality electronic images, it is essential to understand the characteristics and capabilities of the viewing technology. Electronic images can be displayed in two different ways:

1. printed to hard copy
2. viewed on a computer monitor

The difference between these two media has a significant bearing upon the design of the electronic image. Effective image preparation for print must account for the physical properties of the paper, inks and printer, such as:

absorbency of the paper
viscosity of the ink and its "bleeding" or "wicking" behaviour
colour-matching the computer monitor's display with the printer inks
printer resolution (i.e., the degree of detail that the printer can produce)
printer colour depth (i.e., the range of colours and inks available)
paper size
printer memory size (i.e., the amount of data that the printer is able to process)

Just as the preparation of electronic images for print must account for the attributes of the paper, inks and printer, images designed for computer display must address the capabilities of the monitor. Aspects of the monitor, which have direct impact on image design, are:

colour depth (i.e., the range of colours that can be displayed)
size of the viewing area
screen resolution (i.e., the fineness of detail that the monitor can display)
video memory (i.e., the speed with which the monitor can draw the image)

Basic Computer Configuration for WWW Images

A major challenge of publishing on the WWW is to create documents that are both well-designed and accessible to the broadest technological base possible. This means developing documents that appeal not only to users inside large organizations with state-of-the-art browsers and fast, networked Internet connections, but also to those with older, less-capable browsers and slower dial-up modem connections. With this in mind, WWW authors generally design for a basic computer configuration that has:

an Internet connection at 9600 BPS or greater
a 1-MB video card displaying 8-bit colour depth (maximum 256 colours)
a 14-inch colour SVGA monitor
a screen resolution at 640 ´ 480 pixels, and 72 pixels per inch (PPI)

The limited capabilities of this basic configuration dictate that: images should have a small file size to download quickly; they should display well in 256 colours; and the images and HTML documents should be designed for optimum appearance within a small 14-inch viewing area.

Image Quality vs. File Size

Transmission and delivery of electronic images

In addition to the capabilities of the viewing technology, electronic image design must also consider the limitations of the delivery medium. Since CD-ROM technology offers fast data transmission speeds and large storage capacity, it is well suited for storing large electronic images. In contrast, the slow transmission speeds of computer networks and distributed, global information systems such as the WWW, make it especially important to minimize the file size of graphics.

File sizes may be reduced in a number of ways, but as file size decreases, image quality deteriorates. This is because file size is determined by the breadth of information contained within the image, such as the number of unique colours, the fineness of detail, image dimensions. Removing any information will reduce file size but will also affect the appearance of the image.

The goal of preparing images for the WWW, therefore, is to achieve a compromise between acceptable image quality and optimal file size. This is all the more difficult because an acceptable compromise is entirely subjective and cannot be quantified. In other words, although image preparation for the WWW requires objective, technical precision such as adjusting colour depth to reduce file size, this activity is ultimately governed by the ambiguous and immeasurable opinion of the "eye of the beholder" to define the boundaries of acceptable image quality.

Techniques for reducing file size

The file size of electronic images is determined by five attributes:

file format
colour depth
resolution
editing effects
image size

The file format is nothing more than a software algorithm for encoding the image data, including the other four attributes, along with compression instructions on how to pack and unpack the entire image. Hundreds of different graphic file formats exist, but only a few are essential in preparing images for the WWW.

Different File Formats for Different Purposes

WWW image-viewing file formats (GIF, JPEG, etc.)

The World Wide Web officially supports only one inline graphics file format: GIF (Graphics Image Format). This means images stored in the GIF file format can be embedded within documents and viewed alongside text through browsers with a graphical user interface (GUI). The GIF format uses a compression technique that is good for images with large blocks of similar colours, such as icons or drawings, but is restricted to a colour depth of 256 unique hues. Because of this limitation, another file format called JPEG, after its creators the Joint Photographic Experts Group, is commonly used on the WWW. The JPEG format supports a colour depth of up to 16 777 216 different hues and has better compression for images with fine detail and broad colour variance than the GIF format. For this reason, the JPEG format is excellent for photos.

These two viewing formats are the current de facto file format standards for images on the WWW:

GIF, used mainly for icons, toolbars, and inline images
JPEG, used for separately-linked, and usually larger, detailed photographs

Although still not part of the official HTML standard, some of the leading browsers, such as Netscape Corp.'s Navigator and Microsoft Inc.'s Internet Explorer, can now view JPEG files inline (i.e., embedded in documents) just as they do with GIF files. Similarly, some browsers are now able to display GIF and JPEG images as tiled backgrounds. Even though JPEG- format inline images are appearing with greater frequency on the WWW, this practice is currently discouraged because many browsers still cannot view inline JPEG files. In contrast, it is acceptable to use JPEG instead of GIF files for background images because, (a) the background image provides design enhancement, not meaningful content; and (b) the background image tag is a Netscape extension of the HTML specification, and, therefore, unreadable to many browsers in the first place. (Browsers that do not support the Netscape extensions will ignore the background image tag even if it references a GIF or JPEG file.) However, since all browsers with a graphical user interface can view inline images, it is important to use the HTML standard inline image format, GIF, until an official amendment approving the JPEG format is produced.

Image-editing file formats (TIFF, etc.)

Both of the WWW's de facto file formats for images have critical limitations: GIF has a maximum colour depth of 256 colours; JPEG has a compression algorithm that discards some of the original image's information. The loss of information is usually undetectable by the naked eye, but further editing of this JPEG image usually magnifies the distortions. In either case, GIF and JPEG are poorly suited for editing electronic images. They should be used exclusively as viewing formats. In practice, electronic images should be saved in these formats only after they are edited for optimum appearance and file size. Furthermore, once an image is saved in either GIF or JPEG format, it should not be re- edited.

For editing purposes, electronic images should be saved in a file format that has both the colour depth of JPEG (i.e., able to contain millions of different colour hues), and the compression accuracy of GIF (in which the saved copy is identical to the original without any loss of information). Many file formats satisfy these criteria and are adequate for the task, but TIFF (tagged-image file format), created by Aldus Corp., is worth mentioning because it is widely-supported by many different image-editing and scanning software for PC, Mac, and UNIX-based operating systems.

Colour and compression: considerations

For GIF files, the colour depth must be reduced to an indexed colour table of 8 bits (2 to the power of 8, or 256 colours) or less (i.e., 7 bits or 128 colours, 6 bits or 64 colours, 5 bits or 32 colours, 4 bits or 16 colours, 3 bits or 8 colours). The indexed table is determined by the dominant colours in the image. Colours in the original image are ranked according to frequency and their similarity to other shades so that those which appear frequently are short-listed to the indexed table and substituted for similar shades. This means a shade of red that appears in thousands of pixels in the original will be included in the indexed colour table. Shades of red which appear in only a few pixels in the original will not be indexed in the colour table. Instead, they will "dither" to the closest match in the colour table. In most cases the human eye cannot detect the difference.

For JPEG files, the original colour depth is preserved but the level of compression must be set to either:

maximum compression, which produces the smallest file size but poorer image quality
moderate compression; the lowest level which produces the largest file size but the best quality image

If the converted GIF or JPEG images require additional editing, the proper procedure is to reopen the reference TIFF file, make all adjustments, and save a new copy in GIF or JPEG format. The reason for manipulating the original TIFF rather than the viewing-format images is that GIF and JPEG files are "abstractions" of the original TIFF image file. Hence, subsequent edits of GIF or JPEG files produce "abstractions of abstractions", leading towards visible distortions and poor image quality. Therefore, it is best to edit with the fullest field of information available, so that the best image quality and truest representation of the original is preserved.

Four Basic Steps to Producing Electronic Images for the WWW

The first step is to prepare the electronic image for the WWW using one of the following methods:
- capture the original with a scanner or video input device, or
- import an electronic image from another source, or
- create an image by using a drawing/painting program
The second step is to save the image as a reference TIFF file (i.e., as an "original") with as much information as storage capacity permits. The image should have a rich colour-depth, high resolution, and relatively large image dimensions.
The third step is to edit the image by adjusting its appearance with special filters, and reduce its file size by altering the colour depth, resolution, and image dimensions.
The final step is to save the edited image as a GIF or JPEG, or other appropriate viewing file format for the World Wide Web.

The editing process can be compared to carving a sculpture from wood whereby the original is whittled and stripped apart until a smaller, detailed and polished object is produced. The danger is that information once stripped away is difficult to replace. Simulation and repair techniques to recover the removed information are available, but they are extremely time-consuming, frustrating, and usually imprecise with unsatisfactory results. It is preferable to save multiple versions of the original throughout the editing process using a controlled naming convention (e.g., image1a.tif, image1b.tif, image1c.tif, etc.), so that mistakes can be easily eradicated.

Brief Glossary of Electronic Imaging Terms

Brightness -- the intensity of the shades in an image.

Contrast -- the range of shades in an image.

Drawing -- an image type that uses large blocks of single colours or gray shades rather than small, individual dots.

File Format -- the software format an image is digitally stored. Common image formats are GIF, JPG, TIFF and BMP.

File Size -- the total number of bytes in an image. Size is determined by file format, colour depth, image size, resolution, and editing effects (such as "sharpening").

Halftone -- an image type that simulates gray scales by using various-sized dots, as commonly used in black-and-white newspaper photos.

HSB -- The Hue, Saturation, and Brightness balance of an image.

Hue -- the "value" of a colour; or the sum of a colour's saturation and brightness.

Image Size -- the height and width of an image, measured in pixels.

Image type -- the visual format of a scanned image, not to be confused with the file format. Three main classes of image type are photo, halftone and drawing.

Indexed Colour Table -- the reduction of an image into a grid containing a set number of colours. VGA and EGA monitors can read only 16-colour indexed colour tables, whereas SVGA monitors can support up to 256-colour indexed colour tables. The most commonly used file format on the WWW that uses an indexed colour table is GIF (256 colours). An indexed 256-colour table is also referred to as "8-bit colour".

Millions of Colours (a.k.a. True Colour) -- 24-bit colour that allows up to 16.7 million different colours in an image. Currently, most computer users do not have monitors capable of viewing this colour depth.

Optical Character Recognition (OCR) -- Software that translates images of words into ASCII characters.

Photo or Photograph -- an image type with high definition, including many different shades of gray or colour.

Resolution -- the concentration of dots per inch (dpi) in an image. SVGA monitors are typically 72 dpi.

Saturation -- the depth or intensity of a colour. Increasing colour saturation makes the colours appear richer, decreasing saturation makes them paler.

Sharpness -- an image-editing technique that accentuates the relief between shades, decreases blurring, and makes the image appear more defined. Also increases the file size.

TWAIN -- the industry standard for exchanging information between graphics applications (such as desktop publishing software) and peripheral devices (such as scanners or other image-capturing devices).