January 26, 2012

Animated GIF Minimum Frame Delay Browser Compatibility Study

Introduction

Motivated by frustration at the inconsistent experience related to viewing GIF-based works across different web browsers, this study seeks to examine the minimum supported frame delay values and quantify the discrepancies. Prior research on this topic can be found in humpy77’s deviantART journal entry from March 29, 2007 entitled, Frame Delay Times for Animated GIFs. However, over the past 5 years the environment has changed significantly and new research was needed. For those that wish to achieve the highest possible framerates or the best cross-browser compatibility, this comparative breakdown should prove to be a useful reference.

PLEASE NOTE : IN ORDER TO CORRECTLY VIEW THE COMPARISON IMAGES BELOW IT IS REQUIRED THAT YOU USE CHROME, FIREFOX, OR OPERA.






Chrome

2007 Status : Previous report does not include information on this browser.
2012 Status : Supports frame delays as low as 0.02 s, with anything below that being rounded up to 0.10 s.

Performance Δ : ? UNKNOWN 
Maximum Framerate : 50 fps



0.00 s 0.01 s 0.02 s 0.03 s



0.04 s 0.05 s 0.06 s 0.10 s







Firefox

2007 Status : Previous report states that frame delays below 0.02 s are rounded up to 0.10 s.
2012 Status : Supports frame delays as low as 0.02 s, with anything below that being rounded up to 0.10 s.

Performance Δ : → STEADY 
Maximum Framerate : 50 fps



0.00 s 0.01 s 0.02 s 0.03 s



0.04 s 0.05 s 0.06 s 0.10 s







Safari

2007 Status : Previous report states that frame delays below 0.03 s are rounded up to 0.03 s.
2012 Status : Supports frame delays as low as 0.06 s, with anything below being rounded up to 0.10 s.

Performance Δ : ↓ DECLINED 
Maximum Framerate : ~16 fps



0.00 s 0.01 s 0.02 s 0.03 s



0.04 s 0.05 s 0.06 s 0.10 s







Opera

2007 Status : Previous report states that frame delays below 0.10 s are rounded up to 0.10 s.
2012 Status : Supports frame delays as low as 0.02 s, with anything below that being rounded up to 0.10 s.

Performance Δ : ↑ IMPROVED 
Maximum Framerate : 50 fps



0.00 s 0.01 s 0.02 s 0.03 s



0.04 s 0.05 s 0.06 s 0.10 s







Internet Explorer

2007 Status : Previous report states that frame delays below 0.06 s are rounded up to 0.10 s.
2012 Status : Supports frame delays as low as 0.06 s, with anything below that being rounded up to 0.10 s.

Performance Δ : → STEADY
Maximum Framerate : ~16 fps



0.00 s 0.01 s 0.02 s 0.03 s



0.04 s 0.05 s 0.06 s 0.10 s







Conclusions

The first finding to note is that no modern browser surveyed supports frame delays below 0.02 seconds. Therefore, when creating an animated GIF, one should never use a frame delay below this threshold as it will be entirely ineffectual. Another interesting discovery is the presence of Safari as the only browser to have declined in performance related to animated GIF playback.

For those interested in creating and viewing smooth, fast animations the clear choices are Chrome, Firefox, and Opera.  These browsers all support a minimum frame delay of 0.02 seconds, resulting in an animated GIF running at 50 frames-per-second. However, this capability needs to be weighed against the issue of cross-compatibility.

With the decision of Safari and Internet Explorer to only support frame delays down to 0.06 seconds (rounding up to 0.10 seconds for anything below this), there is the possibility that the animation will be viewed significantly slower than intended. The GIF in question would be played back at a mere 10 frames-per-second, rather than the desired 50 frames-per-second. At just 20% of its true speed, this becomes a serious consideration for aesthetic impact.

You are invited to extend this research and offer critical feedback. I can be reached via email through this contact form or as @Nullsleep on Twitter.

January 24, 2012

How to Disable Image Smoothing in Modern Web Browsers

There used to be a time when images that were resized would retain their sharp edges, but several years ago web browsers began implementing image smoothing. I’ve always enjoyed being able to look more closely at the details in drawings online, but the experience is hampered when the pixels are blurred. 

I’ve been looking for a way to eliminate this blurring effect that now commonly occurs when one zooms into images. Below is a comparison image, along with CSS that should work across all browsers to maintain crisp edges when images are scaled or the page is zoomed:

img { 
	image-rendering: optimizeSpeed;             /* FUCK SMOOTHING, GIVE ME SPEED  */
 	image-rendering: -moz-crisp-edges;          /* Firefox                        */
 	image-rendering: -o-crisp-edges;            /* Opera                          */
 	image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
 	image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
 	-ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
      }

This post is dedicated to Dragan Espenschied and Tom Moody.

January 20, 2012
Jeremiah Johnson, Erased Tom Moody Drawing, 2012, PNG.
(for Phone Arts, original drawing can be seen here)

Jeremiah Johnson, Erased Tom Moody Drawing, 2012, PNG.

(for Phone Arts, original drawing can be seen here)

January 05, 2012
Jeremiah Johnson, Environment Variables, 2012, PNG.
(for Computers Club Drawing Society)

Jeremiah Johnson, Environment Variables, 2012, PNG.

(for Computers Club Drawing Society)

December 27, 2011
Jeremiah Johnson, Hostiae, 2011, PNG.
(for Phone Arts)

Jeremiah Johnson, Hostiae, 2011, PNG.

(for Phone Arts)

December 14, 2011
Jeremiah Johnson, Flawed Perspective, 2011, PNG.
(for Phone Arts)

Jeremiah Johnson, Flawed Perspective, 2011, PNG.

(for Phone Arts)

December 13, 2011
Jeremiah Johnson, Theatre of Magic, 2011, PNG.
(for Phone Arts)

Jeremiah Johnson, Theatre of Magic, 2011, PNG.

(for Phone Arts)

 
Jeremiah Johnson, Image Alchemy, 2011, PNG.
(for Phone Arts)

Jeremiah Johnson, Image Alchemy, 2011, PNG.

(for Phone Arts)

 
Jeremiah Johnson, Replica of a Replica, 2011, PNG.
(for Phone Arts)

Jeremiah Johnson, Replica of a Replica, 2011, PNG.

(for Phone Arts)

 
Jeremiah Johnson, Super VGA Camouflage, 2011, PNG.
(for Phone Arts)

Jeremiah Johnson, Super VGA Camouflage, 2011, PNG.

(for Phone Arts)

Theme designed by minusbaby, remixed by Nullsleep and coded by openBack

RSS RSS