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:
- Transparency: one colour that will allow the background of the web page to shine through it. So, you can have something that looks like a cut-out if you know what you are doing. For example:
This image has no transparency, and you can see the orange background.
This is the same image but with orange set to be the transparent colour, so you can see the blue showing through. - Interlacing: the image is downloaded in several passes, each one with more detail than the last. The idea is to give impatient surfers a preview of large images. If you don't choose this option, your image renders a horizontal slab at a time. (The difference is not so noticeable if you have a high-speed connection to the web.) See the interlacing samples page for the process frozen in action.
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!