This would require adding a new thumbnail parameter to generate "frozen" thumbnails for animgifs, and some way to switch between normal and "frozen" thumbnails.

I wonder what are the reasons for page authors to use animated gifs instead of videos, which seems like a more appropriate technology. Is it just that videos are harder to work with (in which case maybe we should offer automated conversion) or browser compatibility concerns or concerns about the video player UI, or do they actually want the animations to autoplay and loop?

Automatic conversions at Commons would help. In most cases, people are adding what's easily available to them.

Browser compatibility will be an issue in some cases. That is likely the motivation behind T55167.

I think the reporter doesn't ask for an option to create non-animated thumbs from animated gifs, but an option to stop gif animation on a page. I don't know if that's possible.

Converting animated gifs to videos would be a good workaround, though

In T85838#955856, @Whatamidoing-WMF wrote:

Browser compatibility will be an issue in some cases. That is likely the motivation behind T55167.

There isn't much UX difference between animated GIF and animated PNG; both loop infinitely and neither has any controls with which the user could affect that.

In T85838#955883, @Ciencia_Al_Poder wrote:

I think the reporter doesn't ask for an option to create non-animated thumbs from animated gifs, but an option to stop gif animation on a page. I don't know if that's possible.

There is no such thing as stopping an animated image per se (some browsers expose the functionality to users - e.g. in IE you can press ESC to stop all animation - and others expose it to browser plugins but none that I know of exposes it to web pages); the closest thing that can be done is to remove the animated image and replace it with a snapshot. And to do that we either need to add functionality to MediaWiki to generate such snapshots, or you have to create a snapshot on the fly on the client-side (possible with canvas, e.g. giffer does it; no IE8 support but you don't have to download an extra image).

@Tgr I think you're looking for a "perfect" solution, and I'm aiming for "done". Giving me a button the covers up the blinking/distracting/annoying thing with a plain gray box of the same size and shape is good enough for my purposes.

BTW twitter can pause GIFs. Maybe we can use their solution? https://twitter.com/_tinychen/status/717135250862673920

In T85838#2179899, @Yanpas wrote:

BTW twitter can pause GIFs. Maybe we can use their solution? https://twitter.com/_tinychen/status/717135250862673920

I believe they convert the GIF to a video in a more efficient format that can be played in HTML <video> element.

In T85838#1898827, @Whatamidoing-WMF wrote:

I think you're looking for a "perfect" solution, and I'm aiming for "done". Giving me a button the covers up the blinking/distracting/annoying thing with a plain gray box of the same size and shape is good enough for my purposes.

For an imperfect solution we could detect animated gifs and give them a characteristic class in the output html. This should be easy.

Then, user javascript / a widget could add an option to blank the image.

This is required by WCAG 2.0 SC 2.2.2: "For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential"

In T85838#955948, @Tgr wrote:

There is no such thing as stopping an animated image per se (some browsers expose the functionality to users - e.g. in IE you can press ESC to stop all animation - and others expose it to browser plugins but none that I know of exposes it to web pages); the closest thing that can be done is to remove the animated image and replace it with a snapshot. And to do that we either need to add functionality to MediaWiki to generate such snapshots, or you have to create a snapshot on the fly on the client-side (possible with canvas, e.g. giffer does it; no IE8 support but you don't have to download an extra image).

There's no longer a browser support issue, as JS isn't run for IE8 anymore, so using a canvas is now an option. However, this doesn't seem to actually pause the gif on the frame clicked. Instead it just shows its first frame. (Tested only on Chrome.)

In T85838#955840, @Tgr wrote:

This would require adding a new thumbnail parameter to generate "frozen" thumbnails for animgifs, and some way to switch between normal and "frozen" thumbnails.

I wonder what are the reasons for page authors to use animated gifs instead of videos, which seems like a more appropriate technology. Is it just that videos are harder to work with (in which case maybe we should offer automated conversion) or browser compatibility concerns or concerns about the video player UI, or do they actually want the animations to autoplay and loop?

Speaking as an offender, I used an animated GIF on frame rate control because:

• I don't know how to loop a video with TimedMediaHandler
• Because compression artifacts are highly undesirable for this example
• Because creating an animated GIF was much easier for this particular case (two frames in an image editing program, done)

In T85838#4055526, @tstarling wrote:

This is required by WCAG 2.0 SC 2.2.2: "For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential"

Maybe we should proceed with this to help people with special needs and the accessibility cause in general. We can use Gifffer to control GIF playback. Gifffer is tiny and non-invasive, leaving normal GIFs alone. To disable automatic playback, the data-gifffer attribute of the img tag should be used instead of src:

<img data-gifffer="image.gif" />

Demo is here.

Does including Gifffer look feasible?

In T85838#6532138, @AlexisJazz wrote:

Speaking as an offender, I used an animated GIF on frame rate control because:

• I don't know how to loop a video with TimedMediaHandler

It's not necessary to loop a video. If someone wants to see the video again, they can replay it.

I acknowledge that doesn't deal with the artifact issue.

I actually edited the page frame rate control to replace the embed with a link carrying a flash warning. Not only does the image violate the WCAG 2.0 A requirement to provide a pause, it also potentially violates the WCAG 2.0 A requirement not to flash at more than 3 times per second as a potential seizure trigger; while it may be small enough on a big screen not to violate this requirement, I'm concerned about the math on smaller screens.

In T85838#7875197, @Thisisnotatest wrote:

In T85838#6532138, @AlexisJazz wrote:

Speaking as an offender, I used an animated GIF on frame rate control because:

• I don't know how to loop a video with TimedMediaHandler

It's not necessary to loop a video. If someone wants to see the video again, they can replay it.

Except that makes little sense for the example as it's just 2 frames. Playing it once won't achieve any effect at all.

In T85838#7875219, @Thisisnotatest wrote:

I actually edited the page frame rate control to replace the embed with a link carrying a flash warning. Not only does the image violate the WCAG 2.0 A requirement to provide a pause, it also potentially violates the WCAG 2.0 A requirement not to flash at more than 3 times per second as a potential seizure trigger; while it may be small enough on a big screen not to violate this requirement, I'm concerned about the math on smaller screens.

On a small enough screen you would scroll it out of sight, so it wouldn't be "presented in parallel with other content". And the contrast of the FRC example is very low, making it much less of a trigger.

That being said, controls would be really useful here so the flicker in the peripheral vision of the reader could be fully eliminated and a decent size thumbnail could be used.

In T85838#7875264, @AlexisJazz wrote:

In T85838#7875197, @Thisisnotatest wrote:

It's not necessary to loop a video. If someone wants to see the video again, they can replay it.

Except that makes little sense for the example as it's just 2 frames. Playing it once won't achieve any effect at all.

Oops! Totally valid point. That said, you could create 5 seconds worth of frames as a video. That would demonstrate the concept, and it would be under the site visitor's control and consent as to whether to play it or not.

There's still the issue of it potentially being seizure triggering. I acknowledge the linked .gif file carries more of a risk of triggering than the thumbnail does, because of the larger size, so probably the best path would be to link to a thumbnail then to the full size .gif, both links carrying trigger warnings, so there is full informed consent and knowledge of the risks.

If someone actually gets a seizure from viewing that gif, my guess is that they probably are not going to be in a position to scroll the page.

In T85838#7875279, @Thisisnotatest wrote:

In T85838#7875264, @AlexisJazz wrote:

In T85838#7875197, @Thisisnotatest wrote:

It's not necessary to loop a video. If someone wants to see the video again, they can replay it.

Except that makes little sense for the example as it's just 2 frames. Playing it once won't achieve any effect at all.

Oops! Totally valid point. That said, you could create 5 seconds worth of frames as a video. That would demonstrate the concept, and it would be under the site visitor's control and consent as to whether to play it or not.

There's still the issue of it potentially being seizure triggering. I acknowledge the linked .gif file carries more of a risk of triggering than the thumbnail does, because of the larger size, so probably the best path would be to link to a thumbnail then to the full size .gif, both links carrying trigger warnings, so there is full informed consent and knowledge of the risks.

If someone actually gets a seizure from viewing that gif, my guess is that they probably are not going to be in a position to scroll the page.

There are two different things: flashing images that might trigger seizures and any moving elements shown alongside content. The latter is an issue for people who have trouble concentrating.

I finally made it into a video, considerably more work but I'm kinda amazed about the difference. Running at 60fps (which a GIF simply can't) the effect is so much more convincing. And with a pause button, it's possibly to play with it. Pause the video and only one color is shown.

A very belated thank you. And yes, the video pausing to see what is happening is quite striking, to the point where you might consider explicitly mentioning it as an instruction.

In T85838#7965084, @Thisisnotatest wrote:

A very belated thank you. And yes, the video pausing to see what is happening is quite striking, to the point where you might consider explicitly mentioning it as an instruction.

Thanks! The pausing hint was already in the article text, I just added it to the file description as well.

Regarding the task, maybe the solution isn't found in ways to stop animated GIFs. Maybe we just need a bot that can convert from GIF to WEBM (and loop it for x seconds if needed) and upload the WEBM.

In T85838#955840, @Tgr wrote:

This would require adding a new thumbnail parameter to generate "frozen" thumbnails for animgifs, and some way to switch between normal and "frozen" thumbnails.

I wonder what are the reasons for page authors to use animated gifs instead of videos, which seems like a more appropriate technology. Is it just that videos are harder to work with (in which case maybe we should offer automated conversion) or browser compatibility concerns or concerns about the video player UI, or do they actually want the animations to autoplay and loop?

I just remembered another animated GIF that I created: https://commons.wikimedia.org/wiki/File:Under_construction_animated.gif. That one, yes, I actually wanted it to autoplay and loop.

I don't know how to loop a video with TimedMediaHandler

[[File:Example.webm|loop|Your caption]]

This is an interesting new technique for animated gifs that we could consider applying.

https://css-tricks.com/gifs-and-prefers-reduced-motion/

and

https://css-tricks.com/pause-gif-details-summary/

That might be the first really workable solution. Very nice @TheDJ!

In T85838#8667603, @TheDJ wrote:

This is an interesting new technique for animated gifs that we could consider applying.

https://css-tricks.com/gifs-and-prefers-reduced-motion/