Webpage Workshop: Home » XHTML » Choice of image format

Choice of image format

The choice of image format that you use on your webpages can be a very important one. The three choices that you have are Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG) or Portable Network Graphics (PNG) - all of which have their best use and of course their worst! A format that you should never use, however, is the Bitmap (BMP) as these files are generally so big that no visitor will wait for them to load!

GIF format is used when you wish to display a graphic made of very few colors such as logos, or when blocks of one color feature in the image, e.g. diagrams and cartoons. GIF images cannot have more than 256 colors, but you can assign one color to be displayed as transparent. GIF files are also used to create short animated files.

JPEG: This graphics format is generally the format you would use for photographs. They are used when you wish to display millions of colors, but due to the compression algorithms used they are not suited for images with blocks of the same color.

PNG format can be used virually any time you would normally use a GIF. They can contain as many colors as a JPG, but when using the same number of colors as a GIF they generally produce smaller file sizes. PNG transparency is supported in varied ways depending on the browser, and animation is not supported.

Below are examples of the same image in various formats. The file size of the image, as well as the format, is indicated below the image. Notice how the file size and quality of the image varies considerably depending on the format.

GIF example

GIF example [56.7 KB]

JPEG example

JPEG example [13.5 KB]

256 color PNG example

256 color PNG example [50.4 KB]

24-bit PNG example

24-bit PNG example [138.7 KB]

As can be seen from the examples above, the best format to use for a photograph is obviously a JPEG. We had to cheat in the examples as the real example files were far too big, so we subsituted them with JPEGs, but as there is no difference in file quality it doesn't matter.

Now that you know what format should be used for each type of image, it will make your job easier when it comes to saving graphics. In the next tutorial you will be shown how to include the images on your pages.

<< Previous page | Next page >>