Page MenuHomePhabricator

Add a way to stop animated GIFs
Open, LowestPublic

Description

Some looping animated GIF images, such as the 'comet impact' one shown in https://en.wikipedia.org/wiki/Comet#Gallery are very distracting to users. Please add a button that allows users to stop the animation.


See also: T85840

Event Timeline

Whatamidoing-WMF raised the priority of this task from to Needs Triage.
Whatamidoing-WMF updated the task description. (Show Details)
Whatamidoing-WMF added a subscriber: Whatamidoing-WMF.
Tgr added a project: Design.Jan 5 2015, 7:07 PM
Tgr added a subscriber: Tgr.
Tgr added a comment.Jan 5 2015, 7:14 PM

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

Tgr added a comment.Jan 5 2015, 7:56 PM

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.

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 updated the task description. (Show Details)Jan 5 2015, 7:59 PM
Tgr set Security to None.
Aklapper triaged this task as Lowest priority.Feb 16 2015, 11:15 AM
Jdforrester-WMF moved this task from Untriaged to Backlog on the Multimedia board.Sep 4 2015, 5:54 PM
Restricted Application added subscribers: Steinsplitter, Matanya. · View Herald TranscriptSep 4 2015, 5:54 PM
Restricted Application added a project: Commons. · View Herald TranscriptDec 22 2015, 3:04 PM

@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.

Yanpas added a subscriber: Yanpas.Mar 26 2016, 7:43 PM
Yanpas added a comment.Apr 5 2016, 8:08 AM

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

brion added a subscriber: brion.Apr 5 2016, 11:12 PM

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.

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.

Restricted Application added a subscriber: Poyekhali. · View Herald TranscriptApr 15 2016, 11:37 PM
tstarling added a subscriber: tstarling.

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)
Xaosflux updated the task description. (Show Details)Oct 15 2020, 12:44 PM