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

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!

Some things to note:

• If you’ve used video tags in the past, you probably know that mobile browsers don’t allow autoplay videos. However, they allow autoplay muted videos!
• Although video format support varies across browser, virtually every browser supports the H.264 codec.

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