Web images: 3 - image file formats (JPEG, GIF and PNG)


Graphic file formats for the web

Three image formats are almost universally supported by browsers: GIF, JPEG and PNG. These are all bitmap rather than vector: the picture is made up of a grid of coloured pixels rather than mathematical descriptions of lines, shapes and fills.

GIF features - an overview

GIF is an indexed format: the image is composed of between 2 and 256 separate colours (its palette - see the next page for more information on palettes), and any intermediate colours are simulated by mixing pixels of two or more shades in the palette. How successful this looks depends on the subject and the palette you choose.

GIFs allow various options:

JPEG features - an overview

JPEGs are always full colour, so you have a humungous range to choose from when creating them - the maximum depends on the colour depth of your, or the viewer's, graphics card. (Not quite true - you can have greyscale JPEGs, which have 256 greys.)

They can specify progressive encoding (see the interlacing page for a sample), but this is not supported by all browsers. But their principal asset is a very efficient and flexible way of compressing images without severely compromising the image quality. (GIF files are compressed too, but you have no control over this.) See the next page but one for more details on compression.

PNG features - an overview

PNG is a relatively recent format created specially for the web. It combines all the best features of both JPEG and GIF, and after a rocky start, is now more or less fully supported by most browsers and bitmap editors. I think that you can expect it to become the most widely used in time. We'll learn more about this format in later pages.

Windows bitmaps (BMP format) do work in Microsoft browsers, but no others. They generally make very large files compared to JPEG or GIF, and no informed page author would use them!