Shop Mobile More Submit  Join Login
Please note that this article is not complete as it cannot contain the required images.  Please visit the associated journal to see the required images.

The Problem


You've had the idea, you've built your emotes, you've put them all together in an animated GIF which you upload for the world to enjoy. The comments start coming in; "Sweet", "Cute", Love it", "Why is it so slow?".  All well and good, apart from that last one.

So you take a closer look and either:
a) you scratch your head and think "it wasn't that slow when I built it"
b) you think it looks fine but other people are still saying it's slow

So what's the problem? The answer is Stupid Browsers.  Simple as that.  Our browsers are just rubbish at rendering fast animated GIFs.

The Theory


An animated GIF file consists of a number of image blocks, each with it's own control block.  The control block includes how long (in 1/100s of a second) the image should be displayed before moving on to the next image.

The GIF Programming Reference[1] has this to say about the frame delay:
Process each graphic in the Data Stream in sequence, without delays other than those specified in the control information.

and
Delay Time - If not 0, this field specifies the number of hundredths (1/100) of a second to wait before continuing with the processing of the Data Stream. The clock starts ticking immediately after the graphic is rendered.

All very simple, the rendering engine should simply wait for the specified delay before moving on to the next image.  No exceptions!  A delay of 0 should be interpreted as instantly displaying the next image and is of no practical use for creating animations. Some programs, JASC Animation Shop for example, will not allow a 0 delay. As each frame in a GIF can have it's own local colour map, some programs have even used the 0 delay to create static GIFs with more that 265 colours[2].

Imagine a series of animated GIFs that all show a progress bar.  These GIFs are identical except for the frame delay.   The first has a delay of 1/100 seconds, the next has 2/100, the next has 3/100, etc. When the first bar has finished the second should be half finished, the next only one third finished, etc.  If you took a screenshot you should see this:

Sorry, image not available in this news article

The Truth


So that's the theory.  After a number of people had mentioned problems with their animations being slower than they had build them, I decided to investigate and put together a test page containing the GIF progress bars described above.  I then loaded this test page into a number of browser/OS combinations to see what happened.  What I found was a remarkable example of piss poor programming.
  • Mozilla's rendering engine seems to have taken the line that, as screens cannot refresh faster than 90Hz, no one will ever use a delay of 1/100. So a 1/100 delay is changed to 10/100.  Not what you asked for.  Mozilla's answer to the 0 delay is to ignore the specification and use a delay of 10/100.
  • Internet Explorer is even worse.  Any delay less than 6/100 is changed to 10/100.  This is probably based upon the assumption that if 15fps is good enough for cartoons then it's good enough for animated GIFs.
  • Opera is the worst of all.  Every delay below 10/100 is displayed at 10/100.
  • Safari is the best as far as delay cropping is concerned.  It does crop below 3/100, but it crops to 3/100, not back to 10/100.

The figures below show screenshots of the test page displayed by various browsers on different platforms (this test page is available here - you may find this test works best if you download it and run it locally).

Sorry, images not available in this news article

Conclusions and Recommendations


If all the browsers followed Safari's example and just stopped making the delays faster then there would not be too much of a problem.  If you ask Safari for a delay of 1/100 seconds and it delivers 3/100 then the animation might not be as fast as you wanted, but it will probably be fast enough.  However, asking Internet Explorer and the Mozilla browsers for 1/100 and getting 10/100 is a significant problem.

So what delays should you use when animating GIFs?  Well never 1/100 or 0; imagine what would happen if one of the popular browsers decided to honour the 0 delay!  As over 2/3 of visitors[3] are using Internet Explorer I'd suggest not dropping below 6/100.  If you really need to go faster than that (and I have seen a few emotes that were stunning at 2/100 in Firefox) then make it clear on your description what browsers it is suitable for. If you're feeling generous then you could always provide an alternative IE version.

Summary


Never, never, never use delays of 0 or 1. Avoid 2 - 5 if possible.

References


