There are many web pages devoted to describing the relative merits of using JPEG, GIF and PNG images. This page is a short summary of some of the things I have learned about these formats while designing the web pages for my department and while writing software to view medical images. This is not meant as a definitive guide, more a basic introduction with a few useful links.
There are three common formats used by web pages: GIF, JPEG and PNG. Each of these formats uses compression techniques to reduce the amount of time required to download images. In general, each has its own strengths and weaknesses:
|GIF||Lossless (if < 257 colours)||Maximum of 256 colours, poor compression in situations where there are gradual changes in colours. Patented technology, requires a license: this patent will expire in August 2006.|
|JPEG||Millions of colours||Lossy: sharp edges will appear blurred. Does not support transparency.|
|PNG||Millions of colors, lossless||Not supported by older browsers.|
Below I have presented three images that conform to the strengths of each format.
A. 1.1k GIF
B. 12.3k GIF
C. 10.9k GIF
D. 4.3k JPEG
E. 2.5k JPEG
F. 6.8k JPEG
G. 1.2k PNG
H. 4.3k PNG
I. 5.9k PNG
PNG images always look great and they usually achieve very respectable compression ratios. PNG protects you from the reduction in image quality found with JPEG (and images with more than 256 colours saved to the GIF format). Unfortunately, PNG is not supported by older web browsers. I am very wary of web sites that mention "best viewed with Netscape version 4 or later" or "best viewed with Internet Explorer version 4+". It seems to me that the idea of web pages is distributing information to others irregardless of their hardware and software. For the moment, I use PNG for storing images on my hard disk, but stick to GIF and JPEG for my web pages.
An important consideration with JPEG images is to avoid unnecessary abrupt changes in the image. For example, many people like to add coloured frames to the borders of their images. These abrupt changes can greatly increase the file size and cause a number of artifacts in a JPEG image (as image F above demonstrates).
When using JPEG images, bear in mind that this is a lossy technique, and everytime you save a JPEG image, you will lose some of the quality. To demonstrate this, examine the image below. The original JPEG image is shown on the left. I rotated this image 90-degrees and saved the image four times. Note that the final image (shown on the far right) has degraded considerably: in particular the high frequency information of the green text and the red line have become blurry. This is a very common problem - especially with people who convert JPEG images between landscape and portrait format. Some software (including the excellent and free IrfanView) include functions to losslessly rotate JPEG images by 90-degree steps. In addition to rotations, JPEGs will also accumulate errors after repeated cropping, editing and other modifications.
This web page only describes the three graphics formats that are common on the web. I did not discuss many other common graphics formats (TIFF, BMP, etc). I have also described JPEG as a single process - in fact there are many ways of encoding JPEG images that can greatly influence the quality and compression ratios of the images. Likewise, there are various ways of encoding PNG images that can greatly modify the compression ratio. In the examples above, I used the standard 'baseline' settings for the JPEG and PNG images.