GIF vs. JPG

So, when to use GIF and when JPEG? The golden rule is this: many colours, JPEG; few colours, GIF. The JPEG is very suitable for photorealistic images, with many colours, shadows and soft transitions from tone to tone. For flat tones images (as typography, icons, technical drawings or comics), the JPEG compression degrades very much the image itself; moreover if the colours are few and the GIF can therefore use the reduced palette, the JPEG is also of a bigger size.

GIF and JPEG can also be used together. Let's take the case of a photo with a grass: the upper part of the image will be mostly composed of blue tones of the sky, the lower one of green tones and the middle one of transitions from blue to green; if we slice the image in horizontal stripes and save the central zone in JPEG and the other in GIF using an optimised palette, and then we put together all the stuff once again with an HTML table, we could take the best from each format, and the result will be better the less colours will be there in the sky and in the grass.

To conclude the confrontation between GIF and JPEG, we have to say that this last one loses 3 to 1 when we deal with the variation field: both support the progressiveness (the GIF is more properly defined 'interlaced', but the result is the same), but the GIF support also transparency and animation, while JPEG nor one neither the other.
(speaking of animation, there would be many things - especially bad... - to be said upon the GIF animations, but this article is not the right place to deal with them... it will be the occasion to write once again on .netArt ;-)

The Author

Andrea Papaioannu is well known to the Italian community of webdesign for his APWD, where he shares tips and tricks to the webdesigner's community.

1. Presentation vs. content: Graphic Formats
2. GIF, this well-known
3. JPEG and JPEG2000, photorealism over the Web
4. GIF vs. JPG