Formats of Web Graphic Images

Main Features of the GIF Format

The GIF format was originally developed by CompuServe, who provided information of the kind now found on the Web. They provided email services before the Internet became popular and before the Web existed. They required a file format that could be used on different platforms (and which did not rely on specific hardware features) and supported some form of compression.

GIF files support any resolution (up to 65536 x 65536pixels). They provide indexed colour images supporting 8-bit colour information (256 colours).

LZW (Lempel-Zev-Welch) compression is used to reduce file sizes. It works by compressing 'runs' of identical colour information. For example 100 contiguous red pixels in the same row take up 100 8bits, with LZW compression it is converted to 100 red pixels that takes up 16bits.

LZW is a lossless compression technique, and so the compressed image is identical to the original image.

Although GIF met its original requirements, it does have its limitations: GIF allows a colour table of a maximum of only 256 colours, and LZW compression is a general technique not particularly efficient at compressing graphical images

GIF Headers

GIF headers contain the information required by the client programme to display the image, as follows:

  • the first 6 bytes denote the GIF version

  • GIF87a (the original 1987 definition)

  • GIF89a (adds text overlays, multiple image overlay and transparent colour)

  • 2 bytes for screen width

  • 2 bytes for screen height

  • 1 byte for colour information (0—2 palette size, 3 palette sorted, 4—6 colour depth, 7 global palette)

  • 1 byte background colour

  • 3 n global palette

GIF Colour Palettes

Adaptive Palettes

As an example of adaptive palettes, examine the image below and its full 255-colour palette. Each colour in the palette has an index which is used when specifying the colour. Index 40 has been selected (with the black square around it) in the palette below. Its colour is a brown made up of a Red value of 153, Green 102 and Blue 51.

By contrast the almost indistinguishable image below has only 64 colours and a correspondingly smaller palette. A light green has been selected, with index 58 — Red 204, Green 255, Blue 204.

While adaptive palettes provide greater colour detail in images, they have some problems. Each image has a palette, which takes up extra space in a file. Furthermore, some machines can only deal with only one palette at a time, which results in palette clash if multiple palettes are used

Fixed Palettes

Rather than creating a palette for each individual image, it is possible to use a standard palette, with the following pros and cons:

  • The advantage is that the images will be smaller as no palette need be saved with each image

  • Conversely, this is quite a restriction on the image and is only suitable for 'drawn' rather than photographic images.

Interlacing

  • Rather than storing the image in row order, GIF files can be stored with every 8th line at the head of the file, followed by every 4th, and so on.

  • This file layout allows a low resolution version of the image to be displayed while the file is still downloading. As more of the file is downloaded, more detail can be displayed.

Transparency

With the 1989 GIF format, one colour in the colour table can be defined as transparent. This allows the background image/colour to show through, and for graphics to appear non-rectangular. However, allowing only one colour to be transparent can cause bad feathering effects to appear around the image's edge. For example, the world image was originally designed to be on a white background. This becomes clear when a Web page is given a non-white background colour, as in the first figure below. By designating white to be transparent, the background will show through, as in the second of the figures below.

Features of JPEG Format

JPEG was designed to store photographic images. It employs a 'lossy' compression technique, in that it throws away information unlikely to noticed by a human viewer. It allows the degree of compression, and hence the degree of degradation, to be specified (on a hundred point scale). The figure below is the dialogue box used by Adobe PhotoShop when saving a JPEG file.

In photographic images with lots of variation in detail, degradation of this form does not matter — but it is noticeable for many types of images, especially those with sharply defined boundaries such as text. The figures below show enlarged versions of JPEG images saved with lowest compression and best quality (Q1); medium compression and quality (Q40); and maximum compression and lowest quality.

While lossy compression works well for photographs, line art (particularly text) blurs or 'ripples'. Because JPEG discards information, repeatedly editing and saving JPEG files causes a progressive worsening in the image's quality — this means that JPEG is usually only used for the final copy of the image, and not for any of the intermediate stages.

'Lossy' and 'lossless' compression techniques

To round off our discussion of the GIF and JPEG graphic formats, we now briefly consider the different approaches to compression and colour transformation.

LZW compression

LZW compression, as used in the GIF format, builds a dictionary of common data sequences found in the image. It then replaces these sequences in the image with a short dictionary code. The dictionary need not be transmitted with the data, as it can be easily reconstructed. The algorithm is simple, and the technique is used in various file formats (not only graphic file formats), such as TIFF, DoubleSpace, Stacker, GZIP, ZIP and ARC. LZW is patented, but payments to the owners need only be made by those implementing the algorithm, not those using it.

LZW compression works best on images with large, 'flat' areas of colour, as in cartoons, and drawings, rather than photographs.

JPEG Colour Compression

JPEG colour compression exploits the human visual system. The compression technique begins by reducing the colour table. Most systems use an RGB (Red, Green, Blue) colour space, but this is difficult to compress. HSL (Hue, Saturation, Lightness) is better, as human eyes can more easily detect fluctuations in brightness than they can fluctuations in colour

Using a technique called subsampling, the colour information in the colour table can be reduced while retaining lighting information (which is how black and white TV signals are sent)

JPEG Colour Transformation

When looking at a far off image, all one can easily discern is the overall colour. Moving closer provides increasingly greater detail to be visible. JPEG uses a mathematical technique to replicate this effect

Treating each colour component (HSL) separately, each component is subjected to Discrete Cosine Transformations (DCT). This calculates the average colour of an area, as well as the rate at which the colour changes

These changes in colour are then quantized (rounded) so that sudden colour changes are removed but more gradual changes are retained (which results in the rippling artifacts, as the technique involves a cosine calculation.)

JPEG Compression

After applying the transformation to the colour table, the data is then compressed using traditional techniques. The most common of these is Huffman encoding, which works as follows:

  1. Calculate probabilistic occurrences of each character

  2. Take the two characters with the lowest probabilities

  3. Replace these with a set, having the combined probabilities of both elements

  4. Repeat until only one element remains

  5. This set is then split into a binary tree, which is used to encode the data

Activity 5: Using GIF Files

Experiment with reducing the quality and size of GIF files by changing colour palettes and introducing dither. Use whatever graphics applications you have, or go on the Web and use the online tools available there. Among others you might use Spinwave.

Sites like these will invite you to select a GIF file on your computer hard disk or to select a GIF via an URL. The uploaded GIF is then compressed using their tool. All you have to do then is wait for the results! If you want a GIF on your disk for experimentation, save any GIF file from the many available on the Internet, or you can save and use this image below.

See Discussion on Activity 5 at the end of this chapter

Activity 6: Image Sizes

Using the supplied graphics application, save different image types (photographs, line drawings, text) in different formats. Compare the file sizes of these formats, and experiment with different compression ratios, number of colours, and so on.

Go to the Netscape site to examine the range of JPEG sizes.

See Discussion on Activity 6 at the end of this chapter

Review

Check your progress by doing Review Questions 9, 10, 11 and 12