Movies as Images
Movies as Images êŽë š
Animated GIFs just suck for web performance, so donât put them on websites. To quote Colin Bendell:
Colin Bendell (calendar.perfplanet.com
)

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>
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.
Note
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="" />
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.