Web Graphics

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:

GIFLossless (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.
JPEGMillions of coloursLossy: sharp edges will appear blurred. Does not support transparency.
PNGMillions of colors, losslessNot supported by older browsers.

Below I have presented three images that conform to the strengths of each format.

  1. The image in the leftmost column uses a few colors and the same color is present in large chunks of the graphic. This first image (and most line art) is well suited for the GIF format. Note that the JPEG version (D) of this image requires more disk space and the edges of the colors looks very blurry.
  2. The middle image presents thousands of colours that gradually change across the image. This image (and most photographs) looks great when saved as a JPEG image. The GIF rendering of this image (B) requires more disk space and looks grainy (as more than 256 colours are in the image).
  3. The final picture combines elements of the two other images: the background uses thousands of colours with gradual changes (which will hurt GIF compression), while the text have sharp, high contrast edges (that will hurt JPEG compression). This image demonstrates PNG's talent as a great all-round image format. Note that uncompressed, these images require around 62 k (when saved with 24-bits per pixel).
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.

Useful links:

Technical Links: