Resources and Support
 Pixel Joint Forum : The Lounge : Resources and Support
Message Icon Topic: Frame Delay Times for Animated GIFs Post Reply Post New Topic
Author Message
Metaru
Commander
Commander
Avatar

Joined: 05 August 2015
Online Status: Offline
Posts: 3305
Quote Metaru Replybullet Topic: Frame Delay Times for Animated GIFs
    Posted: 05 July 2007 at 8:43pm
Note: This was originally posted on deviantART by humpy77, the original article can be found here, and the journal version can be found here.

The Problem

You've had the idea, you've built your animations, 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 256 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:

Perfect Browser


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).

Firefox 1.5 on Windows 2000 / XP


Firefox 2.0 on Linux 2.6.5


Firefox 2.0 on Windows XP


Internet Explorer 6 / 7 on Windows 2000 / XP


Mozilla 1.7.6 on Linux 2.6.5


Netscape 8.12 on Windows XP


Opera 9.10 on Windows XP


Safari 1.2 on Mac OS 10.3


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 http://www.w3.org/Graphics/GIF/spec-gif89a.txt
2. Wikipedia's GIF entry describes True Colour GIFs http://en.wikipedia.org/wiki/Gif
3. Browser share data provided by =leSicilien

Edited by Metaru - 05 July 2007 at 8:44pm
I ate leel's babies
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 14 June 2016
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet Posted: 05 July 2007 at 8:50pm
Another reason for loving your Mac 

*Apple will launch a Safari for Windows this October.
IP IP Logged
M.E.
Commander
Commander
Avatar

Joined: 26 February 2007
Online Status: Offline
Posts: 430
Quote M.E. Replybullet Posted: 05 July 2007 at 11:55pm
Thanks Metaru!

That is excellent work.

Kind regards from


IP IP Logged
Blueberry_pie
Rear Admiral
Rear Admiral
Avatar

Joined: 24 July 2015
Online Status: Offline
Posts: 2176
Quote Blueberry_pie Replybullet Posted: 06 July 2007 at 12:51am
Thanks for posting this, Metaru. Very helpful.

Originally posted by jalonso

*Apple will launch a Safari for Windows this October.
There's already a public beta out. Though I hear it's a bit of memory hog... even more so than Firefox.
IP IP Logged
Aleiav
Commander
Commander
Avatar

Joined: 08 April 2016
Online Status: Offline
Posts: 2380
Quote Aleiav Replybullet Posted: 06 July 2007 at 3:44am
yaaay, Go Mac!
IP IP Logged
Metaru
Commander
Commander
Avatar

Joined: 05 August 2015
Online Status: Offline
Posts: 3305
Quote Metaru Replybullet Posted: 09 July 2007 at 11:33pm
i was wondering if this could be a sticky topic.

Edit: Thanks!


Edited by Metaru - 14 July 2007 at 3:46am
I ate leel's babies
IP IP Logged
ceddo
Commander
Commander
Avatar

Joined: 17 September 2006
Online Status: Offline
Posts: 466
Quote ceddo Replybullet Posted: 10 July 2007 at 5:55am
Well written, Metaru. Apple is always right, and mac products are always the best! :)
IP IP Logged
suncrafter
Seaman
Seaman
Avatar

Joined: 03 September 2007
Online Status: Offline
Posts: 6
Quote suncrafter Replybullet Posted: 05 September 2007 at 10:52pm
Originally posted by jalonso

Another reason for loving your Mac 

*Apple will launch a Safari for Windows this October.
 
Most people SAY the love PCs but I've noticed that those are people who have never had a MAC.
 
Everyone I know who has had BOTH - say that a MAC is better.
Proud webmaster of:
"Stickman Murder Mysteries"
Please visit my Forum too!
IP IP Logged
theguy
Commander
Commander
Avatar

Joined: 22 May 2007
Online Status: Offline
Posts: 417
Quote theguy Replybullet Posted: 14 August 2008 at 4:03pm
I have owned a Mac and I prefer PC's. Mac is the alternative, and I would rather go for the mainstream there aren't as many things made for a Mac compared to PC's.
IP IP Logged
neota
Commander
Commander
Avatar

Joined: 27 November 2018
Online Status: Offline
Posts: 158
Quote neota Replybullet Posted: 01 September 2008 at 8:24pm
For Firefox 3/linux, the behaviour is the same as FF2/linux -- row '2' is by far the fastest.
absolutely.
IP IP Logged
Manupix
Commander
Commander
Avatar

Joined: 19 June 2017
Online Status: Offline
Posts: 771
Quote Manupix Replybullet Posted: 16 March 2011 at 8:18pm
Well, I think it's opportune to bump this.
First, there's a lot of gallery pieces displaying this issue; and also Chrome is spreading fast (why??? 0.o) and it seems it's not dealing well with short delays (anything under 0.1"?).


I made these gifs below for testing and explaining.
All 5 are supposed to run real time but won't.

The first has 0.01" delay and 100 frames, should last 1" but no browser will do that; most will slow it down to 0.1" so it will last 10" instead. Just made to show what the problem is.



The next 4 all last 3", with delays of 0.02", 0.03", 0.05" and 0.1".

Good browsers should display them as they are, making them run more or less simultaneously. Bad browsers will give them apparent different speeds (so the cycles will last longer than the actual 3").
This is where I'd appreciate some feedback from Chrome users! =)

                                                                  


Edited by Manupix - 16 March 2011 at 8:36pm
IP IP Logged
Post Reply Post New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum