Articles index

Safari <img> solving the wrong problem

May 4 2022 by Jeff Johnson
Support this blog: StopTheMadness, Tweaks for Twitter, StopTheScript, Link Unshortener, PayPal.Me

Today I learned that Safari, and only Safari, allows the HTML image element <img> to show a video. A web page just has to set the src attribute of an <img> to an MP4 video URL. The video will auto-play, albeit without sound, even if you've set your Safari Preferences to "Never Auto-Play". Here's an example.

It turns out that this feature was introduced in early 2018, but I didn't remember the announcement because I didn't introduce the "Stop autoplaying videos" feature to my Safari extension StopTheMadness until late 2019. The motivation behind allowing videos for images was described by the WebKit team:

Animated image formats are very popular, but they easily become large, bandwidth intensive file sizes. To address the performance impact, WebKit in Safari now supports loading H.264 encoded MP4 video with an HTML tag. This allows content authors to replace animated GIF files that are much larger than H.264 video files and require more processing power to display. Beyond the performance gains, this change also allows web content authors to use videos as a CSS background-image.

Some detailed information about this change is available in the blog post Evolution of : Gif without the GIF by Colin Bendell.

In my opinion, Safari is solving the wrong problem here. Animated gifs are anachronisms, abominations, much like the deprecated HTML <marquee> element. For the reasons cited in the WebKit blog post, many web sites have already switched from <img> gif elements to <video> elements. When you see a "gif" in a tweet on Twitter, that's actually a short video. (However, Twitter still allows true animated gif images for user profile photos, which is awful. My Safari extension Tweaks for Twitter actually has a feature to replace animated gifs in profile photos with a generic static image.) It's widely agreed that gifs are bad, but the solution is not to make gifs "more efficient", because so many web browser users hate auto-playing animated gifs, for the same reason that they hate auto-playing videos. Just like animated gifs, videos in <img> elements are an anti-feature, not a feature.

The solution to the animated gif problem is to discourage the use of animated gifs and instead encourage the use of <video> elements that do respect the user's auto-play preference. This can be accomplished by making animated gifs respect the user's auto-play preference too! If animated gifs don't auto-play, then there's little advantage to using them over videos. Make a gif a static image until the user clicks on it to animate, just like a video.

All too often, the web browser vendors think of the needs of web developers first and the needs of users only second, if at all. This is yet another case. Users don't want animated images and videos that can't be blocked! Safari, please stop the madness.

Support this blog: StopTheMadness, Tweaks for Twitter, StopTheScript, Link Unshortener, PayPal.Me

Articles index