GIF or JPEG?

What do we mean when we talk about different types of web graphics files? GIF or JPEG? Which one? Well that is a lot of questions. Let's break it down some.

GIF stands for GRAPHIC Interchange Format. This is best for simple graphic images that contain a lot of solid areas of color. For instance, some of the images I used in the previous chapters are GIF format graphics.

JPEG stands for Joint PHOTOGRAPHIC Experts Group and are best for continuous tone images like photographs, landscapes and glowing images. Lets look at a couple of images.

Notice here we have two images. On the left is a GIF of a screen capture used in chapter 3. It has some transparent areas in it and has a file size of around 6kb.

On the right is the same image in a JPEG format. It is 9kb but look at the image. It is a bit grainy. To get the same image down to a size that would compare to the GIF, I had to lose some resolution. And it is not transparent in the same areas. This is one example of what some of the major differences are and why you should use both formats for different types of images.

Which brings us to the term loss. Loss is when you lose information in a graphic image. The GIF file is a lossless file format, it doesn't lose much of its color information at lower file sizes. JPEG is a lossy format meaning that the compression scheme reduces file size by discarding file information. Before I reduced the file size of the JPEG image on the right, it looked just like the GIF image on the left of the example above, but it was around 16.8k in size. It lost a lot of resolution to get down to the size of the GIF image.

Not to say that the GIF is the way to go on all images, just that some images are better left as GIF and some as JPEG.