Guidelines on selecting GIF or JPG for Web Images?

GIF - Graphics Interchange Format (invented by CompuServe™)

JPG/JPEG - Joint Photographic Experts Group, who invented this format and its associated compression algorithm.

Some basic general guidelines (which will have exceptions):

• Use GIF for 'simple graphics'
• Use JPG for 'photographic' images
• GIFs usually result in a smaller file size, so they load quickly
• JPGs give a more photo-realistic colour range and detail but are larger file size, so they take longer to download and view.

For example, use GIFs for buttons and simple logos that use solid graphic shapes but use JPG for photographs and complex photographic logos.

The work explained and demonstrated below was all done with  JASC's Paint Shop Pro software.

When designing graphics, start with 16 million colours and save as JPG, even if you are going to end up with a 256-colour GIF.

When scanning photographs, scan at, say 300dpi full colour, even if you are going to end up with a graphic that only needs to be 72dpi (about the best most computer screens can resolve). You can always INCREASE compression (DECREASE the quality) and re-size downward, to provide faster-loading smaller files.  You will not get satisfactory results with a quick scan at 50dpi giving a 200x100 pixel image, then re-sizing it upwards to 300x150 pixels.

Remember to always work with a COPY of the original scan so that if you spoil it while re-sizing, or changing dpi, or using 'special effects,' you can always go back to the original and start again.

Here's some fun with file sizes and image quality with a JPG file.

1. If you click on this small 'thumbnail' picture below, it loads a full-size version of the picture that was scanned at 300dpi resolution, resulting in an image about 200% of its natural size. I didn't put the 'natural' version here, because it would take up more than a screen width, and you would NOT want to use an image of that size, 'on the page' (but you might want to use a thumbnail-linked image, like this, to point to such an image).
The file size of the big picture you will see is 293 Kb. One frequently quoted recommendation is that an entire web page should be no more than 14Kb!  There is some leeway...
The thumbnail version is only 2 Kb (yes, two!)

2. Next is a version reduced to 500x310 pixels. You will note that it is less blurry than the original. This is electronically 'sharpened' in Paint Shop Pro, which is done by the software increasing the contrast between light and dark areas. It doesn't REALLY sharpen the image but I think you will agree, it does a pretty good job of SEEMING to be sharper! File size 119 Kb.

3. This is a similarly edited picture, but this time reduced to a size that might be more acceptable 'in the page' without having to link a thumbnail to it. File size is 48 Kb.

4. Now, the same as picture 3 but 'compressed' using "JPEG compression" which, as you know, is a "lossy" compression method. This means that data about the image is LOST when the file is compressed. This has the effect of reducing the image quality. However, with judicial selection of the compression (on a scale of 0-100), it is possible to arrive at a smaller file size (faster loading) which does not seem to show much PERCEIVED loss of quality. So, if we take the size from number 4 above, with JPEG compression of 5, we get the following usable 'on the page' picture size, with a file size of just 14Kb.

So, in a few short steps, we have gone from an initial high-resolution scan that gave a 293kb file with a picture too large to use, we now have a usable size, acceptable quality image, at just 14kb.

Of course, there are many variations on quality, image size, file size but this example should demonstrate that if you start with high quality large image, you can work downwards. Try the reverse - you won't like the results.