Loop, Autoplay, Muted - 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!
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
muted attributes on HTML5
video elements to make them behave exactly like GIFs.
<video loop autoplay muted 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
autoplayvideos. However, they allow
- 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.