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
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    CSS Columns

    One major gripe that we've always had about CSS is that creating layouts seems to be more difficult than it should be. We have, of course, adapted and mastered the techniques for creating layouts, but there's no shaking the feeling that there should be a...

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

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!