Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Optimize GIFs

By  on  

I've written a lot about converting different media types lately, especially GIFs, including Convert Video to GIF or GIF to Video, Detect if a GIF is Animated, and Get the First Frame of an Animated GIF with ImageMagick, but whether it's ImageMagick or ffmpeg doing the work, GIFs do not always come out optimized.  Since GIFs can be taxing on the user's machine, it's best to optimize GIFs for top performance.  Another handy GIF manipulation library, gifsicle, has a few built in methods for optimizing GIFs.

Before jumping into the GIF optimization commands, it's important to point out that gifsicle is much more than a GIF optimizer.  gifsicle can resize GIFs, merge GIFs, and do just about anything you'd hope you could do with a GIF.

gifsicle has three types of GIF optimization to choose from:

  • -O1 Stores only the changed portion of each image. This is the default.
  • -O2 Also uses transparency to shrink the file further.
  • -O3 Try several optimization methods (usually slower, sometimes better results).

The shell command to optimize GIFs is:

gifsicle -O3 animation.gif -o animation-optimized.gif

If you have the time and patience, I recommend -O3 as was able to get much more optimized GIFs with this method.  On some GIFs I saved up to 20% in file size, and depending on your specific GIF, you may be able to save more!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

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

Incredible Demos

  • By
    Using Opacity to Show Focus with MooTools

    I'm a huge fan of using subtle effects like link nudging (jQuery, MooTools) to enhance the user experience and increase the perceived dynamism of my websites. Trust me -- a lot of little things are what take websites to the next level.

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Discussion

  1. Ethan Glover

    I’ve been using the PageSpeed Insights resources lately. Run the already published page through Insights, click on desktop, and if there’s anything that isn’t optimized you can download their versions of it. (If you download through the mobile tab, the images will be resized to be too small for desktop.)

    Google tends to optimize everything twice as good as any software I’ve come across. In fact, I wish they’d release their own software that uses the same methods.

    I don’t know about gifsicle, I don’t use a lot of GIF’s, but Insights might be worth looking at for comparison.

  2. Cathy Mayhue

    Thanks for sharing this David. gifsicle has been added in my ‘to learn’ list.

  3. Waqas Ahmed

    To met, the final product isn’t good enough, Of course I don’t know how to do it better, since I’m here reading tutorials, but I’ve seen better gifs on tumblr. And tumblr only upload gifs till 499k, after that the gif is frozen. So, how to do an amazing gift, good quality and low size? That’s what I was looking for when I came here. Anyway, nice to know, although it’s a good tutorial, thank you for sharing.
    Regards

  4. Marcio Fão

    You can also do it in your browser by using this online tool:
    http://gifcreator.me/
    I’ve made this one using it: http://i.imgur.com/hUkHzPD.gif

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