Yale C/AIM Web Style Guide

Contents

Web Graphics

Introduction

Color display primer

Graphic file formats

Interlaced GIF

Transparent GIF

JPEG graphics

Summary-File formats

Illustrations

Optimizing graphics I

Optimizing graphics II

Height & width tags

Colored backgrounds

Imagemaps

Another graphics file format commonly used on the Web is the Joint Photographic Experts Group (JPEG) compression scheme to minimize graphics file sizes. JPEG images are full-color images (24 bit, or "true color"), unlike GIFs that are limited to a maximum of 256 colors in an image. Thus there is a lot of interest in JPEG images among photographers, artists, graphic designers, medical imaging specialists, art historians, and other groups for whom image quality is paramount, and where color fidelity cannot be compromised.
JPEG uses a very sophisticated mathematical technique called a discrete cosine transformation to produce a sliding scale of graphics compression. Thus you can choose the degree of compression you wish to apply to an image in JPEG format, but in doing so you also are also choosing the image quality. The more you squeeze a picture with JPEG compression, the more you degrade its image quality. JPEG can achieve incredible compression ratios, squeezing graphics down to as much as 100 times smaller than the original file. This is possible because the JPEG algorithm discards "unnecessary" data as it compresses the image, and is thus called a "lossy" image technique. The results are easier to see than to explain. Notice the increasing degradation of the image as we increase the JPEG compression:

Example of JPEG compression artifacts in images.

The figure above shows an original photograph (a), and three detail views at different levels of JPEG compression: "excellent" quality (b), "good" quality (c), and "poor" quality (d). Notice the boxy quality of the image in (d). The checkered pattern and the dark "noise" pixels in the green background are classic JPEG compression artifacts.
Below is another look at JPEG compression. The top image is an interlaced GIF. The middle is the same image as a JPEG file, compressed in Photoshop at "medium" quality. The bottom dolphin is also a JPEG image, compressed at "poor quality." Note the extensive compression noise and distortion present in the bottom dolphin the savings in download time are not worth the cost of ruining your images.

Example GIF image.

Example JPEG image compressed at medium quality.

Example JPEG image compressed at poor quality.

Save your original uncompressed images!
Once you compress an image with JPEG, you have lost data and can never recover it again, so always save an uncompressed original file of your graphics.
A new form of JPEG file called "progressive JPEG" gives JPEG graphics the same gradually-built display seen in interlaced GIFs, but most image editors still do not yet support progressive JPEG files. (Debabilizer 1.6 for the Macintosh is one of the few). Like interlaced GIFs, progressive JPEG images usually take longer to load into onto the page than standard JPEGs, but do offer a quicker "preview" to the reader.

JPEG Image Artifacts
The JPEG algorithm was optimized for compressing conventional pictorial photographs, and is also very good at handling complex realistic illustrations (which look like photographs). Photos and art with smooth color and tonal transitions, and few areas of harsh contrast or sharp edges are ideal for JPEG compression. However, most page design elements, diagrams, the typography within images, and many illustrations are composed of hard-edged graphics and bright colors that are seldom encountered in photographs (part a; b is a magnification of the diagram). JPEG compression can be quite poor at handling many computer-generated graphics, buttons, type in images, or any other hard-edged "artificial" colored object seen in artwork or diagrams. When compressed with JPEG, diagrammatic images show a "noise" pattern of compression garbage around the transition areas (c, below) the JPEG algorithm "wants" to see smooth tonal transitions and cannot properly reproduce the harsh transitions at the edges of diagrammatic graphics:
Example of JPEG noise in a diagrammatic image.

References

Siegel, D. 1996. Creating killer web sites. Indianapolis: Hayden Books.

www.killersites.com

Weinman, L. 1996. Designing Web graphics. Indianapolis: New Riders.

www.lynda.com
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.