Resize an Animated GIF

By  on  

Animated GIFs are images but you can't really handle them link other types of images, like PNGs or JPEGs or even WebPs.  GIFs are kind of a video file, because they have frames, but there's no real control over how they play or loop.  My favorite image manipulation utility, ImageMagick, doesn't seem to be the best utility for animated GIFs -- another utility called gifsicle is as good as it gets. I showed you how to merge and optimize animated GIFs with gifsicle, and now let's look at resizing animated GIFs.

If you try to use ImageMagick's basic resize functionality, you'll end up getting the first frame output to the correct size.  That's nice but you want to keep the GIF animated, right?  Here are a few easy methods for resizing a GIF with gifsicle:

# Scaling of an image - 50%
gifsicle --scale 0.5 -i animation.gif > animation-smaller.gif

# Scale to a given width with unspecified height
gifsicle --resize-fit-width 300 -i animation.gif > animation-300px.gif

# Scale to a given height with unspecified width
gifsicle --resize-fit-height 100 -i animation.gif > animation-100px.gif

# Clip to size
gifsicle --resize 300x200  -i animation.gif > animation-clipped.gif

You can use scale to easily scale an image by a given factor, but you can also use --resize-fit-height or --resize-fit-width to scale to respective sizes.  You can also clip with --resize.  The output stays animated and you have your animated GIF at the desired size!

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

  • By
    Chris Coyier’s Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • By
    Chris Coyier’s Favorite CodePen Demos IV

    Did you know you can triple-heart things on CodePen? We’ve had that little not-so-hidden feature forever. You can click that little heart button on any Pen (or Project, Collection, or Post) on CodePen to show the creator a little love, but you can click it again...

Discussion

  1. This is great! Thank you for the share!!!! I love using animated gifs.

  2. Thanks for sharing your experience. It’s gonna be useful for me and I will be able to resize this damn gifs.

  3. Neovorg

    This is very useful! Thank you!!! By the way, I’d like to add a way to batch resize your GIF files. (Keep in mind, however, that your files will be overwritten, so be sure to keep a backup of the originals before proceeding:)

    This command will rescale all GIFs in the “input” directory to half the original dimensions:

    gifsicle --batch --scale 0.5 -i input/*.gif

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