Images

There are a lots of different types of images files available, but only a few are in common use on web pages. The different types of files have different uses within web design.

GIF

Newton's CradleGraphic Interchange Format - this is a very common format for basic images in web pages. It is useful for graphical icons and buttons, for rollover images (as used at the top right of this page), and simple diagrams. It also allows the construction of basic frame-based animations, as shown on the right.

The file extension for GIF files, whether animated or still, is simply .gif

A GIF image can have a transparent colour, which allows the background to show through. Because a GIF is limited to a palette of only 256 colours it is not suitable for high quality photographs. However, each image has its own palette drawn from the standard 24-bit RGB colour space.

A GIF is usually encoded as compressed data, which means that image size can be quite small, particularly for a simple graphic with a small number of colours. Unlike a JPEG (see below), the compression used in a GIF does not introduce losses into the image data.

Technically, the compression algorithm used in GIF images is patented, and commercial users should obtain a licence. To get around this potential issue, some people prefer to use PNG images, as discussed below.

Wiki Article on GIF

JPEG

OrchidThis image format was created by the Joint Photographic Experts Group specifically for the representation of high quality digital photographs, as shown on the right. Digital cameras have an option to save their images as JPEGs, and many will default to this format unless the option is explicitly changed.

The file extension for JPEG images is usually .jpg or sometimes .jpeg, although other extensions are also sometimes used.

A JPEG image starts with a 24-bit RGB representation, but the actual data stored is transformed and compressed using a lossy compression algorithm. The amount of compression applied can be varied according to the image quality required. Low compression results in larger files size, but better quality images, whilst high compression results in smaller file sizes, but lower image quality. This means that some information can be lost and, at high compression settings, this can result in "artifacts" in an image.

OrchidAs a concrete example, the image of the orchid shown above was saved with minimum compression for best quality and the resulting file size is 44K. In contrast, the second image shown on the right is the same photo saved with maximum compression. The resulting file size is 22K. A close inspection of the low quality image will reveal some blurring a some blocky colour gradients as a result of the high compression. For many web applications this is might not be a problem. You should ensure that the compression settings are appropriate for your intended use.

Wiki Article on JPG

PNG

Example PNGThis is the Portable Network Graphics format. It was originally developed as an unencumbered alternative to the GIF image format, which would provide many of the same graphical capabilities, but without the legal restrictions on their use.

Like the GIF format it uses a lossless compression algorithm and has support for transparency. It improves on GIF in that it supports different modes of graphic, for example "Grayscale" for monochrome images, or "Truecolor" for a much greater colour range than GIF. This is a great graphic format for logos and icons, as shown by the Google Chrome logo on the right.

Example GIFCompare the PNG image (above right) with the corresponding GIF image on the left. Look carefully - notice the colour banding particularly in the green segment of the image of the GIF. In contrast, the PNG has a very smooth colour. This is because a GIF image can only encode 256 different colours. Therefore, the extended colour support in PNG makes this a good choice for the kind of complex logos and icons that are increasingly being used in web design.

However, the PNG format does not support animation, so it cannot yet replace GIF images in that role.

The file extension for PNG files is .png.

Wiki Article on PNG

Summary

For rendering true photographic images, a JPEG is usually the best choice, but make sure that the compression settings are not too extreme or the quality of the image will be reduced too much.

For icons, logos and buttons, either PNGs or GIFs can be used. For small images, a GIF file will usually be smaller than the equivalent PNG file. For example, the PNG Chrome logo is 51.2KB in size, whilst the GIF version is only 29.9KB. However, in most cases the PNG file will be smaller.