At the present time on the Web, there are but two absolute image formats supported. They are the Gif (Graphics Interchange Format] and the Jpg (Joint Photographic Experts Group).
May 1999
There is another format that is being loosely employed by a few folks, but is not yet used by the majority and only supported by the newest browsers. It's called the PNG (pronounced ping) format. This new graphics format will hopefully one day replace the versatile Gif format. We will not be addressing the PNG format here however due to its lack of support and implementation.
The Gif Format
The Gif format is probably the most widely used graphics format on the Web today. The reasons are many, but the most common one would have to be because of its capability to compress data very well, while providing clean, crisp images with the most platform-independent results. Other qualities include transparency, interlacing and animation. Why is the Gif format the most useful for creating Web graphics? Its ability to allow you to use a selective palette to create an image.
When you create a Gif image, you are producing an image that will use a maximum of 256 colours in it's CLUT (colour lookup table). This 'list' (or Index) of colours is contained in the header of every Gif image and makes up the bulk of the overall file size of the image. One of the strong advantages of the Gif format is that you can customize the type and amount of colours you want to use to produce the results you desire. Saving images as Gifs, you have the option to choose only the exact colours that are used to make up the image, thus producing an image with a very explicit palette which will result in the smallest possible file size. And in turn that will result in a clean, fast-loading graphic that will better serve the purpose for which it was intended.
Take this example for instance. Say you create a simple 3-colour graphic. Saving this image as a Gif, you are not forced to use the entire 256 available colours in the Indexed palette, which would produce a graphic with a much larger file size than it needs to be, without giving back much in the way of image quality. Instead, when you go to save your final image you can choose from a number of different palette options, including using only the exact amount of colours contained in the image.
Look at the two examples below. Our 3-colour graphic has been saved once using optimal settings, and once using the maximum settings. Note the file size difference and the quality difference between them.
Example-1a was saved using an optimized palette of 8 colours, with no dithering or transparency. File size = 1.07kb.
Example-1b was saved using a full 256 colour optimized palette, with dithering and transparency applied. File size = 2.78kb
Considering the function this image would serve on a Web page, the quality between them is very marginal, and 1.71kb could be considered a large difference in file size. Could you imagine having 10 different versions of this image on one page? The size difference would add up to more than 10kb. That's about 3 to 4 seconds longer for your visitors to have to wait if they have a standard 28.8 modem.
Now here the same image saved as a Jpg, and optimized to be as close to the same file size as possible to our first Gif example. File size = 1.05kb.
Notice any difference? Yup, I thought you would. What you're seeing here is the product of the type of compression Jpg uses. It has a problem with images that don't contain subtle colour blends. And this 'Frankenstein's Monster' is what it produces.
That's where the difference lies between these two image formats:
Gif uses a lossless compression method. No data is unintentionally removed from the image.
Jpg uses a lossy form of compression whereby it removes data from an image that it believes is 'okay' to remove.
The Gif format is best used for graphics that contain large flat colour areas and text, with very little or nothing in the way of smooth colour blends, such as gradients. There are however certain situations where this is contrary. Those will be covered in the next few sections.
In order to create a subtle colour blend using the Gif format, you will have to apply dithering to your image. And that will end up increasing the image's file size, and thus its download time as well. Sometimes however, you may not have any other option, in which case a slightly larger file size would be a good trade-off to presenting an ugly graphic. Finding a happy medium will be your challenge, and your decision when the time comes.
What's a Jpg good for then?
Jpg on the other hand loves to optimize graphics that are either photographic in quality or contain large amounts of subtle colour graduations. In fact, that's what it was originally created for. And it does it very well while compressing an image up to 100 times its original file size. Gifs can't compete with that. And Jpgs can't compete with Gifs for creating clean, bold, flat-coloured illustrative type graphics containing text, while keeping the file size to a minimum.
Below is an example of how much better the Jpg format deals with subtle gradations.
Here we have an image saved as a Jpg using a 60% compression ratio. File size = 5.30kb.
And here is the Gif equivalent optimized to be a similar file size - 5.06kb. Quite a difference.
These examples may seem a bit extreme, but they show you what the raw difference is between the two formats. So as you can see, each format has its strong and weak points. Let's just be thankful we have both, shall we?
Pixel Anatomy 101 - This beginner/intermediate tutorial shows you how to optimize graphics for the Web.
