Types of Image

There are four types of image suitable for using on web pages, they are GIF, JPG (or JPEG), PNG and BMP.

  • GIF (Graphic Interchange Format) is the file type for vector graphics, simple images created like cartoons, that can contain up to 256 colours. They are usually used for bullets, buttons, accents, fancy lines and images featuring text (text degrades badly when saved as a JPEG file). GIF images may have transparent areas, so that they do not obscure the background image or colour of the page. An added bonus with GIF images is that they can be animated, like the globe below.
  • JPG or JPEG files (Joint Photographic Experts Group) are commonly used for photo-realistic pictures containing thousands or millions of colours. JPEG pictures are useful because you can control the file size by altering the compression. The higher the file compression you set the lower the image quality will be, and as a result the file size is decreased. See the JPEG Compression examples below.
  • PNG (Portable Network Graphics) is a new format used as an alternative to GIF that supports transparency for pictures containing thousands or millions of colours. The logo on this page is a PNG image. However, some older browsers cannot display PNG pictures without a special plug-in. For information about PNG visit: http://www.w3.org/TR/REC-png-multi.html Link opens in a new window
  • BMP files (Bitmap) can be used, but they are not recommended. They are much larger than JPG or GIF files as they are not compressed, so will take longer to download.

These are some examples of image files:

GIF image E-mail icon animated GIF image of a globe JPG image of a Lion Cub PNG image of flowers BMP image of lilies

JPEG Compression

The images below show the effect of compressing a JPEG file. Even at 40% compression there is very little noticeable degradation in the appearance of the image.

no compression

No compression

20% compression

20% compression

40% compression

40% compression

70% compression

70% compression

90% compression

90% compression

Moving Images and Sound

JPG and BMP images are static; GIF and PNG files can be simple animations. You can use audio and even video clips on your web pages. Find out more about multimedia.