SITEMAP

Graphics > Scanning : File Format : Linework : Photos : Image Manipulation : Filesize : Transparency : Animation : Banners : Buttons : Backgrounds : Protecting Your Artwork

jpegs vs gifs

There are only two graphics file formats that should be used for the web - jpegs and gifs. Some other formats can be supported in some browsers (eg, .bmps in IE5) but you're far better off to stick to the two types that you know will work for everyone. Gifs and jpegs have different characteristics that make them appropriate for different purposes. If any of your graphics are anything else, such as .bmp, .tif, .psd or whatever, you're going to have to convert them. Jpegs can have the extension .jpg or .jpeg, gifs are always .gif.

Both jpeg and gif are "bitmap" format types, as opposed to "vector" types - but don't confuse that with the actual Windows file format of a .bmp (bitmap). It just means they're based on dots, rather than mathematical calculation. Vector formats are not compatible in all browsers, so I'm not going to cover them here.

What's the difference between a jpeg & a gif, and when do you use each?

A jpeg has millions of colours, so it's best for photos and detailed artwork, where you need lots of colours or shades of grey to show detail. Jpegs also have scalable compression, which means that you can make smaller files, but it's a very "lossy" format - if you push the compression too far, you end up with a pixellated mess. Jpeg compression used to be more of an issue when modems were slower - I use a lot less compression these days cos most people have a 56K modem. But for big files, it's still very handy. The trick with jpeg compression is to keep a copy of your file uncompressed, and then "save as" with progressively more compression. Once it starts to look bad, take a step back and save it from the original with less compression that the bad version. One thing, though - you won't see the quality loss until you've closed & reopened the file, so do that every time. You're aiming to get your graphics under about 100K maximum. And even then, it depends how many graphics you want on a single page, because of course the download time for the page is cumulative. One big pic at 100K is fine, but if it's say four little ones, try to get each down to around 20K. Compare that to the 1meg .bmp or .tif you may have started with!

Gifs, on the other hand have no compression available, and are limited to 256 colours. At 256 colours, the files are usually much larger than an equivalent sized jpeg. So why would you use a gif? Well, if you're only using a small number of colours, such as using your fancy new fonts to make titles, then a gif file can be very small, because it takes its palette with it as part of the file - the smaller the palette, the smaller the file. The two main advantages that a gif has over a jpeg are that you can have areas of transparency, and you can animate a gif. These characteristics make them great for banners, titles and logos. Also, they have an adaptive palette. Say you want to make a gilt decoration. Your 256 colours could all be changed to shades of gold - which will give you as rich a depth of colour as you could possibly want AND still have transparency available. You can save palettes that you (or others) have created to use again. Look at palettes from other peoples' gifs (edit palette) and save ones you like. Gifs also have less format information within the file, so for small pictures such as photo thumbnails, they're often smaller in filesize than a jpeg.

Swapping between the formats while making your graphics can have advantages. Many functions in PSP (Paint Shop Pro) are only available when using "millions of colours" or "grayscale" - such as gradient fills, sharpening images etc. You might want to save an image as a jpeg (no compression), do all of the things that you want to do, then drop it down to 256 (or less) colours & save it as a gif to get a transparent background.

When you're first getting used to the jpeg vs. gif issue, save your final file as both - first as a full-colour jpeg without compression, then as a 256 colour gif. Check the comparative filesizes. Then, try adding compression to a copy of the jpeg, and try dropping down the number of colours to a copy of the gif. Now compare the file sizes. Out of all of these, the one you would choose to use is the one with the smallest filesize, out of the ones whose quality you're happy with. I always do this by implanting them on a web page and looking at them in a browser - browsers affect the colour, so how it looks in your graphics software isn't really a good indication of how it will look once it end up on a web-page.

.jpeg	.gif
No of colours makes no size difference	size dependant on No of colours
size dependant on variable compression	no compression is possible
millions of colours	2-256 colours
no transparency possible	transparency possible
no animation possible	animation possible
no palette control	adaptive palette
good for photos & pictures	good for titles, logos & line drawings