Movies as Images

Animated GIFs just suck for web performance, so don’t put them on websites. To quote Colin Bendell:

Animated GIFs are terrible for web performance. They are HUGE in size, impact cellular data bills, require more CPU and memory, cause repaints, and are battery killers. 

So if you need that same behavior of automatically playing silent moving images, we’ve learned to do to use a <video> instead:

<video autoplay loop muted inline 
  src="https://assets.codepen.io/3/fire-ring.mp4">
</video>Code language: HTML, XML (xml)

That’s… attribute soup. But it works. Plus there is a very good chance the .mp4 is way smaller in file size than the GIF would be.

My vote would be to always include controls as another attribute on there. Yes it adds some UI over the image, but that UI allows the user to hit a stop button, which is an accessibility feature and one I use often to stop forever-playing anyway. If you don’t, at least wire up some CSS or JavaScript that stops the playing on click.

Since 2017, Safari has supported this alternate approach:

<img src="https://assets.codepen.io/3/fire-ring.mp4" alt="" />Code language: HTML, XML (xml)

Just an <img> tag! No attributes to remember and get right, and it has the exact same behavior. Except the fact that there is no way to pause it, which is a bummer.

There are various ways to ship MP4-as-img by falling back to other techniques. When I started writing this and testing things out I was all prepared to try those and be annoyed at non-Safari browsers for not supporting this idea. But I’ve changed my tune. The fact that the <video>-based technique works fine across browsers and has a clear path toward pausing the movement makes me feel like MP4-as-img is just a sub-part technique and probably shouldn’t be used at all.

Examples: