Gif or Jpg compression - Which should I use?

I've had several emails asking me how to choose what file type and compression to save images to. There is no strict for sure answer to that question. It all depends on what you are going to do with the image in the end. There are some general things to know about gif and jpg file types. JPGs are generally used for photo type images. GIF is used for 256 color images like cartoons or images that won't suffer loss of quality due to color reduction and won't significantly increase in file size for the same reason.

Above is an image that should be saved as a jpg because of all the gradient colors in it. As you can see the file size is quite large when saved as a gif image.

If you compare it to the image below, a jpg, you can really see the file size difference. As far as image quality, this particular image didn't lose too much when saved as a gif.

Below is an image that surely should be saved as a jpg because of the color gradients but look what happened to the text. It's terrible. One reason the text is so awful is because it is red. Reds and dark blue colors suffer jpg compression loss very visibly.

As you can see, the text in the image below looks great but look at the file size when saved as a gif compared to the jpg image above.

This is where you just have to test and see what file type suits your image. Along with file type is compression. For jpg images, the lower the compression the higher the quality of the image. So, if I were to have saved the above image with less compression, the text may have turned out nicer. However, I would then have had a much larger file size for the image.

The less compression you use on a jpg image the larger the file size. The more colors you use in a gif image the larger the file size. Gif images however can only be a maximum of 256 colors where jpg images can be in the millions.

Below is the save options dialog for saving a jpg image. You can get to this dialog by going to File>Save As and choosing jpg as the file type. You will see at the bottom right of that dialog an options button. If you click on that, the following dialog will open.

I always use standard encoding. If you choose progressive encoding the image is downloaded in pieces so to speak. It starts out blurry and each pass removes some blurriness. If you've been to web sites that use progressive encoding you'll understand better what I mean.

The compression factor determines how much compression you want applied to the image. I try not to apply any compression whenever possible unless I can see there is no visible loss of quality in my images. Sometimes I do have to compress to get file sizes down so they can be easily downloaded on the web.

The above and below examples show that it is wiser when using basic colors with no gradients to use the gif file type. The jpg above was saved with 15% compression and really looks horrible. The same image saved as a gif is not only smaller in file size but much nicer in appearance.

So, in the end, I think the best way to decide which way to save a file is to test it out. Paint Shop Pro has an export option in the File menu that allows you to export as gif or jpg. In that process you can see previews of what the compressed image will look like next to the original image. If you see that there is too much distortion you can cancel out and try the other file type.

I've often heard a rumor that jpg images download faster than gif images even though the file size is bigger. I have my doubts. If you have an image of any type that is 50kb and an image of any type that is 10kb, the 10kb file is going to load much faster than the 50kb file.

Copyright Vikki Olds, All Rights Reserved