Functionality to stop animated images (GIFs and others)

[juliemoynat]

Hello,

In recent years, animated GIFs have become fashionable again and pose real readability problems when websites have not set up a system to stop them.

Recently, I came across this Stack Overflow topic where I found a beginning of a solution and I made it a bookmarklet. The proposed code only covers cases where GIF images have a .gif extension. However, on the web, there are sometimes GIFs where the URL of the image has no extension, or they can be .webp format. You can also sometimes find animated SVG images...

On the same Stack Overflow topic, there is another answer with another piece of code, however, if I enable it, it hides non-animated images and therefore does not really have the expected effect.

In short, I think that a feature to pause animated images would have a place in the Confort+ toolbar to make it easier to read web pages. The top of the top would be that it automatically stops them and adds an individual button on each one to launch them and then stop them again (play / pause). A Firefox extension did this before Firefox completely changed the way it worked; unfortunately it no longer exists.

I hope you can add this option.

Thank you for what you are doing.

[notabene]

Ah yes, good catch. A few years ago one could press Escape and stop animated GIFs on a page, but this seems to have disappeared at some point.

+1 for adding to Confort+, FWIW.

[juliemoynat]

Oh I'm so happy to see that this ticket is starting to be developed!

I would like to respond to this comment in the PR, from @Lausselloic :

TODO : Add a button to display intial picture? and allow user control gif playing?

I think we definitely need a button to display the initial picture (and to mask it again) because some animated images needs to be played to be understood or to understand the full context of a text nearby.

[Lausselloic]

Hello,

PR #62 improve the gif freeze function. It's not as easy as initialy implemented because in extension mode, there's many CORS limitation. So the only way to achieve that is to decode the gif file and extract the first frame to draw it in canvas, and still need to make some copy to bypass CORS limitations.

Before decoding the gif, there's a need to re-request the source element.

Other update, remove the button to activate the gif, too complex to implement in a good way. The only option for the user is to disable confort+ to enable gif if needed, or contact the webmaster to display only usefull gif :-D

[juliemoynat]

Oh :-( And what about a button inside the Confort+ toolbar to toggle GIF animation so?

I just discovered this project https://github.com/ctrl-freaks/freezeframe.js/, by the way. I don't know if that would help? It seems that they are creating a canvas element over the animated GIF so that, you would be able to hide the canvas element and display the animated image which is underneath. You can see the demo here: http://ctrl-freaks.github.io/freezeframe.js/

[Lausselloic]

I've updated the PR to use freezeframe and add a button in the quick toolbar when enable and also add a shortcut (ctrl+g) to enable/desable the feature on the flight

Could be tested here : https://confort-plus.orange.com/demo/ and https://confort-plus.orange.com/demo/gifpage.html

[juliemoynat]

I'm sorry for the response time… I can't see all the images on the demo page so I can't test completely (I only see one animated GIF). In any case, the solution seems to me to be a good first approach to the problem of animated images. (For a future version, we can imagine being able to launch the animation of one image at a time instead of all or nothing but I can see that it is more complex to set up :-) ).

[ffoodd]

An existing extension making just that should be studied → https://addons.mozilla.org/en-US/firefox/addon/toggleanigif/

[ffoodd]

And also, have a look at picture and prefers-reduced-motion combination, as suggested by Brad Frost.

[juliemoynat]

I don't like this article because it makes you think that stopping GIFs only when people have activated the "reduced motion" option in their OS is sufficient.

I talked about this on Twitter with Goetsu, and he made a CodePen where, if you haven't activated the "reduced motion" option in your OS, it will display a play / pause button: https://codepen.io/goetsubis/pen/GRgpKpp/

Even if I have reduced motion option activated, I would prefer to always have a play / pause button because, sometimes, GIFs are containing information and I would like to be able to play it when I want, when I'm ready to do it.

By the way, the reduced motion option is not addressing the same problem for users.

[ffoodd]

Very useful, thanks @juliemoynat !

[ffoodd]

Another POC by Steve Faulkner, using details and summary containing static image, overlaid on top of animated GIF: https://codepen.io/stevef/pen/ExPdNMM?editors=1000

Worth a try :)

[ffoodd]

Another library trying to solve this: gifa11y.