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!

  • This is genuinely a good move! While I can see Chrome and Firefox adopting this idea quickly the odd duck out will probably be Microsoft. It will be interesting to see how long it takes them to get their Internet Explorer and Edge browsers on board with this.

    But considering how long it takes for official CSS and HTML specs to become implemented and for consumers to upgrade to browsers that can take advantage of the the new features, I wouldn’t expect to see this become a standard approach for 3-5 years minimum at this point 🙁

  • Iskren Donev

    Just to clarify – is Safari Technology Preview prohibiting the use of .GIF files in the tags or does it just enable support for true video formats?

    If there is still support for .GIF files, I am sad to say that the change will be very slow – first the other major browsers will need to get on board and start supporting video formats in tags. And after that we need to wait for the websites to update themselves as well.

    If Apple has opted for the more aggressive approach of not allowing .GIF extensions in the tag, that will put pressure on websites to adopt video formats and that will speed up adoption at the expense of short-term Apple user discomfort.