Image file types on the web

Digital images exist as files on a computer and there are a variety of different image file types (or formats) that are used for different purposes. The easiest way to identify what file type an image exists in is to look at the file extension (the three letter suffix appended to the end of the file name).

The picture below shows the same image saved in three different image file formats. GIF (file extension .gif), JPEG (file extension .jpg) and PNG (file extension .png). The associated graphical icons may vary from computer to computer. Also, depending on your computer’s settings, file extensions may be hidden.

Image file types

Choosing the correct file type for your image

There are many different image file types available. However every image file type has a specific purpose and only a small number of them can be used on the web.

GIF vs. JPEG

Traditionally the two most common file types used on the web are GIF (Graphic Interchange Format) and JPEG (Joint Picture Experts Group) and these are the formats that you should use when creating web graphics. However these file types are not interchangeable. GIF and JPEG are used for different types of images and you must know which is the most appropriate to use for your particular image. The table below will help you choose which file type you should use and why.

File Type
Good for:
Bad for:
JPEG        
  • Photorealistic imagery (e.g. photographs)
  • Images with colour gradients* (e.g. photographs, buttons)

Why?

JPEGs can provide millions of colours and very high levels of detail to produce photorealistic images with relatively low file sizes. The large number of available colours means that JPEGs can reproduce smooth colour gradients effectively.

  • Images with text (e.g. annotated diagrams, buttons)
  • Images with blocks of solid colour (e.g. cartoon strips)
  • Images with simple shapes and crisp edges (e.g. line diagrams, flow charts)
  • Images with transparency (e.g. icons with transparent backgrounds)

Why?

JPEGs can cause blurring on text, crisp edges and blocks of solid colour. Also JPEG does not support transparency.

GIF

  • Images with text (e.g. annotated diagrams, buttons)
  • Images with blocks of solid colour (e.g. cartoon strips)
  • Images with simple shapes and crisp edges (e.g. line diagrams, flow charts)
  • Images with transparency (e.g. icons with transparent backgrounds)

Why?

The GIF image format can reproduce text, blocks of solid colour and crisp edges without blurring. The GIF file format supports transparency which is useful for icons that require transparent backgrounds.

  • Photorealistic imagery (e.g. photographs)
  • Images with colour gradients* (e.g. photographs, buttons)

Why?

GIF images can only produce a maximum of 256 unique colours. The colour palette is far too limited to reproduce photorealistic imagery or smooth colour gradients.

* A colour gradient is when one colour gradually blends smoothly into another colour. For example, an image of the daytime sky will generally show a light shade of blue (or even white) at the horizon that gradually blends into a darker shade of blue as the distance from the earth increases.

If you choose the wrong file type for your image, for example saving a photograph in GIF format as opposed to JPEG, you can expect two things to happen:

  1. a loss in image quality (e.g. blurring and/or pixilation)
  2. an unnecessarily large file size

This is illustrated below.

Image type examples

Occasionally it is not always clear which image file type to use. For example you might take a photographic image and place text onto it. The table above states that JPEG is generally better for saving photographic images whereas GIF is better for images that contain text.

In cases like these you need to make the decision based on which image file format would create the best quality image at the lowest file size. You generally need to sacrifice the quality of the image to reduce file size or increase file size to improve image quality. To help make the correct decision you might need to save the image in both GIF and JPEG formats and compare the results. In any case, it’s generally not a good idea for a web graphic to exceed 50 kilobytes (KB) in file size.

PNG - another file type on the web

PNG (Portable Networks Graphic) is another image file type that is becoming increasingly popular on the web. It was invented to be a replacement for the GIF format when it appeared that GIF images would be subject to a royalty fee. It has many of the same features as the GIF format (see the table above) but it lacks full support in some older versions of commonly used web browser. For this reason JPEG and GIF are still considered the most reliable formats to be used on the web.

What happens if I use a different image file type?

Some image editing programs allow you to save images in many other file types (e.g. Bitmap, TIFF, TARGA etc). However you should not use these formats when saving images for your website. This can result in the following:

  1. The images will not display. Most web browsers only support a very small number of image file types. The vast majority of web browsers support JPEG, GIF and PNG so these formats are considered web-safe. If you use another, unsupported file type then it is very likely that the image won’t display to some or all of your website visitors.
  2. The image will take too long to load. Using another image file type that is not specifically meant to be used for web graphics will likely result in the image being far too large (in terms of file size) to be distributed effectively over the internet. The result will be slow loading images which results in slow loading web pages.

Related tutorial: Saving images for the web (PSD)