Detect if a GIF is Animated

By  on  
WTF

If you tweet an animated GIF, you'll notice that Twitter takes it and converts it to an mp4.  I'd speculate that they do that conversion because an MP4 is better supported across platforms, at least in that they allow for playing/pause of the animation. And with a video you can prevent infinite looping, unlike a GIF.  How can you determine if a GIF is animated though?  I found a few good solutions.

Command Line with ImageMagick

ImageMagick, the amazing image manipulation library, provides a method for counting frames in a GIF:

./ImageMagick-6.9.0/bin/identify -format %n wtf.gif

The command above will provide you a count of the frames within the GIF.

animated-gif-detector

For those of you that prefer JavaScript (...my people...), I found a really simple animated GIF detection library on NPM:  animated-gif-detector.  Its API couldn't be shorter:

var fs = require('fs');
var animated = require('animated-gif-detector');

> animated(fs.readFileSync('wtf.gif'));
// true

> animated(fs.readFileSync('blank.gif'));
// false

The function call simply returns true or false, representing if the GIF is animated.  Exactly what I wanted!

As for what each library looks for, I've seen some ugly bit code I wont try to describe.  If you want to determine if a GIF is animated, however, it's as easy as the utilities above!

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • By
    Elegant Overflow with CSS Ellipsis

    Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were...

Discussion

  1. Only as a side note, Twitter is using mp4 because it’s an stream. Gif loading prevents the browser to fire the “ready” state until all of them are loaded. By using the video the event is fired meanwhile all the “gif” are being loaded in parallel.

  2. And of course there is this webservice: https://doesthisgifcontainananimation.com/

    • Christian Læirbag

      Hey Robert: Any Idea on how to put that service to work? I can’t find the correct syntax to use with http://i.imgur.com/tYqyhJT.gif for example. If you have the solution, please let me know. Ok?

    • It’s easy! In Javascript, you can call: encodeURIComponent("http://i.imgur.com/tYqyhJT.gif")

      Then you append the result to the domain, just like this:
      https://doesthisgifcontainananimation.com/http%3A%2F%2Fi.imgur.com%2FtYqyhJT.gif

      You can then see, whether the GIF contains an animation or not. :)

    • Christian Læirbag

      Oh, now I get it. I wasn’t understanding that encoding stuff. Thanks for clearing it out! :)

      By the way: I’m now trying to get result to be fetched from a Javascript or Yahoo Pipe, but I’m not getting close. If you have or manage to find something, please bring some words once more O.K.?

    • Christian Læirbag

      Duhh!… Forget about it. Yahoo Pipes is shutting down, so…Nevermind.

  3. Peter Galiba

    Please, don’t advocate fs.readFileSync as it is not a good approach in 99% of the cases. animated-gif-detector supports streams, so use them instead. And you don’t even have to continue reading the file when you have already detected that it is a animated gif. Animated gifs can be big, and reading big files into memory is not too efficient, especially if they are not even on your local machine, but read from a network.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!