In this lesson we will be discussing the disadvantages and advantages of the various types of graphic file formats available for use in your web pages. With this information you will become familiar with which format you should choose for your graphics. Much of this lesson will be learned by actually saving your graphics in multiple formats and viewing them in a WWW browser while keeping mind their file size. There are no cold and hard fast rules for this lesson, you will learn best through trial and error. The following information will give you the basics for making upfront decisions about what to save your files as.

Interactive Tips:(please have Paint Shop Pro and an additional window open in your browser)

Intro - The first thing you need to know is that graphics on a web page need to be as small in file size as possible, otherwise your page could take an hour to load for a person viewing your site on a 14.4 modem. Even a large picture can become minute in file size if it is compressed enough. Unfortunately, the picture will hardly be understandable (loss of detail or color). "A picture is worth a thousand words" could potentially turn into one word, and I won't say that here. If this were just a graphics course we wouldn't care about file size, but what we really want here is a balance of quality AND small file size. So how do we find out the file size or quality? First, go to your other open browser window and type in the drive that the file(s) are on followed by a colon ':' and a backslash '\' and hit return. The files will appear with their file size and you can click on the file to view their quality. To get to your file, just click the folder they are under. Additionally, you can look at web pages while you develop them, or your entire hard drive for that matter. Play with this for a bit and get familiar with the process. You may want to start by saving an image from the internet (right click on the picture you want to save and click on 'save image as') to a floppy and try viewing that.

JPG - You might have noticed that the only pictures you can download all end with .jpg or .gif. These 2 file types are the industry standard for graphics on the internet. With only a couple exceptions, most browsers will not view any other image type. The first mentioned (.jpg) is the file extension for a JPEG image. JPEG is an acronym for Joint Photographic Experts Group. This group of artists and computer programmers wanted to display graphics on the internet that weren't limited to 256 colors (like the .gif image format is) so they developed a file format that would support millions of colors. With this function came a large file size, so they made it compressable up to 96%. The data compression technique results in the smoothing of the image and loss of detail, which can be apparent in some images. The technique actually deletes information from the file, allowing a file to be 1/50 of its former size. See example below.

14KB	6KB	4KB

3KB	A great amount of file size can be reduced in the first 20% of compression. However, a smaller, more detailed image may demand less than that (10-15%). For most images, 20-30% is a good rule of thumb.	2KB

The original file size of this image as a .bmp was 172KB

GIF - The second file format I will discuss, actually the first developed specifically for the internet, is the .gif file extension. GIF is an acronym for Graphics Interchange Format. This format was developed by Compuserve for the efficient exchange of graphics on bulletin board systems via the internet. Since it quickly became recognized for its ability to be compressed (without the loss of actual file information), the gif format was adapted as the WWW's stanard for graphics. One of the advantages to saving files in this format is that you can keep great detail while maintaining small file size. This format is great for computer generated graphics like banners, logos, and buttons. Unfortuanely, this format only supports 256 colors total. So depending on the graphic, this may not be the better choice. If you can keep the total amount of colors in your image to 2,16, or 256, this is clearly your best option. As a bonus for keeping colors down, gifs will allow you to save multiple images in the same file and designate what order they play in. This is called an animated GIF. Plus, you can pick one color in the image to not show up on a web page. This is referred to as transparency. See examples below:

Animated 43KB	Unanimated 2KB

256 color GIF 8KB	Reduced to 16 colors 3KB

Transparent GIF 10KB	This effect is accomplished by cutting out the background and replacing it with one color which I set as the color to be transparent. You don't get to see the Cheetos on my desk, sorry :)

BMP/TIFF - .bmp and .tif are the file extensions (.pict and .tiff for Mac users) are file formats that maintain a very high integrity and file size. I recommend that you use one of these file types (or .psp=Paint Shop Pro) until you are ready to publish your image to the internet. Allow you creativity to flow and let your pictures actually say a thousand words. My advice is to don't worry about compression or numbers of colors until you are done with the graphic, keep it as a .bmp, .tif, .psp. Most likely, one of the formats will meet your needs. The things you do need to pay attention to during graphics creation is transparency and actual picture dimensions.

Compare these two sets of images, I think it will be clear where the advantages lie.

Set #1
JPG at 20% compression 13KB	GIF at standard 256 colors 18KB

Click here to view the original Click here to see it in use with various other transparent gifs.
Set #2