Buttery Smooth "10fps"

February 9, 2020

The GIF (/ɡɪf/ GHIF) file is unfortunately the most popular and widespread form of exchanging animated content across the internet.

Oh crap here’s one now

A Pokémon I 3D modeled and animated called Shuppet, in 50fps

When I am making animations, with the intent of ultimately becoming a GIF file on the internet, I pretty much always target 50 fps. 50fps is currently the highest and most compatible frame rate supported by most modern browsers such as Chrome and Firefox. Currently(Sun 09 Feb 2020 09:01:05 AM PST) these are some of the maximum frame rate GIFs that some key software and browser engines support to my knowledge. I’ll try my best at keeping this updated, but based on some of the bug tracker replies I’ve been seeing, these values probably aren’t going to be changing any time soon.

Software Highest frame rate
Chrome(Blink) 50fps
Firefox(Gecko) 50fps
Safari(Webkit) 50fps
Opera(Blink) 50fps
Internet Explorer 10(Gecko) 50fps
IrfanView 100fps

Desktop image viewers such as InfranView are not limited by the constraints of serving web pages and tend to display gifs at their actual fps(Probablt the only way to properly see a 100fps gif!). Meanwhile web browsers(As in, their browser engines: WebKit, Gecko, Blink, etc) have to consider all the other content that a web page can be displaying and would rather not choke a UI thread trying to handle dozens of 100fps asynchronous animating gifs. The highest that most browsers worth their weight is 50fps as of the year 2020.

GIF file format specification

     7 6 5 4 3 2 1 0        Field Name                    Type
     +---------------+
  0  |               |       Extension Introducer          Byte
     +---------------+
  1  |               |       Graphic Control Label         Byte
     +---------------+

     +---------------+
  0  |               |       Block Size                    Byte
     +---------------+
  1  |     |     | | |       <Packed Fields>               See below
     +---------------+
  2  |               |       Delay Time                    Unsigned <<<<<<<<<<<<
     +-             -+
  3  |               |
     +---------------+
  4  |               |       Transparent Color Index       Byte
     +---------------+

     +---------------+
  0  |               |       Block Terminator              Byte
     +---------------+
            vii) 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.

Any gif that claims to be showing 60fps is simply untrue due to the fact that no web browser out there right now supports displaying gifs higher than 50fps. If you try to set your frame rate any higher than what the browser supports (or if you set the frame delay to zero) then most browsers will default to a playback of 10fps(over 5 times slower than you probably intended).

Not only that, but you can’t even depict the 60fps frame-delay(0.016666...) by the gif89a specification since you can only depict frame-delays in increments of 0.01(1/100 of a second, 0.01, 0.02, 0.03, 0.04, …) so it simply does not have the resolution to depict the frame delay of 0.016666... necessary to get true 60fps. You can either alias 0.01666... to 0.01(and ultimately get 10fps in web browsers since it is lower than 0.02) or set the frame-delay to 0.02 and get a proper 50fps depiction(which is the best you’re gonna get).

If there’s something to take away from this it’s:

GIFs are incapable of depicting 60fps. The two highest FPS that can be depicted with a GIF is either 100fps or 50fps

GIFs with a frame-delay lower than 0.02(faster than 50fps) is going to be forced to play at 10fps by all web browser engines!


I made this set of gifs of the same animation at different frame rates in ascending order(fps gets progressively higher). If any of them take a different amount of time to reach the start and end points(they are all exactly 1 second long) then you know what framerate your browser is “restricting” the frame delay at.

image

Technically 8.33333…fps (0.12s)

image

Technically 12.5fps (0.08s)

image

Technically 16.666666…fps (0.06s) This seems to be the “sweet spot” portable frame rate that most all browsers will minimally support if you care about your GIFs working on… NetScape or something

image

Technically 25fps (0.04s)

image

technically 33.33333…fps (0.03s)

image

Nice and even 50fps, even technically! (0.02s)

This is the framerate I work with as it is nice and evenly representable within the GIF specification and is a very high frame rate that most modern browsers support. This is the best you’re gonna get with .gif files.

image

This is pretty much just 50fps(0.02) again as it is only possible to represent frame delays by increments of 0.01 and software such as Photoshop will round-off the frame delay from 0.01666... to 0.02

I put this here to prove a point since some software will lead you to believe that you are exporting a 60fps GIF when it is actually not possible.

image

The highest fps possible representable in the GIF file format specification is 100 fps (0.01s), which no browser supports and 60hz consumer screens cannot faithfully display this anyways. Browser-engine image decoders will automatically reset this framerate to 10fps and play it x10 times slower. If this gif is moving very slow to you, it is because your browser reset the speed to 10fps.

Online Compilers and __cpuid

First Post!