1. GRAPHICS INTERCHANGE FORMAT Version 89a www.w3.org/Graphics/GIF/spec-g…
2. Wikipedia's GIF entry describes True Colour GIFs en.wikipedia.org/wiki/Gif
3. Browser share data provided by leSicilien
Add a Comment:
 
:iconchain:
chain Featured By Owner Aug 5, 2014  Professional
Many years later, I wonder if the situation is still the same?
Anyone able to verify that?
Reply
:icontomysshadow:
tomysshadow Featured By Owner Aug 9, 2014
Easy to verify. Just use the link in the article. Firefox still acts the same way. Not sure about the others.
Reply
:iconbiggedy:
Biggedy Featured By Owner Jul 9, 2014  Professional Digital Artist
Awesome! Thanks for the info! I've been beating my head trying to figure out what's wrong with the .gif I'm authoring all this time!
Reply
:iconfood211:
food211 Featured By Owner Aug 7, 2013  Professional Digital Artist
awesome!  this is really helpful. Thanks a lot!
Reply
:iconbzelll:
bzelll Featured By Owner Jan 8, 2013
Just wanted to say, the GIF speed test page you linked to... simply brilliant. Thanks so much!
Reply
:icononyttig:
Onyttig Featured By Owner Oct 10, 2011
Very helpful!
Reply
:iconrattyrat:
rattyrat Featured By Owner Jun 9, 2007
very helpful thread! I found your post throught google after my 0 second delay frames were being converted to 0.10 .

I tried 0.01 and was getting the same result. After reading your thread I tried 0.03, so at least people with safari will get the full effect..and guess what. Mozilla Firefox 2.0.0.4 renders 0.03 second delays!!!

mytest [link]

offtopic: if anyone knows the author of the original sexy robot girl picture, please let me know!
Reply
:iconrj815:
RJ815 Featured By Owner May 12, 2007
That's pretty informative and useful for me. I always thought the browsers just decided to run ALL animations on some predetermined cycling speed (like X/60 or something like that).

How about artists like =sereneworx though? His emoticons seem to be utilizing a fast animation speed without too many problems on Firefox (and perhaps Internet Explorer). Is it a similar situation with the Peacock Display emote?

In any case, great job *humpy77, yet another great article!
Reply
:iconthe-ace-chef:
the-ace-chef Featured By Owner May 1, 2007   Interface Designer
Great article humpy, I already know more or less about this stuff, but it was great to see, and the bar test illustrated very well how it works, also it is good to know about the difference in browsers.:nod:
Reply
:iconavatar-inc:
avatar-inc Featured By Owner Apr 27, 2007
This is very helpful... Thank you!
Reply
:iconhumpy77:
humpy77 Featured By Owner May 1, 2007
Glad you found it useful, :thanks:
Reply
:iconanimatedsustenida:
AnimatedSuStenida Featured By Owner Apr 27, 2007  Hobbyist General Artist
This helped me a lot :D
Reply
:iconhumpy77:
humpy77 Featured By Owner May 1, 2007
:w00t!:
Reply
:iconya90ya:
ya90ya Featured By Owner Apr 22, 2007
Very nice! good job on this:D
Reply
:iconbobsmith006:
BobSmith006 Featured By Owner Apr 4, 2007
One problem I mainly have concerning frame delay times is that when I upload some, they appear faster on the Internet than they do on Fireworks. Does that have anything to do with the browser setup too?
Reply
:iconhumpy77:
humpy77 Featured By Owner Apr 8, 2007
Sorry for the late reply. I'm not too sure about Fireworks but most of the animation programs are reasonably good in their timing. The normal problem would be that it looks slower in a browser because the faster frames are given a slower delay by the browser.

If you let me know which of your animations you're having this problem with (and what browser you're using) then I'll see if I can spot any problems.
Reply
:iconbobsmith006:
BobSmith006 Featured By Owner Apr 8, 2007
I could only find 2 that were faster online than they are on Fireworks. They are [link] and [link] The first one is set at 7/100 (because it was required to be set that way, although the project itself is reasonably slower). The second one is supposed to be just a little bit slower, enough to make a difference. I use Windows Internet Explorer 7.

