Safari _img_ tag solving the wrong problem | Hacker News Reader

Safari _img_ tag solving the wrong problem

lapcatsoftware.com

I'm annoyed that bloated animated GIFs have held on for as long as they have. I'm strongly in favor of allowing more efficient video formats to be used in their place anywhere that supports animated GIFs because that actually kills their niche. Allowing img tags to load videos creates an easy upgrade path letting webservers (and CDNs like Cloudflare etc) serve compressed videos in place of GIFs to supporting browsers without needing the HTML to be rewritten at all. Merely "discouraging" animated GIFs without making any change in the browser doesn't do anything to get us away from them.

OP's problem seems to be 50% that their browser's disallow-videos option doesn't apply to img tags which seems like an issue regardless of this feature, and 50% that this decision is impure in some way and only makes sense in the context of history and well yeah that's how things work out sometimes when backwards compatibility is king, as it is with browsers. If we ever find a way to stop the world and get everyone to agree to stop doing animated GIFs immediately so we can cleanly cut animation support from img tags, then sure I'll admit that might be the superior option over this.

> I'm annoyed that bloated animated GIFs have held on for as long as they have.

There are multiple factors: Browsers have lacked a video standard for silent, autoplaying, looping videos without a player UI for a long time because, well, there were GIFs and they worked okay for early web animations. It was the most compatible format too.

Videos had also lacked proper tooling to make them smaller resolution or crop them. Since the GIF format was simple, there were plenty of small/freeware tools for editing GIFs. Prevalence of libraries made it easier to integrate them into applications.

All those factors combined caused GIFs to stick around for a long time. Nowadays, there are too many standards, I wouldn't even know which format to use instead of GIF; is it AV1, OGG, WEBM, MP4?

> All those factors combined caused GIFs to stick around for a long time. Nowadays, there are too many standards, I wouldn't even know which format to use instead of GIF; is it AV1, OGG, WEBM, MP4?

For an alternative to GIF, the closest web standards are animated WebP or WebM. If you've tried them, the filesizes are much better than GIF. Unfortunately support on Safari is slow on rolling out [1] [2]. And using MP4 videos instead will never be a web standard since they are proprietary formats

[1]: https://caniuse.com/webm

[2]: https://caniuse.com/webp

Safari.. 15? Seems to have broken silent auto playing looping videos for me :/

apng is also an option for some cases, which has wide compatibility but it seems like people are generally not aware of it

webp can also do animation

> I'm strongly in favor of allowing more efficient video formats to be used in their place anywhere that supports animated GIFs because that actually kills their niche.

Haven't the sites that can be bothered to encode animated images as MP4 already done so and switched to the <video> tag? Who is left now in 2022 with GIF that would actually switch to MP4 and not just keep GIF, support for which seems to be in no danger of being removed? Especially since you'd still have to worry about backward compatibility, because neither Chrome nor Firefox have implemented <img> mp4 yet.

There are many cases in which animated images are used today where requiring autoplay would break. For example, an online group chat platform that uses tiny animated images for reaction indicators. Having to individually play each reaction image would make them unusable.

The proper way to handle this is to respect the prefers-reduced-motion CSS media feature. If I have that enabled, non-user-initiated animations should not run. I do not want to make an argument as to whether the <img> tag should natively do this or whether sites should handle this instead, just that prefers-reduced-motion seems like the right approach unless there's some strong reason to animate a given item regardless of that setting.

I don't think `prefers-reduced-motion` disabling gifs by default is the right approach here. The goal of the tag is to reduce non-essential motion, but gifs may have essential information on a frame other than the first.

There's definitely arguments to be made around whether or not you should have information in a gif, but I see this argument akin to whether or not a page should work without javascript. We've moved to a state on the web where usage is so high we can't really turn back.

> The goal of the tag is to reduce non-essential motion, but gifs may have essential information on a frame other than the first.

This is why I said I wasn't taking a stand on whether the <img> tag should apply this logic natively. It really depends on the content and context of the image. Not doing it natively means most sites won't bother to implement the prefers-reduced-motion, but doing it natively means images with meaningful content buried in the animation would effectively be broken.

> Having to individually play each reaction image would make them unusable.

Good, I'm not a fan of them ;-)

> The proper way to handle this is to respect the prefers-reduced-motion CSS media feature.

There's a big difference between clicking to play an animation and never playing an animation. The <video> element uses the former. But prefers-reduced-motion seems more appropriate for the latter.

In any case, why wouldn't prefers-reduced-motion also make reaction animations unusable?

Because prefers-reduced-motion isn't the default, but "no autoplay" is. And prefers-reduced-motion is also the correct answer here, because people who have prefers-reduced-motion enabled most likely don't want animating reaction images (they're a perfect example of the sort of motion that this setting is supposed to suppress).

> people who have prefers-reduced-motion enabled most likely don't want animating reaction images (they're a perfect example of the sort of motion that this setting is supposed to suppress).

