Multimedia Tutorial - GIF Images

GIF is one of the main image formats used on the Web.

This article explains in detail the features and usage skills of GIF images.

Understanding image formats

Neither HTML nor XHTML specifies an official format for images. However, popular browsers have specifically specified certain image formats: usually GIF and JPEG. Most multimedia formats require special auxiliary applications, and each browser user needs to obtain, install, and correctly operate these applications to view or hear these special files. Therefore, it is not surprising that GIF and JPEG have become the actual standards on the Web.

Before the advent of the Web, these two image formats had been widely used, so there was a large amount of supporting software to help us create images in these two formats. However, each format has its own advantages and disadvantages, and some browsers may use their features to achieve special display effects.

GIF

GIF format refers to the Graphics Interchange Format (GIF), which was originally developed by CompuServe for its online service users to transmit images.

Features of GIF format

GIF format has many features, making it very popular in HTML/XHTML.

Firstly, its encoding technology can be used on many platforms. Therefore, by using appropriate GIF decoding software (most browsers contain this software), GIF files created and composed on Macintosh can be easily loaded, decoded, and viewed on Windows-based PCs.

The second feature of GIF format is that it uses a special compression technique, which can significantly reduce the size of image files, allowing for faster transmission over the network. GIF compression is 'lossless', which means that the original data in the image does not change or lose, so the image after decompression and decoding is exactly the same as the original image.

In addition, GIF images are very easy to implement animation effects.

Versions and colors of GIF format

Although GIF image files are all named with the suffix .gif (or .GIF), there are actually two versions of GIF: the original GIF87 and GIF89a, the latter of which supports many new features, including transparent backgrounds, cross-platform storage, and animation, which are widely used by web creators.

The popular browsers now support both of these GIF formats, which map 8-bit pixel values to a color table in the same scheme, so each image can have a maximum of 256 colors.

The actual number of colors in most GIF images is even less, and some special tools (such as Macromedia's Fireworks) can simplify these colors in more detailed images. By simplifying the colors, smaller color maps can be created and pixel redundancy can be strengthened to make file compression more effective, thereby speeding up the download speed.

However, due to the limited number of colors, images encoded with GIF are not always applicable, especially for images with photo-realistic effects. GIF can be used to create very beautiful icons and images with few colors and pictures.

Even the most picky creators will choose GIF

Since most graphic browsers explicitly support the GIF format, it is now the most widely accepted image encoding format on the Web. Inline images and external linked images can both use this format. If you are hesitating about choosing an image format, using GIF is definitely the right choice. It can be used almost in all cases.

Techniques of GIF images

GIF images have three special techniques: interlacing (interlacing), transparency (transparency), and animation (animation).

Interlacing

By using interlacing, GIF images can appear on the screen all at once, rather than displaying from top to bottom in a step-by-step manner. Generally, images encoded with GIF are a sequence of pixel data arranged in rows from the top of the image to the bottom. Therefore, when a normal GIF image is displayed on the screen, it seems as if the curtain is pulled open all at once, while an interlaced GIF image, when displayed, resembles rolling up blinds. This is because the sequence of pixel data alternates every 4 rows. The user only needs to spend a quarter of the time to download and display the entire image to see a very complete image from top to bottom, although it is somewhat blurred. This image, which is only a quarter completed, is usually clear enough for users with slower network connections to determine whether it is necessary to spend time downloading the rest of the image.

Although all graphic browsers can display interlaced GIFs, not all browsers can display the gradually clearer effect of interlacing. Even those browsers that can achieve this effect allow users to suppress this effect by choosing to display the image only after it is completely downloaded and decoded. Older browsers always display the image only after it is completely downloaded and decoded, so they do not support this effect at all.

Transparency

Another common effect of GIF images (actually GIF89a format images) is that it allows part of the image to become transparent, so that the content below the image (usually the browser's window background) can be displayed through the transparent part. Transparent GIF images use a specific color in their color map as the background color, allowing the background of the display window to show through. By carefully trimming the size of the image and choosing a near-pure color background, transparent images can be made to look as if they are completely embedded in the web page or floating on top of it.

Transparent GIF images are suitable for any graphics that want to be integrated into the document but do not want to look like a square. Transparent GIF logos are very common, such as transparent icons or printed symbols, etc. - any image with an arbitrary natural shape can use this effect. Transparent inline images can also be inserted into traditional text to display special character symbols.

There is a drawback to the transparency effect of GIF images, which is that if it is included within an anchor tag (<a>) without removing its border, or if it is enclosed in a frame specifically, it will look very bad. Moreover, other content will be displayed around the rectangular border of the image, rather than close to the opaque border of the image. This results in unnecessarily isolating the image or making the web page look very strange.

Animation

The third unique feature of GIF89a format images is that they can achieve simple frame-by-frame animation. By using special GIF animation tools, a series of GIF images can be placed in a single GIF89a file. Browsers will sequentially display each image in the file, just like the flipbook animation we used to play (or even draw) as children. In the GIF file, there are special control parts between each image that can be used to set the number of times the entire sequence (loop) is displayed from start to finish, the pause time between each two images, and whether the image space is erased from the background before the next image is displayed, and so on. By combining these features with those commonly found in GIFs (including separate color tables, transparency, interlaced scanning, etc.), it is possible to create very attractive and exquisite images.

Another important reason why simple GIF animations have a powerful effect is that animation effects can be obtained without writing programs specifically for HTML documents. However, it also has a very serious flaw, that is, it is limited to very small graphics like icon size, or only occupies a very narrow strip of the browser window: even if you are very careful not to repeat the static parts in consecutive animation units, GIF animations are very easy to become very large. Therefore, if the document contains multiple animations, the delay time for downloading these images may be very disliked by users. If there is any feature that deserves our careful attention and not be misused, it is the GIF animation.

Summary

All the tricks of GIFs - interlaced scanning, transparency, and animation - are not easily obtained and require special software to prepare these GIF files. Now many image software can save images created by users or obtained from external sources as GIF format, and most of them support transparency effects and can also achieve the interlaced scanning effect of GIF files. There are also a large number of shareware or free software specifically designed for these needs, including software programs that implement GIF animations.