My website, GIFs and JPGs - should I care?

When having a website designed for you the sign off process for the design may well have involved seeing a mockup of how your website looks. However, once it is in place there may well be major issues around load times, image resolutions and clarity of graphics. Why is this?

The short answer is graphic types. The two most common graphic types that people (including some web designers we're sorry to say) get confused or simply wrong are the JPG and GIF formats.

The rules are simple:

JPG file formats should be used for photographs or images that have graduated or large number of colours within their profile.

GIF file formats should be used where there is block colour and a small range of colours with little or no graduation.

If you get the file type wrong you can end up with some horrible results. Take the example below of a menu item. Does one look better than the other?

The one on the left is block colour that has been incorrectly sampled as a JPG. The one on the right is correct as a GIF. There is a significant loss in quality on the image on the left.

It works (or, rather, doesn't work) for images too. Photographs, remembers, should be JPG.

There are other file types such as PNGs that are pretty good at both but sharing the above information should allow you to review your own website with a critical eye to make sure you've got the correct file format for each image type.