Animated pictures: what is it and how to create them


Each of the Internet users is already quite familiar with the cartoon pictures that appear on almost every page, the so-called dynamic or animated GIFs. Most often, these are advertising banners. It is understandable – firstly, animation attracts much more attention than a static picture, and secondly, much more information can be contained in a small area due to alternating frames. But these same properties can be very useful to any webmaster who wants to make his site more attractive. Therefore, this article is offered to your attention, which considers the issues of creating and using such pictures.

What is animated GIF.

Dynamic GIF can be defined as a graphic file standard that allows you to place several images in one file for displaying them sequentially on the screen in order to create an animation effect. The first such standard was GIF87a, which provided the following features for a GIF file:
Interlacing. At first, only the “skeleton” of the image is loaded, then, as it is loaded, it is detailed. This allows on slow lines not to load the entire graphic file in order to get an idea about it.
Compression (compression) according to the LZW algorithm. This trait of GIFs keeps them in the lead in terms of smallest file size.

Multiple images in one file.

The location of the picture on the logical screen. That is, the format made it possible to define a logical screen area for displaying images, and place pictures in an arbitrary place in this area.
Later, this standard was extended by the GIF89a specification, which added the following features:
Include comments in the graphic file (not displayed on the screen, but can be read by a program that supports GIF89a).
Delay control before frame change (set to 1/100 of a second, or waiting for user input).
Manage the deletion of the previous image. The previous image can be left, replaced with the background color or whatever was before it.
Definition of transparent color.

Text output.

Creation of control blocks by application programs (application-specific extensions). Inside a GIF file, you can create a block that will be ignored by all programs except the one for which it is intended.
As you can see, the GIF89a standard is a very powerful tool for creating animations and applying them to the WWW, however, it is necessary to take into account the fact that if some special graphics programs support this standard in full, then this does not apply to the most common browsers, therefore, to apply dynamic GIFs for the WWW, it is better to focus not on the standard itself, but on the capabilities of browsers to support it.

GIF89a file structure.
The GIF89a file consists of blocks arranged in a certain sequence. There are three types of blocks:
Control blocks: title, description of the logical screen, control of graphic extensions, end sign – determine how images will be processed;
Image blocks: image, text, palette description – contain data for the image itself;
Special blocks: comments, application extensions – do not affect the image in any way, but can be processed by application programs at their discretion. Among such blocks, the Netscape Loop application block should be highlighted – it is present in almost every animation (at the same time, this is the only application program block, in this case Netscape, that I have met). If the browser (not just Netscape now) sees this block, it plays the animation not just once, but as many times as it says once, or infinitely).
The general scheme for following these blocks is approximately as follows:
The header – GIF87a or GIF89a – defines the file format.
Description of the logical screen (the size of the screen that this file “claims” is set to)
Description of the global palette (optional, but highly recommended)
An arbitrary number of image blocks (including text ones), or pairs of <graphic extensions management – image> blocks. The graphics extension control block may contain an indication of the local palette, location on the logical screen, delay and method of deleting the image, and affects only the image block immediately following it.

Terminator (terminator).

Comments and special blocks can be placed anywhere except:
Before the description of the global palette (if any) or before the description of the logical screen.
Between the control block and the corresponding image block (that is, they can be there, but then the control block will no longer control anything)
After the sign of the end.
Also, if you want to put the Netscape Loop extension in your file, then this block must immediately follow the global palette.