GIFs are one of the oldest image formats on the web.

The Graphics Interchange Format was first introduced in 1987, and advances in browser technology in the intervening years have reduced the number of scenarios in which GIF is the most suitable image format. In general, animated graphics are one of the format’s few remaining strongholds, which is ironic given that this isn’t something the format was designed for:

The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.

In this article, we’ll explore three ways in which the modern web can offer us a better solution to animation.

1. HTML5 video

The HTML5 specification makes adding video content to pages almost as easy as adding images, the handy <video> element side-stepping the need for special plugins or quirky markup. Support for modern video formats means that for looped Buzzfeed-style clips, an HTML5 video can often provide a more lightweight solution than a GIF. What’s more, we avoid the hard limit of 256 colours enforced by the old image format.

Below, I’ve presented an animation of planet Earth courtesy of glittering.blue. On the left is an animated GIF, and on the right is an HTML5 video. I haven’t bothered to synchronize the animations. Ain’t nobody got time for dat.

Browser support for the video technique shown above is around 90%. The disputes around containers and codecs which plagued the standard several years ago have died down, and H.264 encoded video stored in an MP4 container has emerged as the dominant format. That said, including a WebM version in a separate source declaration for maximum browser coverage is not a bad idea.

Interesting fact: This is the same technique which Imgur uses to power its GIFV format - all GIFs uploaded to the site are automatically converted to MP4 and WebM.

Resources

• https://www.html5rocks.com/en/tutorials/video/basics/
• https://rigor.com/blog/optimizing-animated-gifs-with-html5-video

2. Pure CSS

GIFs are also commonly used for animated UI elements and other such bells & whistles, particularly on older websites. In situations where the animated element is comprised of simple lines and shapes (in contrast to, say, a photograph), vector-based graphics such as SVG or pure CSS is often a far better solution than a raster-based format like GIF or PNG.

Creating shapes and effects with pure CSS means that they are resolution-independent - unlike GIFs, they can be infinitely scaled up and will always look crisp and sharp. They are also remarkably powerful, and it’s possible to create some extremely complex images simply using styled HTML elements.

It’s worth noting that while CSS3 keyframe animations have a great level of browser support (around 90%), they can also be difficult to create at scale, since by default they lack any controls that would help in debugging animation problems.

Resources

• https://sarasoueidan.com/blog/svg-vs-gif/
• https://www.smashingmagazine.com/2011/05/an-introduction-to-css3-keyframe-animations/

3. Sprites

Unlike the two techniques above, sprites are a little bit of a hack. In their defense, though, sprites are a very old hack, which is somehow preferable to a newfangled faddish hack.

A spritesheet is essentially one giant image containing every frame of your animation in sequence. You apply the image as a background-image to an element on your page, then use the steps() timing function of CSS3 keyframe animation to iterate through the frames.

The use cases for this technique are somewhat limited - it’s well suited to animations for which SVG is not a good fit (e.g. pixel art) and which require transparency or an extremely high degree of control (thereby ruling out video). Google has made use of sprite animation in several of its doodles.

As well as being lightweight, spritesheet animations offer a far greater level of control than a GIF, since they can be extensively manipulated with CSS and JavaScript. If you’re interested in sprites, I’ve written a tutorial for building complex responsive sprite animation using GreenSock for SitePoint.com.

Resources

• http://designingforperformance.com/optimizing-images/#replacing-image-requests
• https://www.sitepoint.com/responsive-sprite-animations-imagemagick-greensock/

Disclaimer

All the usual caveats apply - these are not scientific comparisons, simply demonstrations of key principles. YMMV. There are also dozens of reasons why integrating these techniques into your workflow may be tricky. But hey, an awareness of the opportunities presented by the modern web is never a bad thing.

Thanks for reading!

Header photo by Chirayu Trivedi on Unsplash.

Return to Blog