Most folks don’t realize that short animations embedded in the form of animated GIFs in their favorite websites come with huge performance, battery, file size and bandwidth penalties.
Animated GIFs are terrible for web performance: they’re typically 12x larger files than H.264 videos and take 2x the energy to load and display in a browser. And due to a paltry 256-color palette, they are limited in color range and just don’t look very good overall.
That’s because GIF, which is an acronym for the Graphics Interchange Format, is “not intended as a platform for animation” even though it can be done in a limited way, according to the wording from the original GIF89a specification.
Thankfully, it would seem that Apple’s Safari browser may help put an end to the practice of using GIFs as the web’s default format for micro-form videos, memes and cute animations.
That’s because Safari Technology Preview, a special version of Safari for developers to test upcoming web technologies in macOS and iOS, in its latest update permits web developers to embed true video formats like MP4 in HTML “img” tags.
Colin Bendell has now demonstrated (via Daring Fireball’s John Gruber) the key benefit of this cool new capability in Safari Technology Preview for Mac: embedding a true .MP4 video file in the “img” tag results in an unbelievable 20x faster rendering and 7x faster decoding versus its GIF counterpart, in addition to being one-fourth the file size.
Exhibit A: the source article from Colin, which embeds a few animated GIFs for illustrative purposes, is 46 MB on Chrome. The same webpage is just 2 MB in Safari Technology Preview with the GIFs converted into MP4 and used with the “img” tag.
“Now, our micro-form videos can be small and efficient (like MP4s) and they can can be easily preloaded, autoplayed and shared (like our old friend, the GIF),” Colin sums it up nicely.
Other benefits of this approach include the ability to easily save or share such animations, create space-saving animations in 4K by using HEIC (the H.265 codec) and more.
The table included below illustrates the kind of byte size savings that Colin has managed to achieve just by transcoding the trending top 100 animated GIF files from giphy.com and then converting them into the H.264, H.265, VP8, VP8 and WebP video formats.
This approach isn’t without its share of potential pitfalls because, at the moment, wrapping MP4 animations inside “img” tags often introduces a host of complicated issues that require lots of manual work on the developer’s part to ensure future compatibility.
That said, if you’d like to test this new feature out for yourself, you’ll have to download Safari Technology Preview from Apple. Safari Technology Preview can co-exist with the commercial version of Safari that’s already installed on your computer.
I hope it won’t take years for this new feature to catch on across web sites and blogs.
Do you love or hate animated GIFs as the web’s preferred format for short animations?
Sound off in the comments!