Gif Images

I. Introduction

This year we have only used "jpeg" or "jpg" images for the web. The other type of web images we will use are called "gif" images. Both jpeg and gif images have their advantages and disadvantages. Today, we are going to investigate when to use one versus the other. Remember, when creating images for web pages we need to be concerned about two main things: (1) quality of the image and (2) size of the file. Basically, we want the best quality image with the smallest size.

Jpeg images are good for images with a wide variety of color. Images such as photographs, paintings and gradients are best saved as jpeg images. Jpeg images save the colors well and can compress these files to keep them small in size (bytes). 

Gif images are used for images with limited color, transparencies or animation. If the image only has a few colors in it, gif images may do a better job compressing (keeping the file size down) the file than jpeg images. Gif images are also the only type of web graphic file that can do transparencies and animation.


II. Jpeg vs. Gif for full color images

duck.jpg (39 kb) 

duck.gif (54 kb)

Which image is more appropriate for the web (high quality and smaller size)? As you can see from the above photographs, the jpg image is not only sharper (look closely at the duck's head), but it is also smaller. For full color images such a photographs and paintings, save your files as jpgs. They will look better and be smaller.


III. Transparencies

hslogo.jpg (14 kb)

hslogo.gif (6 kb)

What's the main difference between these two images? As you can see, the gif logo does not have the white border (the white border is transparent). Jpeg images cannot have any transparencies, only gif images can. How many colors are in this image? This is an example of a limited color image (only 2 colors). Since this image has a very limited color range and I wanted the part of it transparent, I would save this image as a gif image.


VI. Animation

Gif images are also the only time of image file which can do animation. Check out some of the animations below. These images are all called animated gifs. We will learn how to create these with the program Adobe Image Ready.








Didier Home / Current Classes / Previous Classes / Lessons / JVHS Pages