Graphics

The following is an excerpt from an article I found on the World Wide Web. This article addresses graphic file types. There are various graphic file types. In general, you will use JPGs for photo quality images and GIFs for clipart images. Although not mentioned in the following article, the PNG file format is now widely accepted and will one day replace the GIF file format.

GIF

JPG

PNG

by Ross Shannon
yourhtmlsource.com

Which Format? One of the more common mistakes which lead to bloaty images sizes is people using the wrong file format for the job. The simple rule to follow is this:

• GIFs should be used for the bulk of your images. Simple line drawings, shapes, small icons, nothing too complex. You won't lose any detail because GIFs are 'loss-less', but you can drop the palette down to cut a GIF down to size, and maybe up the dithering if you don't like the blocks of color you're left with. Often, however, dithering will increase the filesize, so get the balance between colors and dithering right. If your image is going to be big no matter what you do (like most images with big dimensions), save the GIF as interlaced. This serves a blurry version of the graphic first, and gradually paints over with the finished image. This increases the filesize by a bit, but causes the perception of faster downloading.
• JPEGs should be used for photographs and blurry background tiles where little of the intended look will be lost by the JPEG's compression. If a graphic needs to be accurate or sharp, stay well away from JPEGs. Just remember, most people would rather have a slightly bigger download than a messy graphic, so try not to sacrifice too much quality. Sometimes a nice effect can be had from compressing an image as a JPEG — mess around and see what you can get. Again, for big images use the progressive option when saving for the apparent speed-boost it causes.
• BMPs should never be used for anything.

The best way to choose the format for a graphic if you can't make up your mind is to experiment and save it as both, then compare both their sizes and image quality.