Beginners Guide to Graphics

Although there are many hundreds of graphics formats in the world, the World Wide Web generally only uses two different ones:

JPG
GIF

Let's examine each one of those in a little bit more detail.

GIF was invented in the early 80's by Compuserve - it stands for Graphics Interchange Format. It was very ahead of it's time - it was flexible, it could deal with large, 256 colour images, and it compressed very well. It uses a lossless format - that is to say, the image never loses quality from the original picture. It also supports animations.

JPG was invented as a way of dealing with very large images - it was created by the Joint Picture Experts group (hence JPG) It differs from GIF in a number of ways. Firstly, it can deal with 24bit images (that's 16777216 colours!). Secondly, it can compress hundreds of times smaller than GIF - how does it do this?

It uses lossy compression - that is, the quality is not as good as the original picture - it works by "throwing away" parts of the picture that your eye is not likely to notice.

The amount of detail you 'throw away' directly influences the size of the file - often more than the actual size of the picture!

Because JPG is so much smaller - and hence takes a lot less time to download from the internet - it has taken the graphics file format of choice for the great majority of pictures on the internet.

Do's and Don'ts When dealing with photographs, or images with lots of colours, try and use JPGs - because GIFs are only 256 colours, they can't deal well with photos, which tend to have a lot of subtle shades in them, as this example shows:


JPG (16 million colours) - 19kbytes	GIF (256 colours) - 20kbytes

So, JPG is smaller, and has more colours - why not use it all the time?

There are a several reasons why not. Firstly, GIFs can be animated Secondly, and more importantly, there are certain kinds of pictures that JPG is not very good at compressing - they are gradients (smooth changes in colour) and images with very high contrasts. Let's take a look the latter to start with:

Here is the GIF version - it looks exactly how it was designed, and only has 3 colours in it:

This is the JPG version:

You will notice that blues and purples have crept in that weren't there originally, and that the image has become 'smudgy' and blurry. - these colours appear in photographic images too, but they appear where the human eye can't really notice them. But when you're dealing with text, high contrast or high detail pictures, use GIFs wherever you possibly can.

Gradients

Often when you design banners, logos or backgrounds, you use smoothly changing colours bands - these are known as Gradients Here is an example of an image made from Gradients:

Here is a GIF of that image:

As that picture is only in 256 colours, the computer has had to do the best it can - but it looks fairly poor. It is 9k in size.

Let's see a standard JPG of that image:

It looks a lot better... but still not as good as the original. It's only 699 bytes in size! You may be asking yourself "Why did the first image look so good?"

Here is the trick to making good looking JPG images and still keeping the website small (remember, for people seeing your webpage, the smaller the file size, the better!) When you create your graphics, and save them, you are able to choose the Compression Ratio - the first, high quality picture, was saved at 15% compression - that's 85% quality - the second picture was the other way round - 15% quality, but 85% compression. You can therefore tweak the tradeoff between quality and size, and strike a happy medium. By spending that little extra time when creating your graphics, your website will look that whole lot better, and will download that much quicker, and will make your site look a whole lot more professional - remember - the smaller your site, the better!

Return to Main Help Index