Making good use of Web image formats
A basic guide to the major image formats used on the World Wide Web, to familiarise people with the different formats and help them make good use of them.
- One size does not fit all
- Making the best use of the formats
- Some general notes
- Summary – the short short version!
Many people are unaware of the differences between the various image formats used on the Web, and don’t know which formats to use for different types of image. As a result, quite a few images posted on Web sites, and sent in e-mails, are unnecessarily large files (and thus very slow to download) or show marked quality loss. The aim of this guide is to help explain which formats to use for which purposes – and why – to enable people to make better decisions about how to save their images.
The important thing to bear in mind is that there is no “best” image format: each of the formats is good for different purposes, and which format you should choose depends on the nature of the image. For anyone wanting quick answers as to when to use each format, check out the summary at the bottom of this page. For a detailed look at the three image formats, read on.
Note that this is not a comprehensive guide for image work or on image formats; you will need to research further for greater detail on the formats and how to work with them. For further technical details about a large variety of image formats, see Graphics Formats Explained.
Finally, Edward Reid offers a good, straight to the point, task-based approach with Image Format Comparison focused more on document archival and optical character recognition.
(And yes, I accidentally rendered the section “Working with GIF images” obsolete! Woo.)
One size does not fit all
There are three main Web image formats to choose from: JPEG (Joint Photographic Experts Group), CompuServe GIF (Graphics Interchange Format), and PNG (Portable Network Graphics). The three formats are quite different from each other, and it is important to make the right decision about which to use when saving an image for the Web (or even when sending pictures as e-mail attachments), to avoid quality loss or excessive file size. The general purpose of Web image formats over operating system-native formats (such as PICT on the Macintosh and BMP in Windows) is to provide efficient image compression (which makes the files smaller, to minimise download times), and to make the pictures platform-independent (so that an image saved on a Macintosh will open on a Linux box, for example).
JPEG images use what is called “lossy compression”: some of the detail in the image is permanently thrown away in order to bring the size of the file down. The amount of detail lost depends on the quality setting chosen when saving the image, but generally in a good example the quality loss is imperceptible without scrutiny, while reducing the file to one tenth or less of its original size. The following table demonstrates the effects of the compression close-up:
|Thumbnail and full-size sections of example JPEG image||Two close-ups of the image showing compression artefacts|
The first close-up image shows the little 8-pixel-square divisions of the image characteristic of JPEG compression, which hard to see in an image, but nevertheless present. The second close-up shows the more familiar JPEG artefacts that appear typically as fuzziness and blotches of random colour. Both these effects are the result of the lossy compression technique.
That said, JPEG compression is designed for, and is best used with photographs, where the continuous tones in the image hide the lost detail in the image; you should find that in the table above, the compression artefacts are extremely hard to spot at normal size. This justifies the large file size reduction afforded by the compression technique. JPEG compression is the only effective technique for reducing the file sizes of photographs and is the recommended format for photographs. However, there are some caveats involving the detail loss that are explained later.
You can also use JPEG images for website artwork (borders, logos and so forth) and computer screenshots as long as you set the quality level high enough. If you use JPEG compression for a screenshot or site artwork, and the quality setting is too low, you can get some particularly unpleasant artefacts in the image around areas of sharp colour difference, and narrow areas of bright colour can look washed out. You can increase the quality setting of the image to avoid this problem, but because that simply decreases the compression amount, the image’s file size can become overly large; JPEG as a format is not overly suited to images containing flat tones and sharp contrast. This is demonstrated in the following table:
|24-bit PNG, 3 kB||Medium-quality JPEG, 6 kB||Close-up of the JPEG image|
While bearing in mind that this is a trivial example, you will note that for a larger file size, the JPEG offers a worse quality screenshot image against PNG. For a simple screenshot, you will always find that this is the case, and you will get similar results for website artwork.
However, screenshots showing complex desktop wallpaper are very hard to compress well with any format, because you need lossy compression (JPEG) for the wallpaper but lossless compression (e.g. PNG) for the windows. In such cases, JPEG images are possibly preferable. The same issue applies to graphical interfaces with a lot of colour gradients such as Mac OS X, screenshots of which are tremendously hard to compress with anything without noticeable artefacts.
GIF images on the other hand typically use “lossless compression”, which makes the file smaller without losing any details; this can be likened to an advanced form of electronic shorthand. This means that for diagrams and screenshots, the images can of substantially higher quality than JPEG with similar or smaller file sizes.
However, generally speaking, GIF images are limited to only 256 colours. Therefore, GIF images are generally unsuitable for photographs which contain far more tones and shades of colour. Photographs saved as GIF images need to be reduced to 256 colours, normally through a process called “dithering” which uses speckled patterns of the chosen 256 colours to represent the remaining shades. This is illustrated below:
|JPEG, 28 kB||GIF, 21 kB||Close-up of the GIF|
The centre image is a GIF image – notice the unwanted dithering (speckled colours) in the image which is shown in close-up on the right. The image on the left is a JPEG image and offers continuous tones. The restriction to 256 colours also affects screenshots where many shades of colour are present (such as with a photograph on the desktop) and JPEG images may be preferable in these cases.
GIF images and patents
The Unisys patent on LZW compression, used by GIF images to achieve their compression, has now expired. IBM also patented LZW compression but never enforced the patent. Therefore, it would seem that patent issues no longer affect GIF images.
The PNG format addresses the shortcomings of GIF images, providing a nicer overall image format. It supports full colour images (in excess of 16 million colours), so you no longer have to worry about dithered images when saving screenshots. It provides alpha transparency (that is, varying degrees of transparency from opaque to fully transparent), so that site logos can appear smoothly against backgrounds of any colour and pattern and no longer have to be designed to only work over a single background. While the format does offer notably better compression in most cases for 256-colour images than GIF provides, do bear in mind that a screenshot saved in full colour is going to be a pretty big file: well over 100 kB, maybe as much as 400 kB or more. Likewise, a photograph saved as a image is going to be very large too. PNG makes a nice format for saving images with good compression and no loss of quality (such as website graphics), but its file sizes will never be as small as JPEG for photographs, and screenshots should still be reduced down to 256 colours or less if possible, to reduce the final file size. Diagrams should also be saved in 256 colours (or greys) or less.
In summary, PNG is an ideal format for saving screenshots, logos, diagrams, line art and site artwork; although it supports more than 256 colours, it is advisable to reduce images to 256 colours anyway to keep file sizes down.
Making the best use of the formats
Working with JPEG images
Because JPEG images use lossy compression, there are several things to bear in mind when saving JPEG images, to minimise quality loss.
When you go to save a JPEG image, many programs will prompt you for a quality setting for the image. This setting selects the compression rate for the image, which is a trade-off between image quality and file size. Generally, for a photograph, you will want to select a setting of about 65% for quality; for Web site artwork (logos, borders, etc.) you may need to set the quality somewhat higher, because they usually contain edges of sharp colour difference. For site artwork, you may also want to see how the resulting file size compares with a PNG file of the same image. Most programs now offer a live preview showing the effect of the JPEG compression: watch it carefully, adjusting the quality slider until the preview image is of decent quality. Note that each graphics application has its own quality scale, and mid-way of one can give a very different result to mid-way of another.
The following table illustrates the extremes of quality offered by JPEG compression:
|JPEG image saved at 80% quality (7 kB)||JPEG image saved at 14% quality (2 kB)||A low-quality site image JPEG|
On the one hand, be careful not to save images at too low a quality setting otherwise they will look ugly. On the other hand, be careful not to go to the other extreme and set the quality level too high, as you will end up with a file that is too large on disc, and which will take too long to download! This process needs a bit of care, but it is not too difficult to do. As a rule of thumb, a 640×480 image shouldn’t be more than about 90 kB at the most.
Preserving image quality
One problem with JPEG images is people resaving them when working with them. To quote silvestrij, “resaving a JPEG is like photocopying a photocopy”: if you open a JPEG image, alter it and then resave it, you compound the quality loss caused by the compression, degrading the image. There are two ways you can minimise this problem. Firstly, stick to non-lossy formats such as Photoshop, PICT, BMP, TIFF and PNG when working with images until you come to save the final copy (use PNG or TIFF if you want to mail an image to someone for working on, because they offer good compression); when you are finished with it, make sure you keep a back-up in a format other than JPEG, in case you wish to edit the image further at some point in the future.
Secondly, if your image is going to start out from a camera or scanner, take steps to ensure the image quality begins as high as possible. With digital cameras, take the pictures at the camera’s highest quality setting to limit the artefacts likely to be present in the image. Then save the file as a non-lossy format such as BMP or TIFF when you begin working on it. Alternatively, if you have space on the camera card you could shoot the photographs in TIFF format. With scanners, scan to a format such as TIFF or PNG directly.
Notes on PNG images
Filtering is a system designed to alter (in a sense, re-order) the data in the image to make it compress better. Determining which filter method to use for an image seems to be a black art, so you should probably leave it set to best or adaptive. Filtering is really only intended for 24-bit images or higher, so don’t use it with 256-colour (indexed) images. Further, when I tested it with some images in GraphicConverter, they all came out larger with adaptive filtering enabled, so it may not prove to be as effective as people think. The effectiveness of filtering depends on your particular graphics package, however. You may prefer to leave filtering turned off.
Some general notes
Interlaced and progressive images
“Interlacing” is an old television term referring to transmitting and displaying only ever other line of the image with each frame. With Web graphics, it refers to a similar process, where a low resolution version of an image is sent first, and the resolution is increased as more of the image is downloaded. This way, viewers will get to see the image in full, albeit low resolution, sooner than they would normally.
Selecting to save an image as interlaced, or progressive (as it is termed with JPEG images, arranges the file so that a low resolution (“blocky”) copy is stored first and the remaining detail comes afterwards. With JPEG images, your software may also let you select how many “scans” of progress to use; each scan stores another set of image detail, building up the picture’s detail in a series of steps.
Note that with PNG and JPEG images, interlaced images typically results in a slight increase in file size; in GIF images, the file size can increase or decrease according to the nature of the image.
Thumbnails in Web pages
Some people construct pages of thumbnails which use the large images, visibly reduced by the
<img> tag, as the thumbnails. While this does mean that visitors don’t have to load any image twice, it also means that the visitor’s browser must download every single full image in order to show the thumbnails, a slow and memory-consuming process. This basically defeats the point of having thumbnails in the first place, and is thus pretty pointless. You should stick to having separate thumbnails for photo pages.
It should also be noted that in some cases, thumbnails need to be cropped and adjusted for clarity. Without this step, you can find that thumbnails can be very hard to make out, as is well illustrated under point 4 of Jakob Nielsen’s Top Ten Web Design Mistakes of 2003.
Graphics files on the Macintosh
Files on a Macintosh are composed of either one or two inner files, known as “forks”: the data fork and the resource fork. The data fork is the equivalent of a regular Windows or UNIX file, and this is what gets stored on a Web site run under Windows or UNIX. However, on a Mac, extra information can be placed into a file’s resource fork that other computers cannot see. For images, this can be a custom icon (for the Finder), a preview (a large thumbnail seen in various places such as Open dialogs) and other data saved by the graphics package. This extra data can be quite large, and will make the Finder report an image file rather larger than what will be stored on the Web server for download, which can be quite confusing. You might want to avoid saving custom icons and previews with images in order to see how big the files really are.
JPEG:Suitable for photographs, logos, site artwork etc. Pay attention to the image quality when saving. For software with no save preview, be sure to check the image after saving to check that it looks OK, and adjust the image quality if the image was not satisfactory. Work with lossless formats (PNG, TIFF, BMP, PICT) until you are done, to prevent quality loss, and save to JPEG at the end. Preserve a copy of the image in a lossless format for any future editing work.
GIF:Suitable for images with basic transparency needs and animated images; some diagrams and line art may also compress better as GIF than PNG.
PNG:Suitable for screenshots, logos, diagrams, line art and site artwork. Where sensible, drop down to 256 colours (“indexed colour”) or greyscale to reduce the size of the final image.
– Daniel Beardsmore, 1st May 2004; last revised 14th April 2006
Comments? Send them to the author. Thanks go to PhAtfiSh, silvestrij and particularly Edward Reid for comments and suggestions.