- Mentioned In
- T105276: Convert animated images (animGIF, APNG) to HTML5 video
T101644: Experiment with a player for animated gif/png
T85840: Add a wikitext keyword that controls whether animated GIFs are moving or still by default
- Mentioned Here
- T85840: Add a wikitext keyword that controls whether animated GIFs are moving or still by default
T55167: For users whose browser doesn't support APNG files, show them an animated GIF of the file instead
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 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
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.
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).
For an imperfect solution we could detect animated gifs and give them a characteristic class in the output html. This should be easy.
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"
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.)
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)
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?