Home>Tutorials>Basics Tutorials>
E-mail this tutorial to a friendEmail to a Friend

Created by:Doro Sensen

There's often confusion about when to save an image as a GIF and when as a JPEG for displaying in a web browser. But there are some points that make the decision easy.

Transparency and/or Animation

If you want a transparent picture, it has to be the GIF format. The JPEG format just can't be saved with transparency.

An alternative would be the PNG format which can also display transparency; however, it's not yet fully supported by all web browsers.

If you want an animated picture (which can also be transparent like the one on the left), it has to be the GIF format. There's just no other image format that can be animated.

Coloured Clipart

If you have a clipart or a picture with very few colours, GIF is better (smaller) than JPEG. On the left are a few images for comparison; I made the flower as vector clipart and then saved them as:

Top left image: JPEG with antialias 4 KB
Top right image: JPEG without antialias 5 KB
Bottom left image: GIF with antialias 3 KB
Bottom right image: GIF without antialias 1 KB

(Both JPEGs were saved with a compression rate of 25 %. The GIF image with antialias had 371 colours, I saved it with 17 colours.)

You see that both GIF files are smaller than even the smallest JPEG file. My choice would be one of the GIF files, the one with antialias for a normal GIF picture and maybe the one without antialias for a transparent GIF (depends a bit on the background, since on a lighter background you can hardly see the jaggies).

Complex Colours

If you have a picture with gradients, shadows, or textures, however, the JPEG format is better (and smaller) than the GIF format. Just compare the pictures on the left, it's the clipart from above filled with various gradients:

Left image: JPEG format (compression value 25%) 3 KB
Right image: GIF format 5 KB

With the JPEG, the gradients are smooth, with the GIF, they are a bit "striped" (just compare the blue background and the left leaf!). The JPEG is also smaller than the GIF that had to be saved with 256 colours to get the gradients as smooth as possible.


The above examples were rather simple clipart, and the difference in file size not so big. But of course, all this is much more true for photos:

Left image: JPEG 4KB
Right image: GIF 12 KB

(JPEG saved with a compression rate of 25% again, GIF saved with 256 colours, optimized Octree.)

You see that, apart from the considerably smaller file size, the quality of the JPEG image is much better. So, if you have a photo, it must be JPEG.

But I want it transparent!

If you have a nice gradient picture with a smooth drop shadow and want to turn it into a transparent GIF, the outcome is rather disappointing.

Top image: JPEG 4 KB
Bottom image: GIF 7 KB

On this dark background, you don't even have to look closely to see that the shadow is very jagged. Furthermore, the GIF is much bigger (considering the simple picture) than the JPEG file.

One workaround is to make the shadow "harder" which may not look like the effect you wanted, though, and the jaggies haven't disappeared totally.
Another workaround is to give the picture the same background colour like the web page has (or the dominating colour in your background image). Of course, in this case you can use it only on that background. This looks quite good now, but there's still the higher file size of 7-8 KB.

The workaround that I like most is the one on the left, a "transparent" JPEG. Unfortunately, it only works on backgrounds with one colour or rather "quiet" backgrounds (bottom image).

You simply fill the background layer with the web-page background colour or background tile (like for the transparent GIF above) and save it as a JPEG file. That combines the advantages of no jaggies and smaller file size (4 KB in this case). That's my favourite way to get the transparency effect. :-))

It doesn't work on a background that's not so quiet like the one on the left; here you can see quite clearly where the picture meets the background. On the other hand, you can hardly read text on backgrounds like that one, so most backgrounds will be quiet enough to use that last workaround!

You'll have to try this method out for your own background, or adjust your background to your images to get the effect you want.