I don't want AUTO-animating images. That's a crucial distinction. I still want to be able to see the animation, if desired. It should be under user control.

Reduced motion is not the kind of thing you can trivially turn off and on. You have to go layers deep into settings to find and change it. This is why click to play is the correct answer here.

You lost me "animated gifs are an abomination".

I love animated gifs that auto play, as long as there's no sound they're so versatile and widely compatible compared to most other methods. So much great internet meme culture revolves around gifs and I even like their somewhat forced limitations like limited color palette.

> I love animated gifs that auto play

That's fine, as long as the browser respects user autoplay preferences, then every user gets what they want.

> So much great internet meme culture revolves around gifs

Technically speaking, it's not clear how much this is true anymore. Many sites such as Twitter use <video> rather than <img> GIF. I love gifs in the loose sense, i.e., short-form videos. But from a technical standpoint, gifs are kind of an abomination: "The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way." https://www.w3.org/Graphics/GIF/spec-gif89a.txt

I know, but the vast majority of gifs render at least workably in the vast majority of renderers. There are edge cases that fail but I think they're still worth it.

There is a place in the web for animated images, which should be obvious from how much people still use GIF in 2022. Images can be easily embedded in user contents by a wide variety of websites.

Also if you forbid animated gifs, you should go one step further and forbid animated SVGs!

> Also if you forbid animated gifs, you should go one step further and forbid animated SVGs!

Nobody is suggesting to forbid animated images. The suggestion is that they respect the user's autoplay preferences, so you can make them click to play, like a video.

I don't see the problem with autoplaying. I want some platforms to autoplay, though autoplay is often abused by (American, for some reason) news sites to dump their stupid ads onto me. Using MP4 to replace GIF also makes total sense! A bit weird to use the <img> tag for this but it's... something I guess.

Features like animated GIFs and background videos sometimes need to be disabled, though.

In Firefox, this can be done by going to about:config and setting `image.animation_mode` to `none`. In other browsers you may need an addon to accomplish this. Browsers should really have a clear setting for this in the accessibility settings, though. Internet Explorer had an option for this, I don't get why browsers have dropped the ball on this.

> though autoplay is often abused by (American, for some reason) news sites to dump their stupid ads onto me

I discovered this feature from an ad on CNN.

> In other browsers you may need an addon to accomplish this.

That's the problem though. I make an extension that stops autoplaying videos. But the extension doesn't work on <img> mp4, because <img> has none of the API of a <video> element. There's no autoplay attribute, there's no JavaScript play and pause, no video controls, no DOM events. The <img> mp4 is effectively walled off.

I don't think `prefers-reduced-motion: reduce;` should block gifs from autoplaying. Gifs for better or for worse have been used for the last two decades on the web, and they may hold critical information on a frame other than their first.

The better approach here would be to add another option here such as `prefers-reduced-motion: enforce`, which overrides the page's preferences, at the risk of breaking the page. This would be similar to how a forced high contrast mode works today, which overrides a page's styling. This would guarantee that `reduce` doesn't break any existing experiences, while still providing the option for those with vestibular motion disorders.

I actually like Safari's approach with the img tag - gifs have been used as a backup for no-sound autoplaying video for years now, leading to so much wasted bandwidth and poorly encoded "video". At the very least they're giving a suggestion that would alleviate that issue.

> This would guarantee that `reduce` doesn't break any existing experiences, while still providing the option for those with vestibular motion disorders.

I don't have a vestibular motion disorder. I just don't want videos to autoplay. A lot of people don't want videos, or gifs, to autoplay.

Do we actually need anything other than the existing "Never Auto-Play" preference?

I don't really see the problem with animated image formats, but I agree that they should respect the autoplay settings. Even plain animated GIFs.

TIL that in certain browsers you can play a video in an <img> element ... and that disappoints me because I always thought <img> was supposed to be used for static images, while <video>, <svg> and <canvas> elements were more appropriate for animated images.

The CSS Painting API[1] looks like it will "allows web content authors to use videos as a CSS background-image", so developers will be able to add videos (via the API's restricted 2D canvas implementation) as background images to any (block-like?) HTML display element. The API isn't - yet - supported across browsers[2]. Of course, the Painting API is not as simple as Safari's solution.

None of this addresses the accessibility issues, as others have pointed out.

[1] - https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...

[2] - https://caniuse.com/css-paint-api

> Make a gif a static image until the user clicks on it to animate, just like a video.

This will only lead to animations implemented in pure JavaScript.

The whole point why people use gifs is because it’s a way around forum limitations. They only allow images..

By the way, Stop The Madness is a godsend, nullifying some of the worst anti-user crap (like forbidding paste in text fields, auto play, etc) inflicted upon innocent browser users.

Until there is a place in hell for such people, Stop The Madness is even more necessary than an ad blocker.

Reply on news.ycombinator.com