Motive [Home].Glossary.

Guides

The Motive Web Design Glossary

(data) compression

Speed of download has a significant impact on the experience of using the web. If a website takes too long to display, the conventional wisdom is that a person will simply use the Back button and choose another website from the list of search results that they’re using as a starting point for finding content, products or services.

Data compression is one way of reducing the time it takes for a webpage to load, by reducing the data-size (or file size) of the individual files that make-up a webpage.

Compressing photos

One form of data compression, that has become relatively commonplace, is used to reduce the size of photographic image files.

Most consumer digital cameras now use JPEG compression to fit more images onto a data-drive, memory stick, etc. (The JPEG file format is also used when creating photographic images for the web.)

Digital photos

A digital photo comprises of thousands of individual picture elements (or pixels). If you use image-manipulation software, and zoom into a photograph, these individual pixels are clearly visible. Viewed at a distance, pixels become harder to distinguish from the overall image. A digital image file contains instructions that a display device (such as a computer monitor) uses to recreate the photo; by turning on the appropriate number of pixels, and making each pixel the correct colour and brightness.

JPEG compression reduces file size by using mathmatical equations (or algorithms) to store colour values. Rather than exact instructions for each-and-every pixel, colour values are approximated by using algorithms to record in general, how colour values change over an image.

The JPEG compression also reduces filesize by reducing the range of colour values in an image. This reduction in the range of colour values is commonly referred to as ‘clipping’, and has the effect of reducing the overall tonal range of an image: highlights become slightly darker and shadows slightly lighter.

Lossless and lossy compression

Data compression is often discussed in terms of the fidelity of the compressed data to the source data.

A compression method that results in a file that is an exact match for the source data is described as lossless, while a compression method that results in data that (in some way) differs to the source is described as lossy.

…an audio file that is over-compressed can end up sounding like the music is being performed underwater, or through a long plastic tube.

Taking the example of a digital image, JPEG compression is form of lossy compression (pixel colour values are stored using algorithms that only approximate the pixel values of the source image).

Another, noticeably lossy, form of data compression is used to store audio in a digital format. MP3 compression works by removing frequencies from music that are often inaudible to the human ear. However an audio file that is over-compressed can end up sounding like the music is being performed underwater, or through a long plastic tube.

Compression quality

Lossy data compression methods often allow control over the amount of data lost (when compared with the source file). This is typically presented in terms of a compression quality setting.

With a photo, high-quality JPEG compression will result in a clearer, brighter image; low-quality JPEG compression will result in a murkier image, often with noticeable banding in areas of continuous tone (such as solid colours or gradients).

Related terms: bandwidth, bitmap, cache, download/upload, GIF, JPEG, optimisation, pixel, PNG.

 

Motive Web Design Glossary Trivia