What are the different types of graphics and animations? Give examples, explaining their differences, and pros and cons for using them.

Graphics

There are a variety of graphic file formats; though many are commonly used, some are much more common on the Internet due to certain characteristics they have. I'll mention those last. Many graphic types use a bitmap to create the image; think of it as a series of squares with each one having a color assigned to it. The more squares there are, the better the image looks. I may be oversimplifying it a bit, but it is essential to understand that aspect in order to grasp why images look different if their size is changed, for instance. Also, even though many image formats use the same basic bitmap principle, the variety in formats occurs from different processes used to create and translate the information (or code) that creates the final result.

BMP: BitMaP file type primarily used by Microsoft; for instance, up until recently, Windows backgrounds have been composed of BMP-type files.

TIFF: Tag Image File Format is another bitmap variety of file format, but it was designed for cross-platform use. It can be converted top other formats, and has very good image quality, but file sizes are larger than some of the other image types.

WMF: Windows Meta-File images are the type usually included with any Microsoft product that includes clip-art. They can be either of the bitmap variety (explained above) or can be a vector graphic. A vector graphic uses a series of mathematical codes to create the image; the advantage is that it does not suffer any loss in image quality if the size of the image is changed. If you have the means, try adding clip-art to a document in Word, then adding another image, such as a gif, that you may have downloaded from somewhere. Try making both of the images twice the size that they were. The clip art should remain clearly defined, while the gif will probably look distorted.

The most common graphic formats used on the Internet are JPG and GIF. That is not to say that other formats cannot be used; these file types owe their commonality to the characteristics of file size, image quality, and cross platform compatibility.

JPEG, JPG: Generally used for pictures or artwork, because it can handle gradual color transitions. Has a great deal of flexibility in file size, due to the ability to save an image using a range of quality settings. However, using a low quality setting, while reducing file size, also results in a blocky image with harsh transitions.

GIF: Graphics Interchange Format, developed by Compuserve in the late 80's. Works best for images with sharp transitions, such as icons, navigation buttons, line art, and clip art. File sizes can be kept relatively small, but image quality degrades significantly if the size of the image is changed, especially if it is increased.

There are many more graphic file types; I have tried to stick with those that seem to me to be the most commonly used.

Animations

Animated GIF: Essentially just a series of GIF images consecutively shown and usually looped back to the beginning. One of the least fancy animation techniques around, though it can be used quite effectively. Many banner ads are animated gifs; one would probably only have to visit a handful of sites to encounter an ad or some other type of animated gif image. Biggest advantage is that is maintains a relatively small file size; disadvantage is that the animation can be choppy.

Flash: Created using the Macromedia Flash editor. Can be used to create relatively fluid animations, and is very popular on the Internet due to the flexibility of the Flash program and the relatively small file sizes. The Flash browser plug-in is needed to view these animations; the plug-in is included with Internet Explorer and Netscape browser downloads, or can be obtained from the Macromedia website.

Shockwave: From the same company (Macromedia) as Flash. The advantage of Shockwave is that it is a true multimedia format, which can include video and sound. It is far more complex than Flash, and also requires the Shockwave program to create the file and browser plug-ins to view the files on-line. Downloads take much longer; the rise in popularity of the Shockwave format seems to have paralleled the increase in users with high-bandwidth (DSL, cable) connections. A good educational site to visit to sample some Shockwave movies is BrainPop [http://www.brainpop.com/].

Quicktime VR: This is sort of a borderline inclusion to the group. Though the images in a Quicktime VR generally remain static, the ability to move around in the image and zoom in on parts of it give it something of an animated feel.

Also see

Lynch and Horton (1997) Web Style Guide (Web graphics section)

Webopedia (2002) Graphics Standards

4.1.02 bd