Thumbnailing animated GIFs (or showing they're an animation) (SYN-251)

[matrixbot]

(Imported from https://matrix.org/jira/browse/SYN-251)

(Reported by @ara4n)

[matrixbot]

Jira watchers: @ara4n

[richvdh]

You want animated thumbnails?

(Related: #4347)

[anoadragon453]

Worth noting that fixing and enabling this will also animate thumbnails in URL previews.

[ShadowJonathan]

Worth noting that element-hq/element-web#11481 led me here.

(I'll poke at this, see how hard it is)

[ptman]

Correct me if I'm wrong, but the thumbnails probably shouldn't be GIF, but some video format instead. IIRC this is what many GIF hosting sites do to conserve space and bandwidth.

[ShadowJonathan]

@ptman What kind of video format would you recommend? I'm currently working on this with #9705, creating smaller GIFs for thumbnails. I saw arguments against webm and webp for their limited support (which i doubt, but i take into account), so I'm curious what could be a good default for matrix in this regard.

[ptman]

VP8/WebM should be widely supported ( https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs#recommendations_for_everyday_videos ). I doubt anyone who can't support it needs animated previews/thumbnails. An alternative would be to generate different versions, but that wouldn't save space, only bandwidth.

[ShadowJonathan]

Hmm, i agree, but just for reference, i took gif > webm because discord uses GIFs for animated avatars and emojis (and i think they have done some research on the benefits and tradeoffs of both), though I also wonder if webm supports transparency.

[ptman]

I was surprised that APNG is well supported these days as well: https://caniuse.com/apng . So I guess that's also an option

[fullmetal1]

@ShadowJonathan webm does support transparency. I have seen a few around, but they're very rare.

[G2G2G2G]

@ptman https://caniuse.com/avif is rapidly coming too so worth supporting similar to gif/apng.. jxl not really worth it as far as animation goes.

[Mikaela]

Please see also element-hq/element-web#15790 and consider the accessibility of animations.

[anoadragon453]

@Mikaela could you elaborate on the accessibility difficulties surrounding animated thumbnails and what one should be aware of when implementing this?

[Mikaela]

@anoadragon453 My issue is that when there is a blinking/moving gif visible, it will drag my focus and my ability to read what happens in the room or whichever interface I am in decreases.

• https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html#intent

[GeoffLedak]

What's the status of this? I got a Synapse server and self hosted Element set up last week. If I use the Element Android app, gif previews are animated properly.

If I use the Element web client, I only see the first frame of the gif in previews.

[GeoffLedak]

Checking in on this again. Being able to paste a link to an animated gif and instantly see an animated preview in chat is a mandatory feature for my friends and I. We cannot use Element and Matrix without this feature. We're still using Discord at the moment, and the lack of proper animated gifs in the chat is the only thing that is preventing us from switching over to Matrix.

This works correctly in the Android version of Element; gif previews are properly animated in the chat. In the web version of Element, only the first frame of the animated gif is shown in the preview.

Someone should really make fixing this a priority.

[williamkray]

Checking in on this again. Being able to paste a link to an animated gif and instantly see an animated preview in chat is a mandatory feature for my friends and I. We cannot use Element and Matrix without this feature. We're still using Discord at the moment, and the lack of proper animated gifs in the chat is the only thing that is preventing us from switching over to Matrix.

This works correctly in the Android version of Element; gif previews are properly animated in the chat. In the web version of Element, only the first frame of the animated gif is shown in the preview.

Someone should really make fixing this a priority.

If this is such a critical feature for you, and since you are running your own server, you could leverage the Matrix Media Repo project which already supports animated thumbnails and runs in parallel to synapse.