Craig Francis

Animated GIFs

An animated GIF is typically a small image that can be used on a website to create basic animation effects.


The Graphics Interchange Format (GIF) file was originally created by CompuServe in 1987 (GIF87a). Due to its support in most internet browsers, it has become one of the most popular image file formats on the internet, along with JPEG and PNG.

Images stored in the GIF format are limited to 256 colours and are traditionally used in logos and simple graphics. In contrast to JPEG compression, it works well with sharp colour contrasts which can often be found when text is placed on a solid colour background, whereas JPEG will try to smudge the hard edge when compressing the image.

The GIF specification was expended in 1989 (GIF89a) to add (among other things) animation capabilities. This involved storing multiple images within the same file, each with their own 256 colour pallet and a flag to determine the delay between images (frames). Due to the fact that the images (frames) are independent within the file, simple animations which are only 10 frames, at 20KB each, will create a file about 200KB in size. This is why most GIF animations tend to remain fairly small and basic, using as few colours as possible.


Typically animated GIF's are used on websites to create distractions. This is based on the view that the human eye notices elements which are changing in the peripheral vision. An example of this is when a website wants to highlight a new feature, they may use a small "new" icon next to that feature, where the icon is animated in some way - for example with the use of rapidly changing the background colour (flashing).

Unfortunately most animations can cause too much of distraction for visitors. This is perhaps more relevant with visitors who suffer with certain cognitive or learning disabilities, whereby the repetitive flashing of text and graphics can make it impossible to read the main body of text.

Fortunately, because animations can become a major problem, some browsers now allow the visitor to stop them, like Firefox, which uses the [esc] key. However it must be noted that not all browsers have this feature, and many people do not even know it exists. This makes it quite common for visitors to leave a website if they find that trying to read the text is too difficult.


Websites have often used animated GIF's for banners, as these frequently cause the websites visitors to view the banner before the main content on the page. Presumably this is done to increase the possibility of the visitor deciding to use that banner, for the financial gain of the websites author, at the expense of potentially loosing visitors.

However the effectiveness of banners is declining. Due to the constant abuse of basic animations and bright, high contrast colours, frequent internet users have developed a phenomenon called banner blindness, whereby banners and banner-like elements on the page are simply ignored, or overlooked by the visitor. This is why text based adverts are becoming more commonplace, as these are small inoffensive blocks of text which are related (relevant) to the current page.

Text in images

Sometimes website authors will use an animated GIF to show text based information. If this is the case, there should be a text equivalent for visitors who are unable to view the images, for example search engine spiders and visitors who use screen readers. The text based equivalent should be provided though the alt or longdesc attributes found on the images, unless such a description does not provide any value to the document (which could be the case if the image is present just for visual decoration).

It should be kept in mind that text found within images may still be inaccessible to some visitors who do not use assistive technologies that provide access to the text equivalent. This can become an issue if the text is too small, as browsers do not normally resize images when the user changes the text size. In addition, if the text is involved in the animation, some visitors will be unable to read it, as the movement might be distracting, or even the amount of time it is displayed might not be long enough to read.

Still useful though

Although, despite the issues listed above, animated GIF's can be still be useful. It might be the case that a simple animation can be used to explain a complex theory, or show something that may be difficult to visualise with text alone. For example, when trying to explain how a car engine works, a small animation of the piston phases can clear up allot of the ambiguity that a text description can create - hence the phrase "a picture is worth a thousand words".

A useful alternative though is though the use of a small Flash animation. Usually these files can be much smaller and allow an interactive element to the animation, perhaps the most basic being the ability to allow the visitor to start the animation when it is convenient for them, without it looping or causing a distraction when they are not using it. Giving this control to the website visitor can be particularly useful for professional website authors, as they abide by the Web Content Accessibility Guidelines (WAI), which states that websites should avoid causing the screen to flicker.

Any feedback would be greatly appreciated, I don't include comments due to the admin time required, but if you email me, I will reply and make appropriate updates. Also, if you would like to take a copy of this article, please read the terms this article is released under. This article was originally written Monday 27th November 2006.