I have noticed, however, that when I use Adobe ImageReady, my uploaded emotes move as fast as they do when I optimize and save them as GIFs, which is the speed I want them to be.
Reply
:iconhumpy77:
humpy77 Featured By Owner Apr 9, 2007
Well technically they are both fine apart from frame 20 in the second link. This has a delay of 0.05 which IE will interpret as 0.10 (not really significant in terms of what you are describing).

I've watched both your GIFs in FireFox 2, IE7 and Jasc Animation Shop and they all ran at similar times (with the browsers running a little slower than JAS).

It sounds as if Fireworks may be running slower than it should. You could try a little test by building an animation that has something like 100 frames with a 0.10 second delay. This should loop every 10 seconds so you could time how long it takes in Fireworks. You could also try asking some people who use Fireworks if they've seen the same problem.

Hope this helps :)
Reply
:iconbobsmith006:
BobSmith006 Featured By Owner Apr 9, 2007
I can see Fireworks running slower as a problem (one to be expected from my computer, I guess). I'll try out the 10 second loop thing.

I really appreciate the help and advice! Thanks!
Reply
:iconbudgieishere:
budgieishere Featured By Owner Mar 30, 2007
Nice article, something which is important when you're dealing with quick frame delays. I've found that designing my animations to display best in the browsers from the start helps (I tried to avoid in-software playing unless I was doing something like seeing whether I was moving the objects enough, etc.) and that if I used a minimum time delay of say 0.05sec (in Imageready) it's more than smooth enough if you move things in small pixel distances.
Reply
:iconhumpy77:
humpy77 Featured By Owner Mar 31, 2007
Thanks. Sounds like we work the same way; I've always exported mine to GIF then viewed in a browser (just a habit I got into years ago).
Reply
:iconajglass:
AJGlass Featured By Owner Mar 30, 2007  Professional Artisan Crafter
Very interesting and helpful. :nod:
Reply
:iconleaf-lover:
leaf-lover Featured By Owner Mar 30, 2007
That was really interesting to read: I don't make animated emoticons, but it's always good to learn more. Great article. :aww:
Reply
:iconsophiehoulden:
SophieHoulden Featured By Owner Mar 30, 2007  Professional General Artist
just for the record, I'm using firefox 2.0.0.3 and only the '0' and '1' bars on the test page are the same, all the others go at their own speeds.

and also its worth noting that older versions of internet explorer play all gifs on the same page at the same framerate (I dont know how it decides what framerate, but its usally pretty crap)
Reply
:iconhumpy77:
humpy77 Featured By Owner Mar 30, 2007
Yup, all the Mozilla browser run 0 and 0.01 at 0.10 seconds. Did you see the images in the accompanying journal ([link])? They should have been on this page but :shrug: not allowed.

I'll bet those older IE versions were chopping at 0.10.

Anyway, stuff it all! I'm starting to think that Flash is needed for anything that wants fast, accurate timing.
Reply
:iconsophiehoulden:
SophieHoulden Featured By Owner Mar 30, 2007  Professional General Artist
ahhh, flash is a different kettle of fish alltogether, it will run it at exactly the speed you ask it too... if the computer is fast enough to handle it.

this is as most animations and stuff in flash is rendered in realtime, so the performance between differnent computers can vary much more than gifs in browsers.

like all things you just have to balance it all out, if you want to be really sly though you make the animation first, and just put the frames in flash, but then you have to play with your compression...

hmmm, one day you think they will make something that is surefire?
Reply
:iconhumpy77:
humpy77 Featured By Owner Mar 31, 2007
So you get to choose between live rendered and stored frames? Ohnoes... decisions :fear:

