How to dispose of unwanted Christmas GIFs

No, it wasn’t a typo. We’re talking about huge, Christmas-related animations that slow web pages down. We’ve come across a few this year, including a 640KB GIF that depicted snow falling over a static, photographic backdrop.

Sometimes, animated GIFs will be the right tool for the job. For example, they can be perfect for very small, simple animations, such as a spinning wheel. However, for banners that take up significant chunks of the screen, there are better ways.

To test the point, we tried a simple experiment – how would the performance of an animated GIF stack up against a CSS solution?

Here are the pages we tested:

The animated GIF: https://community.nccgroup-webperf.com/playground/xmas14/xmas-gif.html

The CSS animation: https://community.nccgroup-webperf.com/playground/xmas14/xmastest.html

You might have noticed that they’re not quite identical. We didn’t spend too long polishing the GIF, so the animation isn’t exactly smooth. If it were, we’d have ended up with more frames and a larger file. But we thought we’d have enough to prove the point: the animated GIF weighed in at a fairly substantial 515KB.

The CSS animation

To get the CSS version working, we first had to overlay three divs, each with a different background image. One contained the photographic backdrop, while the other two contained snowy images (PNGs depicting snowflakes on a transparent background). We used two snowy images in order to get a parallax effect, with the closer snowflakes appearing to fall faster.

Next, we had to get the snow to move. We did this with CSS3’s @keyframes rule. The drawback is that it’s not supported in IE8, IE9 or Opera Mini. However, if universal browser support were essential, you could always fall back to the GIF.

To get a background image to move down, just use:

@keyframes animatesnow {
0% {background-position:0% 100%;}
100% {background-position:0% 0%;}
}

This then needs to be bound to the element containing the background image:

animation: animatesnow 20s linear infinite;

Here, “20s” sets the time it should take for the animation to complete, “linear” means it will run at a constant speed and “infinite” means it will run … infinitely!

We got the parallax effect by setting a shorter duration (10 seconds) for the animation depicting larger snowflakes.

For brevity, we’ve omitted the various browser prefixes (which ensure maximum compatibility), but you can view the complete source on the demo.

So how much does all this add to page weight? After optimising the images (using TinyPNG and JPEGMini) and minifying the CSS, here’s what we ended up with:

File Size
Photographic backdrop JPEG 135KB
Snow 1 PNG 18KB
Snow 2 PNG 19KB
CSS (compressed) 309 bytes
Total: 172KB

This is about a third of the weight added by the GIF, suggesting we’ll be much better off in performance terms. However, the CSS option does involve a trade-off. Although total page size will be smaller, we’ve also used three files (four if you count the CSS) to achieve what we did with just one GIF. This means more HTTP requests/responses, potentially adding to page load time.

There is a way around this: Base64 encode the PNGs and embed them in the CSS. This reduces the number of files, although using data URIs in CSS should be approached with caution. Since all the CSS must be downloaded before the page can start to render, visitors may be left staring at a blank screen for too long if that CSS is bloated with too many long data URIs. This is why we didn’t embed the JPEG. It’s also worth remembering that a data URI will always be downloaded along with the rest of the CSS, even on pages where the image isn’t needed.

Still, we thought we’d try a version that used Base64 encoding for the PNGs.

File Size
Photographic backdrop JPEG 135KB
CSS (compressed) 36KB
Total: 171KB

You can see that this worked quite well in terms of page weight. The CSS compressed from 50KB down to 36KB, thanks to Gzip, so the cumulative file size is actually slightly smaller than it was when we used binary images.

Performance

Unsurprisingly, the CSS animation outperformed the GIF by a considerable margin. Here are the results in Chrome and Internet Explorer 11 (tested in Performance Analyser at 2Mbps).

Chrome Render start (s) Onload (s) Total time (s)
Animated GIF 1.093 3.089 3.126
CSS animation 0.293 0.136 0.925
CSS animation with Base64 encoded images 0.395 0.275 0.912
Internet Explorer 11
Animated GIF 1.197 2.280 2.289
CSS animation 0.897 0.095 0.851
CSS animation with Base64 encoded images 0.897 0.252 0.859

Conclusion

While many sites include Christmas decorations in some form, it’s all too easy to implement something that has a serious negative impact on performance. It’s therefore worth testing a couple of different options to check that your chosen animation doesn’t slow your site down at the worst possible time.

One thought on “How to dispose of unwanted Christmas GIFs

Leave a Reply

Your email address will not be published. Required fields are marked *