The Impact Animated Images
can have on a Web Page

An animated image whether a gif animation, a java applet, DHTML or Flash, can have more impact on a web page than you ever imagined

But when you first create a web page adding an animated image is probably not one of your first thoughts.

If the animated image is an add on or after thought, have you asked yourself, what impact does adding it have on web page load time ?

1. What about a simple animated gif 100 x 100 pixels (base image 2.4kB) of a character in an armchair turning the pages of a newspaper. It's nothing complicated but it has a file size of 22kB.

Note: 22kB is 22 kilo Bytes, or 22,000 Bytes in computer speak.

2. An animated image applet 150 x 150 pixels comprising an animated fade effect. To create this animated image in the browser requires the image (6kB) plus a java class file for the fade effect (7kB) and a class player (10kB) a total of 23kB.

3. Or a java applet effect of a 140 x 140 pixel image being rotated back & forth by 30 degrees. This requires the image (8kB) and a java class file (10kB), a total of 18kB.

4. What about a Flash animated image involving a simple fade in on a 140x140 pixel image. This requires 2.5kB of flash code and 6.5kB flash object, a total of 9kB.

5. Or a DHTML animated image floating in the background requires the image (8kB) plus some javascript code (2kB), a total of 10kB.

6. Finally Microsoft's DXImage transforms that work to a limited extent in IE4 and fully in IE5.5 and above. Dozens of complex effects can be created but a simple image fade would require the image, say 8kB plus 2kB of code, a total of 10kB.

For the six techniques given for producing an animated image the impact on page size varies from 23kB to 9kB with an average of 15kB.

Whilst it might appear that Flash produces the smallest animated image, this is only true for this example and certainly does not apply in general.

Flash files can become quite large as the complexity of the animation increases.

One example of a poorly designed flash animated image was recently found on a website (shown opposite).

It comprised a simple rotation and fade of three images with a small amount of animated text.

The flash animated image was 135 x 300 pixels but weighed in with a massive file size of 128kB.

A typical HTML web page with 1000 words of text and a 700 x 120 image header the page code would be around 28kB.

So adding just one simple animated image (not the 128kB example) adds between 32% to 82% to the page file size.

With 8 seconds being the benchmark maximum for page download times on a 56kb dial up connection this could add from 2 to 5 seconds to the download time of a web page.

The addition of an animated image could make our web page
example take four times longer to load in a visitor's web browser

How the animated image is implemented could have a significant impact on download times, which is especially important for an ecommerce website.

Sincerely

Making Your Website Better for You