Well, animation rendering engines aren't exactly a competitive field so I'd guess there's not much development happening. For example, the MNG specs have been out for 6 years and got nowhere. The GIF format should be fine (for small scale work) if the developers bothered to follow the standard. Flash is probably the way forward as it's come from one source that produces it's own (reasonably consistent) implementations.
Reply
:iconpjtierney2003:
pjtierney2003 Featured By Owner Mar 30, 2007
So just set delays of 6 and you should be sorted then?
Reply
:iconhumpy77:
humpy77 Featured By Owner Mar 30, 2007
Yup. 6 is good for all browsers (except Opera). Don't forget that the GIF format lets each frame have its own delay, so you can vary the frame rate as required.
Reply
:iconpjtierney2003:
pjtierney2003 Featured By Owner Mar 30, 2007
Is that 0.6 or 0.06 in Imageready?
Reply
:iconhumpy77:
humpy77 Featured By Owner Mar 30, 2007
It's 0.06 :)
Reply
:iconpjtierney2003:
pjtierney2003 Featured By Owner Mar 30, 2007
Thanks.
Reply
:iconbellchild:
bellchild Featured By Owner Mar 30, 2007  Hobbyist Photographer
Awesome, informative article. I was actually wondering about this myself recently. :) Good stuff.
Reply
:iconhumpy77:
humpy77 Featured By Owner Mar 30, 2007
Thanks. It's starting to look like everybody has noticed speed problems with one or more of their animations.
Reply
:iconclairejones:
ClaireJones Featured By Owner Mar 29, 2007  Professional General Artist
Well that explains a lot. I'll have to take another look at my animations.

Good investigative work. ;)
Reply
:iconhumpy77:
humpy77 Featured By Owner Mar 30, 2007
Thanks :)
Reply
:iconmajnouna:
Majnouna Featured By Owner Mar 29, 2007  Professional General Artist
Very interesting, but how does that translate to making gifs with ImageReady, where delays are expressed as "no delay", 0.1 sec, 0.2 sec and up to entire seconds?
Reply
:iconhumpy77:
humpy77 Featured By Owner Mar 30, 2007
"No delay" would be 0, 0.1 is 10/100 and 0.2 is 20/100.

So the rule would be;
Never, never, never "no delay" or 0.01. Avoid 0.02 - 0.05 if possible
Reply
:iconmajnouna:
Majnouna Featured By Owner Mar 30, 2007  Professional General Artist
Oh, I see. I don't see how one can avoid it if the animation requires it though, except by changing the animation concept altogether. I mean, for instance: if I have an animation where 10/100 or even 6/100 is too slow for my purposes, then clearly I have to either take my chances with something lower or forget about it. Unless I'm missing something?
Reply
:iconhumpy77:
humpy77 Featured By Owner Mar 30, 2007
I'd say that if the animation needs it then go faster than 6/100, but make sure your description says that it will not be displayed correctly in IE.

The alternative option would be to use swf. Adobe are claiming that 98% of web users have Flash Played installed ([link]) so this is now a viable option. You just have to have a look at something like Bertie ([link]) to see how good flash can be.
Reply
:iconmajnouna:
Majnouna Featured By Owner Mar 30, 2007  Professional General Artist
I see. I never imagined it was such a pain, or that different browsers handled speed differently. Good to know :)
Reply
:iconparliamentfunk:
parliamentFunk Featured By Owner Mar 29, 2007
Good job, Steve! :aww:
Reply
:iconbranchewski:
Branchewski Featured By Owner Mar 29, 2007  Hobbyist Photographer
Great article, I can say that :thumbsup:. I don't do emotes, but this was a really interesting read. Thank you.
Reply
:iconr-t-p:
R-T-P Featured By Owner Mar 29, 2007
Thank you so much for taking the time to solve he mystery :blowkiss: I was always having problems showing my animations on the web although they were playing pretty well on the phone :aww:
Reply
:iconr-t-p:
R-T-P Featured By Owner Mar 29, 2007
Thank you so much for taking the time to solve the mystery. :blowkiss: I always had problem with my animations showing on browsers but on the phone they were playing pretty well so I was getting crazy :aww:
Reply
Add a Comment:
 
×

:iconhumpy77: More from humpy77





Details

Submitted on
March 29, 2007
Link
Thumb

Stats

Views
27,033 (2 today)
Favourites
81 (who?)
Comments
45
×