Web images: 6 - choosing the appropriate file format

When to use the different file formats - GIF or JPEG or PNG?

Of the 'traditional' formats:

What do I mean when I say best? Well, image file size is an important consideration in the time taken to display a web page. GIF and JPEG compression work in different ways, and the same image will generally make a smaller file in one format than another. For example:

greyscale photo in GIF format

greyscale photo in GIF format
file size 18,290 bytes

greyscale photo in JPEG format, optimised

greyscale photo in JPEG format
file size 3,280 bytes (optimised)

button saved as GIF file

line art in GIF format
file size 417 bytes

button saved as JPEG file

line art in JPEG format
file size 1960 bytes (optimised)
original (unoptimised) size 3,835 bytes

Secondly, the appearance of the image is important. The different methods of compression used in GIFs and JPEGs mean that certain types of image do not look well in one format or the other.

What about PNG?

PNG, the new kid on the block, allows both flat and photographic images to look good. Line art generally comes out at a smaller file size than the equivalent GIF (and can use more than 256 colours if required for appearance); full-colour and greyscale photos are slightly larger than their JPEG equivalents. Since it allows both interlacing and transparency of a much more sophisticated kind (2-D interlacing and alpha transparency respectively), it is really the best all-round format, and I imagine it will eventually supplant GIFs, and probably JPEGs too, except for high-resolution photographs. However, it's true to say that the majority of web sites still use the older formats: I'm guilty of this myself!

PNG with transparent background

Line art as PNG, with transparent background;
file size, 368 bytes
(the GIF equivalent is larger at 726 bytes)

greyscale photo in PNG format

greyscale photo in PNG format
file size 12,615 bytes
(as GIF: 18,290 bytes;
as 75% JPEG: 3,280 bytes)

PNG photo, true colour

PNG photo in true colour;
file size, 11,881 bytes
(the JPEG equivalent is smaller at 5,846 bytes)

PNG photo, 256 colour

PNG photo with 256-colour optimised palette;
file size, 4,366 bytes
(the GIF equivalent is larger at 6724 bytes)

To find out more about this format and where it is supported, visit the link to external site PNG home page.