{"id":5281,"date":"2025-03-05T15:14:19","date_gmt":"2025-03-05T20:14:19","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5281"},"modified":"2025-03-05T16:31:25","modified_gmt":"2025-03-05T21:31:25","slug":"movies-as-images","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/movies-as-images\/","title":{"rendered":"Movies as Images"},"content":{"rendered":"\n

Animated GIFs just suck for web performance, so don’t put them on websites. To quote Colin Bendell<\/a>:<\/p>\n\n\n\n

\n

Animated GIFs are terrible for web performance. They are HUGE in size, impact cellular data bills, require more CPU and memory,\u00a0cause repaints, and are battery killers.\u00a0<\/p>\n<\/blockquote>\n\n\n\n

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

<video<\/span> autoplay<\/span> loop<\/span> muted<\/span> inline<\/span> \n  src<\/span>=\"https:\/\/assets.codepen.io\/3\/fire-ring.mp4\"<\/span>><\/span>\n<\/video<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
That’s… attribute soup<\/em>. But it works. Plus there is a very good chance the .mp4<\/code> is way<\/em> smaller in file size than the GIF would be.<\/p>\n\n\n\n
My vote would be to always include controls<\/code> 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.<\/p>\n\n\n\n
Since 2017, Safari has supported this alternate approach:<\/p>\n\n\n
<img<\/span> src<\/span>=\"https:\/\/assets.codepen.io\/3\/fire-ring.mp4\"<\/span> alt<\/span>=\"\"<\/span> \/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Just an <img><\/code> tag! No attributes to remember and get right, and it has the exact same behavior. Except<\/em> the fact that there is no way to pause it, which is a bummer. <\/p>\n\n\n\n
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><\/code>-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.<\/p>\n\n\n\n
Examples:<\/p>\n\n\n\n