deviant art

Deviant Login Shop
 Join deviantART for FREE Take the Tour
[x]
more ▶

Featured in Groups:

Details

June 14, 2009
Link
Thumb

Statistics

Comments: 351
Favourites: 5 [who?]

Views: 2,198 (1 today)
[x]

* Did you know that each browser has a frame delay limit for gif images?
* Are you using delays that are supported by your browser when you make animations?
* Find out now! :D

---------------------------------
---------------------------------
---------------------------------
---------------------------------
---------------------------------



All the information below is from my own experience. I wasn't able to find anything on the net to back me up, so you'll just have to believe me ;p. If you feel that any of what I've said below seems incorrect then please let me know. Now lets get started!
_______

:bulletred: Did you know that each browser has a frame delay limit for gif images? :noes:
This means that if any frames in a gif image have a shorter delay than this limit, the delay for those frames will be given a default value. So an animation that looks great and runs smooth on you animation software, may not run as smoothly once you've uploaded it if you have used frames that are out of the browser's limit. :(

:bulletorange: Why is this important? :confused:
It's important to me because spending a lot of time on an animation only to find out that it looks horrible on my browser really sucks. Especially when some frames that are supposed to go faster than other frames, actually go slower!
It's also important to me because when I upload things on deviantArt I want all my watchers to be able to enjoy my work, and not only those who have the same browser as me. This means making animations that don't get messed up in other browsers as well.
If this isn't important to you then you can stop reading now. :icongrinpatplz:

:bulletyellow: - Some browsers - :bulletyellow:

The browsers I have tested are:

- Internet Explorer 6 , 7 and 8
- Firefox 2 and 3
- Opera 9.64
- Google Chrome
- Safari 4
If your browser is not in this list, I think it's a pretty safe bet to assume that it has the same limit as Internet Explorer. But I'm just guessing ... :shrug:


:bulletgreen: Let take a look at some examples! :#1:
Can you see the speed difference between this: and this: ?
The one on the left has a delay of 0.01s per frame and the one on the right has a delay of 0.1s per frame, but if you are using one of the browsers listed above then both of them should look alike (may not be syncronised though).
This is because none of these browers support a frame delay of 0.01s so all frames of the one on the left are set to the default value of 0.1s :nod:
So what does your browser support? :O Lets take a look.

:bulletblue: - The limits - :bulletblue:


:pointr: Well Firefox 3 and Opera 9.64 seem to be champions here. Both of them support a delay as low as 0.02s per frame! :D
So, if you are using one of those, you should be able to tell the speed difference between
this: and this: !

:pointr: Then we have Firefox 2 which supports frame delays as low as 0.03s per frame! :)

:pointr: Finally we have Internet Explorer (7,8 and 9) , Google Chrome and Safari 4 which can only support frame delays as low as 0.06s :(

:pointr: Really old versions of Internet Explorer and Opera may be even worse! :noes:


:bulletpurple: So what am I supposed to do about it? :crying:
So now you have to choose:
* Using really low frame delays will make it easier to animate fast movements, but not everyone who look at your art may have the appropriate browser to enjoy it, and for them it may look weird.
* By using frame delays supported by all browsers you will be sure that your animations are displayed the same way to everyone, but of course you may not always be able to create the same cool effects.

I've chosen the 2nd option. I've never gone below 0.06s on any frames in any of my animations for over a year now, and it's been working fine for me :) (You can always make it look like it's going faster than it actually is by placing the right pixels in the right places ^^ )

:bulletpink: More examples :|
Here are a few of my deviation that I made before I found out about these limits:
           
Here I use some frames with delays below 0.06s in each of the animations. So all of them run smoothly on Firefox and Opera, but on all other browsers, the frames that are meant to go really fast are actually the slowest frames. :slow:



Bonus tip:
:bulletblack: But FireFox makes my animations go faster than they actually are! :noes:
No it doesn't! <__< It's your computer that is playing it too slow. Just be sure to always check your animations in a browser every now and then (especially if you have a slow computer or if your animation has a lot of frames). ^^

:iconllamasniffplz: - Finished - :iconllamasniffplz:

:faint:
I made this because quite a few of you wanted to know, so you better have read it :evileye:
and I hope at least someone found this helpful :XD:
If your browser wasn't mentioned above, you can try to figure out the limit by looking here: [link] . See which of the animations seem slower than they should be.
Thank for reading! :iconfishyplz: and let me know if anything is unclear.



  • Mood: Big Grin
  • Eating: asdf
  • Drinking: Coffee
Add a Comment:
 
:icontheantsaboy94:
~TheAntsaBoy94 Oct 3, 2012  Hobbyist Traditional Artist
[link] This should help :)
Reply
:iconjellysoda:
~jellysoda Sep 25, 2012  Student Digital Artist
SO I should never make my frames per second less than 0.6s? c: okay thank you
Reply
:iconalchsh:
great info! thank you very much ;)
Reply
:iconiwin72:
~iWin72 Apr 25, 2011   Interface Designer
I know this is an old article, but it might be worth noting that Chrome now supports up to 20ms. :p
Reply
:iconcookiemagik:
`CookiemagiK Apr 25, 2011  Hobbyist Digital Artist
Great now only IE and Opera are behind :eager:
Reply
:iconsomebodylost:
~Somebodylost Mar 11, 2011  Student Digital Artist
Although... how about the other versions of the browsers mentioned above??
Reply
:iconcookiemagik:
`CookiemagiK Mar 11, 2011  Hobbyist Digital Artist
I don't know. You'll have to find out yourself :p
Reply
:iconsomebodylost:
~Somebodylost Mar 11, 2011  Student Digital Artist
SO THAT'S WHY MY EMOTE DIDN'T TURN GOOD. :iconohnoesplz:
Very helpful. I'm just starting in the world of emotes.
Reply
:iconyarjor:
~yarjor Feb 4, 2011  Hobbyist Artist
You shall add Safari too :P Got 0.02 limit Ithink :D
Reply
Add a Comment: