GIF and JPEG Basics

GIF - Graphics Interchange Format

GIF images are all over the net now. The main reason is that all browsers can read this format. GIF images are actually stored in two kinds of compressed formats, lossless compression and uncompression process.

The Rocket Shop Library

There are two major versions of GIF; GIF87a (non-interlaced) and GIF89a (non-interlaced or interlaced). The loading of non-interlaced or interlaced images takes the same amount of time, but with the interlaced you immediately get low-resolution of the image first instead of having to wait until the entire non-interlaced image has been loaded. This will allow visitors to get an idea of what the image is to help them decide if they want to wait for the image to fully load. Another advantage of GIF89a images is the ability to make transparent images. GIF images are currently limited to 256 colors, so when you save a JPEG to a GIF format the image will be limited to 256 colors. GIF images work best for a few solid color images like simple cartoons and line drawings. Sharp edges in images are also usually better when saved into GIF format, text in particular looks better in this format.

JPEG - Joint Photographic Experts Group

JPEG or JPG is another popular image format found on the Web. Graphical browsers that support the display of inline JPEG images are steadily rising. An advantage of JPEG is compression (reduction is stored size), however this type of compression is known as lossy (degradation of quality). The more the image is compressed, the more degradation of quality occurs. Another advantage of JPEG is that it supports 16 million colors. JPEG produces the smallest files. It loses data but usually not enough to be noticeable. It compresses both 24-bit and 8-bit images. JPEG's work best with full-color- or grey-scale realistic images such as photographs. This will keep your images small enough that they load up quickly and do not lose as much information as they would if saved as a GIF. Images saved as a JPEG are better quality when used to represent photographic images

Dante Gabriel Rossetti (1828-82)

(152k) C. P. Fullerton

The main key to remember about making images to display on your web pages is size. If the size of the graphic is too big your visitors will not want to wait until the image loads up. Especially those with slower modems. If you need a large image generally a good way to present this is with a thumbnail of the image which will take them to the larger image. Any image 30k and under is a good size for web pages. The more images you use on a single page the smaller in size your graphics should be so your pages do not take forever to load.

And above all, watch out for copyrights. If you use someone else's graphics then give them credit for it! If you aren't sure if the graphic is copyrighted (and you got it off the net) then make a note of it somewhere on your page. You can always email the person whose page you got the graphic and ask them if you are not sure.

	Clicking on this image will take you back to the index page of the HTML Tutorial.
	This button will take you back to the index page of the Graphics Tutorial.