One of the major factors to consider when choosing or using a graphics format is the size of the resultant image file. In addition, you will need to understand how to optimise images in each format to be cognizant of the results that you can gain.
What is image optimisation? It is simply defined as finding the correct compression settings to make the image as small as possible with as little loss of resolution as you can get away with. Why is this necessary? Because it take time for images to be loaded (most people are accessing the internet over dialup connections, after all) and optimisation reduces that time.
The first and most primitive graphics format is known as BMP, which means bit mapped. These kinds of images may not be compressed as they are simply an exact description of what is to be shown on the screen. Each pixel is represented by 3 bytes (red, blue and green), and each byte contains the colour intensity of it's base colour. This BMP images can be made up of 16 million colours. BMP files tend to be very large, and you don't see them directly on web pages very often. Where you will find them is in collections of wallpapers (wallpapers in the system directory must be in BMP format), desktop themes and similar normal web browsing (especially several years ago when virtually every user was not only on a dialup connection, but was lucky to get 4800 or 9600 baud) other formats were invented.
Two of these formats became dominant and are now found just about everywhere. These are the GIF and JPEG images types. The formats are extremely different and have widely separate applications. Your average web site will generally include a mixture of both formats, as each has their use.
GIF was created by CompuServe in 1987 for their online service. GIF images consist of no more than 256 colours, because each pixel is represented by a single 8-bit byte. This means that in order to convert a BMP image to a GIF image you have to discard all but 256 colours at the most!Each GIF image has a description (known as a header) that defines the colours that will be used in the image. This allows the colours to be assigned to a code which is what actually appears in the image. Thus, the header might say "red is colour #47, bluegreen is colour #48" and so on. Later in the image, the colours can be represented as "colour #47 is used for the next 546 pixels".
Thus the optimisation of GIF images is fairly straightforward and is handled by virtually every graphics program on the market. For example,
Paint Shop Pro allows you to export an optimised GIF image with a very cool wizard to help you choose exactly the best options. Using the optimiser it is possible to reduce an image file size by 95% or more! This means a 100k image can be reduced to 5k or less by this method of optimisation.
On the other hand, JPG (JPEG) images use an entirely different compression scheme. JPEG was invented in 1991 by the Joint Photographic Experts Group to display photographs and similar type images. JPEG has the advantage of allowing 16 million colours. However, JPEG compresses by throwing away pixels.
For example, suppose you have a photograph that is 1024 pixels wide. JPEG compression might be specified to throw away 10% of the pixels (every 10th one). When the image is decompressed those pixel values are extrapolated from the colours of the surrounding pixels. This implies that JPEG images tend to become "fuzzy" when the optimisation values are high.
As it turns out, JPEG is great for photographs and similar things because those types of images tend to have soft edges. In fact, for photographs and art the JPEG format is much preferred.
PNG is an up-and-coming, very new image format which is similar in concept to GIF. PNG images allow for 16 million colours and, unlike JPEG, does not lose colours. PNG compression is handle by most graphics editors, at least those that support PNG.
We have found this format to be at least 3 times the file size of JPG and GIF. This is using Paint Shop Pro and we are not too sure if this is the same in other graphics editors which does not appear to support transparency for this format either.
So how do you optimise your images?
First, find the best format for your applications. PNG is very new and is probably not suitable for most web sites (browser support is sporadic so you may lock out some of your users). GIF is great for line drawings and other things with sharp edges and no more than 256 colours. JPEG is perfect for photographs, art, and similar images.
Second, be familiar with the optimisation functions of your graphics programs. Save images using the various settings and closely examine the differences. For example, how does that image look in 2 colours, 16 colours and 256 colours? Find the correct setting (the smallest possible file size with the least change in the image quality) and use it. Remember that this setting will be different for every single image.
What do you gain from all of this work? Faster loading times on your web site, which means your visitors are less likely to hit the back key even before your site begins to load.
Oh yes - one other thing . . .
I did not mention FLASH ? - well it's not an image format - yes it does make great animations, but we really do not like the way many people are using it these days. Forget those fancy opening "SPLASH" screens - they are a waste of your visitors time. Flash for navigation? - I have seen some good once. Generally I would not do it - I like to change (add and remove) links quickly on my sites and images (and certainly one complete FLASH set of images) are more time consuming - You can do some really fancy stuff with straight code and text.
I think FLASH is great for animated logos, short product demos - ie "how does this thing work?" - you know the stuff one needs a little 30 sec movie to demonstrate.
anyway that's my bit . . .