Getting the right image Use this chart to determine the best image type to use. Back to the IntraNet page

By Mark Gibbs
IntraNet, 1/26/98

Unless you're into bogging down users with unnecessarily large downloads, optimizing intranet content should be one of your priorities.

The problem is, maximum performance - i.e., minimum download time - comes from small, text-only pages. But delivering maximum information usually requires graphically rich pages.

On an intranet, performance relates to the size of everything contained on a Web page. Typically, the text portion isn't a problem - HTML files only average 2K or 3K bytes, with 25K bytes being the upper limit. And, optimizing an overly large page is not hard. You simply break it into a number of separate pages, then link all the pages together.

But a typical Web page also includes content that has to be loaded. These nontext components usually are images, but we're seeing more use of multimedia pages that include, for example, video files averaging 100K byte. Plug-ins, ActiveX Controls and other content interpreters add even more overhead.

In the quest for efficient delivery, exotic content always is a problem. Never use multimedia when an alternative can get the message across without the overhead.

Image problem

Unnecessarily large pages and exotic content aside, the biggest Web performance overhead comes from embedded images. The average Web page generally has two such images, each of which requires approximately 25K bytes. Image data, then, is generally at least twice the size of HTML content.

You definitely need to optimize images. But, to do that, you need an understanding of image attributes and how browsers and PCs handle images.

The most popular Web browsers support two image formats: GIF and JPEG. Plug-ins, ActiveX Controls or external helper applications are needed to handle other formats - formats you should avoid if you're trying to optimize Web content.

The GIF and JPEG formats are "raster'' images. This means grids of dots, called pixels, make up the images. Each pixel has an associated color value and other attributes specified by one or more bits.

The number of bits depends on the color depth, which is the term for the number of colors used in the image. Black-and-white images require one bit per pixel.

The human eye supposedly resolves millions of colors; the most common approximation for this in the computer world is "true color,'' which requires 24 bits per pixel to allow for 16,777,216 colors.

Color data can be stored in image files in two ways. Storing true color data requires three bytes (24 bits) per pixel, one byte each for red, green and blue (RGB) values. So, for a 100-pixel-by-100-pixel image, you need a total of 30K bytes (10,000 pixels times three bytes per pixel).

However, for images that use 256 or fewer distinct colors - usually sufficient, since most monitors are limited to displaying 256 colors - storing the RGB values for each pixel would be a waste of storage. So instead of keeping an RGB value for each pixel, a Color LookUp Table (CLUT) is stored in the image file. Each pixel now is described by only one byte that points into the CLUT, a list of 256 RGB values, each a set of three bytes.

For 100-pixel-square images, you now require 10,768 bytes - 10,000 bytes for the image plus 768 bytes for the CLUT. This total is just more than 35% of the true color encoded size.

You could reduce the file size using compression. At a 10:1 or better ratio, you might be able to skinny down an image file to 3K bytes, for example.

Herein lies the key to image optimization: The more you can compress an image, the faster it will download.

The ability to compress a file is not related to the number of colors - the palette size - in it. Rather, it is a function of the type of image and the compression algorithm and ratios.

The compression algorithm, which is part of the file format, determines how the compression will be done and whether image data is lost in the process. High levels of compression, because they require dropping some data, reduce image quality. Some image compression algorithms let users select the compression ratio so they can control image degradation.

Compression algorithms look for patterns of same-colored pixels or repeating color sequences, then encode the patterns to reduce the file size. Results depend on the data input.

Each file format is appropriate for a different image type. Note that when using GIF files, you can't select the compression factor. On the other hand, most graphics programs let users specify high, medium or low compression for JPEG files.

For Web use, most experts recommend modifying an image's palette so no more colors are used than is necessary. This ensures that the compression algorithm will have a smaller range of colors to work with and therefore will be able to find more and longer sequences to encode.

Before you get into such advanced techniques, consider the number of images on your intranet. If you think you can convert a few thousand images to use an optimized palette, think again.

A more realistic goal for optimizing image content on a large intranet is to ensure that the right file type is used for a given image. In general, line drawings and flat-color illustrations are better stored in GIF format, while photographs and complex images are more suitable for JPEG format.

Beyond GIF, JPEG

You can expect to see the emergence of image formats offering better compression and applicability to any image content. For example, the World Wide Web Consortium has elevated the Portable Network Graphics (PNG) format to recommendation status.

PNG in many ways is an improved version of the GIF format in that it has better compression, a larger palette and better transparency support. Its sophisticated display standard specifies 48 bits per pixel, with up to 48 bits for color or 32 bits for color and 16 bits for alpha channel. This allows for the specification of more than 64,000 levels of transparency per pixel.

Transparency is crucial for producing sophisticated Web pages that allow backgrounds and other content to show through images. With multiple levels, the image can be opaque, transparent or anything in between.

Despite this sophistication, PNG does not support multiple images. This means you can't animate images like you can with GIF.

Microsoft Corp. and Netscape Communications Corp. support PNG in the Internet Explorer 4.0b1 and Communicator 4.04 browsers, respectively. Nonetheless, it'll probably be at least another six months before PNG is used widely given the market's commitment and reliance on GIF and JPEG.

As long as intranet developers use the correct image format and build well-constructed pages, you'll have addressed most of the opportunities of optimizing Web content. Now if you could just get users to be more selective about what they publish!