Developer's Blog

They’re different! How to match the animation rate of gif files accross browsers

Today, I would like to introduce a little bit about gif animation.

If you use the internet you probably have heard about gif animations,
but do you sometimes feel [Wait? Isn’t this gif animation a little slow?].

This is a problem that occurs because max frame rate of gif animations is different from browser to browser.

I have listed gif animations below with differences in frame rate by [0.01%].
The column on the right shows the support status for each browser.

 

Frame rate Sample Supported browsers
0.01 seconds 0.01seconds  
0.02 seconds 0.02seconds SafariGoogle ChromeFirefoxOpera
0.03 seconds 0.03seconds SafariGoogle ChromeFirefoxOpera
0.04 seconds 0.04seconds SafariGoogle ChromeFirefoxOpera
0.05 seconds 0.05seconds SafariGoogle ChromeFirefoxOpera
0.06 seconds 0.06seconds Internet Explorer9SafariGoogle ChromeFirefoxOpera
0.07 seconds 0.07seconds Internet Explorer9SafariGoogle ChromeFirefoxOpera
0.08 seconds 0.08seconds Internet Explorer9SafariGoogle ChromeFirefoxOpera
0.09 seconds 0.09seconds Internet Explorer9SafariGoogle ChromeFirefoxOpera
0.10 seconds 0.10seconds Internet Explorer9SafariGoogle ChromeFirefoxOpera
0.11 seconds 0.11seconds Internet Explorer9SafariGoogle ChromeFirefoxOpera
0.12 seconds 0.12seconds Internet Explorer9SafariGoogle ChromeFirefoxOpera

*Safari 5.0 is only supported from 0.06 seconds like Internet Explorer.

It becomes obvious that it is becoming slower when the frame rate is smaller than the supported speed.
When the supported max frame rate is exceeded for a browser, the frame rate is forced to 0.1 seconds.

(Different in some versions of Safari, Google Chrome)

From the information above we can tell that in order to match the frame rate of gif animations, one should set the frame rate up to 0.06 seconds.

If you are thinking of making a gif animation in the near future, please remember: Keep the frame rate at a maximum of 0.06 seconds.

Please join us on Facebook for Sleipnir for Windows!

Please follow us on Twitter!

Facebook Comments