GIFs play really slow on web browsers

[saket]

macOS version: 19.4.0 (darwin) Kap version: 3.2.2

Steps to reproduce

Capture a video and save it as GIF

Current behavior

The GIF plays 3-4x slower in a web browser. Interestingly, they play fine when previewing them on macOS.

[sindresorhus]

Can you share a GIF that reproduces this behavior? What frame rate did you set on the GIF?

[saket]

Yep, here's a GIF of a timer counting upto ~3.3 seconds. Chrome takes ~9 seconds to play this. The framerate was set to 60fps.

[albinekb]

I'm seeing the same issue with 60fps gifs in Slack (exported from kap) lately..

[karaggeorge]

TL;DR

If you want to support most modern browsers (including Chrome), export with 50fps or lower

If you want to also support IE, export with 15fps or lower

By support, I mean not experiencing the slowdown

(List of browsers: https://web.archive.org/web/20170201034945/http://blog.fenrir-inc.com/us/2012/02/theyre-different-how-to-match-the-animation-rate-of-gif-files-accross-browsers.html)

Explanation

Video exported with 60fps (for me showing slowed down):

Video exported with 15fps (for me showing fine):

What struck me most interesting is when you said that it was playing fine in macos preview, but not on chrome. That pretty much means that we're not missing some kind of setting. The same gif is played in different speeds depending on who's playing it.

I did some digging and it seems like most apps that render gifs have some metrics based on the resolution and framerate, in which they consider they don't have enough memory, so they will not play back at their desired frame rate. I'm not very versed in this, so I'm not 100% sure on the details, but here's some discussions I found that might be better at explaining it:

https://github.com/Flipboard/FLAnimatedImage/issues/98

https://community.adobe.com/t5/photoshop/gifs-export-slow-no-matter-the-frame-rate/td-p/4075417?page=1

Doing some more research I saw an answer saying that most players don't play gifs with fps higher than 50:

https://stackoverflow.com/a/37583886

The demo attached went into some more detail around which browsers support what, which is really interesting to see:

https://web.archive.org/web/20170201034945/http://blog.fenrir-inc.com/us/2012/02/theyre-different-how-to-match-the-animation-rate-of-gif-files-accross-browsers.html

It indeed shows that most browsers support up to 50fps, and if you want to support IE, you need to be lower than ~16 fps.

It also mentions that if the browser can't support the rate of the image it'll default to 0.1, which is 10fps, no matter what the input was, which is probably why it looks so slowed down. So even if chrome supports 50fps, and your gif is 60fps, it won't take it to 50fps, the nearest it supports, but it'll default to 10fps making it seem super slow.

So, overall, I guess try exporting with a bit lower fps 😄

To test the theory, I also exported with 30 and 50fps, both of which played fine on chrome for me. The only one slowed down was the 60fps

30 fps:

50 fps:

Hope this helps, and I think we can close the issue, as this is not something wrong with Kap specifically, rather the way gifs work

[saket]

Very interesting. I think kap could add a warning when 60fps is selected.

[karaggeorge]

That's a good idea

[karaggeorge]

@skllcrn any ideas on design for this? Some kind of on-hover warning when fps over 50 is selected?

[riccardo-forina]

Il giorno mer 10 giu 2020 alle 16:12 George Karagkiaouris < notifications@github.com> ha scritto:

@skllcrn https://github.com/skllcrn any ideas on design for this? Some kind of on-hover warning when fps over 50 is selected?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/wulkano/Kap/issues/856#issuecomment-642037189, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHL5LAJRBDDIUUJMFVYVQLRV6IF5ANCNFSM4NUMQSYA .

[skllcrn]

Maybe triggering a warning dialog on export if FPS is > 50 and GIF is selected @karaggeorge?

[karaggeorge]

Seems a bit excessive to trigger a whole other window. I was thinking something way less intrusive, like a tooltip or something