Gif Vs. JPG - Which Image Format?

Most pictures are made up of pixels. Each pixel has a set color which fits together into a picture. Before you decide on a format have a look at the graphic you are going to compress. If you have a photograph or a graphic with several colors and gradients then your best bet will probably be JPG. If however you have several flat color fields, such as in a title for a page, or a logo, then you will probably be safe with GIF.

There are several reasons for this. Photographs are composed of several million colors. Gradients also use a lot of colors to achieve the best effect. JPG format lets you save with millions of colors, GIF only lets you save with 256. So what happens when you save a photo with millions of colors in 256 colors? The GIF format 'dithers' the file. It tries to compensate for the fact it doesn't have the colors in it's palette so it uses a mix of the 256 colors. This generally makes the picture look blotchy and unusable. JPG has access to all the colors needed so it can render it correctly. But why do people use the GIF format then?

GIF format does have it's advantages though. When you are thinking about download time, and how the page arrives on the client you may want to choose GIF. One of the advantages of GIF format is it can be interlaced. You may have noticed that an image sometimes appears blurred and gets to a higher quality as the page loads. This is useful as the client gets an idea of what the page will look like when it has completely downloaded. It also help the page style look intact. This is with interlacing. An interlaced image renders progressively. It first comes in at a low resolution, and then gradually gets better as the page loads. JPGs render from top to bottom pixel by pixel.

You may think that JPG is still the format to use for all your pictures, but it isn't. When you have a flat color field JPG sometimes blurs the color or breaks it up. This can look terrible, so when this happens turn to GIF.

Another advantage of the GIF format is you can make areas of the graphic transparent. This means you can create a logo for a page, and have the background show through, no matter what you change it to.

One of the other common uses of GIF images is to liven up static web pages with animation. GIF files can contain several gif files that it can show in animation. You can use a product like the JASC Animation shop, or Microsoft's Gif Animator to animate files.

If you can see blotches on your picture, or areas look slightly blurred then you probably looking at a JPG that should be a GIF. If there are badly formed gradients, or colors aren't right you are probably looking at a GIF that should be a JPG. Just keep the general rule that Photos are JPG and GIF is for logos then you should be OK.