We have all been amused by animated GIFs on lots of websites -- dancing babies, cute cats, flying birds, funny memes, and countless others. Despite their popularity, animated GIFs can be very heavy and can contribute significantly to page performance issues.
How significantly? We have seen instances of animated GIFs as large as 21 MB that contain more than 800 frames and run for 28 seconds!
As you can imagine, this can have a large negative impact on performance. Fortunately, there are now some lighter alternatives that provide the same interactive feeling. In this blog, we'll review the most popular alternatives to animated GIFs and discuss their advantages and limitations.
As a general rule, many developers embedded animated GIFs in emails because of their high level of compatibility with email clients. However, this is not always the case anymore. A 2017 Playable study that examined device type, email client, screen resolution, and network conditions, found that an animated GIF is the best choice for just 27% of email recipients.
Converting animated GIFs to MP4 video provides tremendous byte savings. In the case of our representative image, the MP4 version is only 1.39 MB -- just 6% of the original size. Using the HTML5 <video> element also satisfies the four main characteristics of an animated GIF:
- Automatically play
- Continuously loop
- Play inline
- Remain silent
This can be accomplished with the <video> tag via the autoplay, loop, muted, and plays inline attributes, such as:
<video autoplay loop muted playsinline></video>
Similar to animated GIFs, MP4 videos have universal browser support, which eliminates compatibility concerns.
The main downsides to using MP4 instead of animated GIFs are creating the video content and re-writing the HTML code. Again, use of the <video> tag with appropriate attributes provides the required behavior. Moving forward, using video instead of animated GIFs is the recommended web development practice.
WebM video provides the most byte savings of all the available options. In our case, the WebM version is only 0.98 MB, which represents 5% of the original size.
WebM delivers the same overall benefits as MP4, but with lower browser compatibility:
However, the <video> element can also help here. The <video> element requires one or more <source> child elements pointing to different video files that the browser can choose from, depending on the browser's format support. By providing both WebM and MP4, a browser that doesn't support WebM can fall back to MP4:
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
Users of Akamai Image & Video Manager (IVM) should note that IVM provides automatic optimization of MP4 videos (including transcoding to WebM format).
If you don't want to convert from animated GIFs to MP4/WebM video, you can gain some byte savings by also creating animated WebP versions. In our example, the animated WebP derivative is 9.85 MB (45% of the original size). Note that this only works with browsers that support WebP format:
IVM also provides automatic optimization of animated GIFs (compression for byte savings and creation of animated WebP derivatives).
Know Your Options
There are now multiple viable options to animated GIFs. While they may not apply to all situations -- and some require more work than others -- it's important to be aware of the alternatives and be prepared to discuss them with your creative and development teams.
As a reference, this table shows the results from the sample animated GIF: