Creating Animated GIFs:
Background Reading
One of the strengths of the World Wide Web is the ability to incorporate visual elements along with text (and sound) on web pages. There are two file formats commonly used to display graphics on the web: GIF and JPEG. While the difference between these two formats lies in the way in which information describing a picture is encoded, for all practical purposes you only have to remember that JPEG is used for photographs and similar continuous-tone images, while GIF is used for flat-color graphics, or pictures that contain solid blocks of color such as cartoon-style drawings.
Graphic Interchange Format (GIF) is used to encode flat-color images. The fact that these images are made up of blocks of color implies that the likelihood is very high that any given point in the picture is exactly the same color as the points that surround it. In creating a description of this picture that can be sent over the internet, it is not necessary to specify a separate color for each pixel in the image; all that is required is to describe the color and then indicate which groups of dots are to have that color. This is a very efficient way to compress the picture into a small file that can be sent quickly over the Internet. Additional efficiency is added by limiting the choice of colors to 256; the fewer color descriptions that must be included, the smaller the resulting file.
Joint Photographic Experts Group (JPEG) formating is commonly used to display photographs and other continuous-tone images over the web. Unlike the GIF format, JPEG retains all the color information of the original image, but uses a method of compression that reduces file size by trying to identify and throw away extra data that is not essential to the display of the picture. Because it discards this data, JPEG compression is referred to as lossy. This means that once an image has been compressed into JPEG format and then decompressed (i.e., displayed on a web page), it will not be identical to the original image. A higher level of compression results in lower image quality, but also in smaller files that can be transmitted over the net quickly. A lower level of compression results in better image quality, but also in larger files that can take a long time to download over the web. The user must ask himself whether it is useful to have a high-quality picture on his web page if it takes so long to download that few people have the patience to wait to actually see it.
Pixel is short for picture element, and can be thought of as a single dot within a picture. All digitized graphics are made up of pixels; normally they are so close together that the human eye sees them as a continuous image. If you look at a newspaper photo through a magnifying glass, you will notice this phenomenon. A pointillist painting by Serat is another example. Up close you will see nothing but dots; step back and a discernable image appears! The information that a computer stores about each pixel includes its position within the picture and also its color. How much information is stored about the color has a huge impact on both how good it looks over the web and how long it takes to download. As noted above, GIF format limits its color selection to 256, which makes for smaller file sizes and quicker download times.
Resolution is the term used to describe how many pixels are used to represent an image. In the US the scale commonly used is dots per inch (DPI). Obviously, the more dots used per square inch of the digitized graphic, the more it will look like the original picture. Of course, a higher DPI results in a larger file size and longer download time over the web. Web images are typically 72 DPI; images that have a higher resolution are shown in a larger size by some web browsers. For most on-line uses, stick to 72 DPI.
Animation is a graphics technique that creates the illusion of motion by displaying a series of pictures in rapid succession, each of which differs from the previous by only a small amount. The speed at which these pictures are shown is fast enough to fool the eye into seeing a continuous motion.
Animated GIFs are the simplest method of showing animation over the Web. An amimated GIF is a series of graphics in GIF format, called frames, that have been combined into a single file by a program such as GIF Builder. When downloaded and displayed by most web browsers, each frame of the animated GIF is shown in order at a speed specified when the animation is created. The animation can run once, be repeated a set number of times, or run "forever"; this is also specified when the gif is created.
Learner's Guide | Background Reading | Download Frames
Putting Frames Together | Creating GIF Frames