Varun Ramesh's Blog

Loop, Autoplay, Muted, Playsinline - Say Goodbye to Animated GIFs

Tuesday, April 17th 2018

Animated GIFs are awesome for showing off projects. Unfortunately, GIFs have significant limitations. For one, they only support 256 colors per frame. This means that some color information is lost, resulting in that classic 90s webpage aesthetic. Futhermore, GIFs are big - they are losslessly compressed. This GIF below of Mario Kart from one of my AI projects is almost 10 MB!

Animated GIF, 15 FPS, 9.4 MB

If only we could use videos - compression techniques for video are lossy and more advanced, using techniques like motion vectors. Well, it turns out we can combine the loop, autoplay, muted, and playsinline attributes on HTML5 video elements to make them behave exactly like GIFs.

<video loop autoplay muted playsinline src="..."></video>

Here’s the video that the GIF above was generated from. It’s way smoother, and it’s only 1.1 MB!

H.264 Video, 30 FPS, 1.1 MB

Some things to note:

Better GIF Compression

If you must use a GIF, either for a GitHub README or some other restricted environment, I highly recommend giflossy. It improves GIF size by enabling lossy compression. You can adjust how lossy the compression is in order to reach a target file size.

Similar Posts

ChatGPT is Good at Roleplaying Characters
Proctor Postmortem
I Allowed All Web Push Notifications for a Week