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

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

Incredible Demos

  • By
    Create a Download Package Using MooTools Moousture

    Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP. The XHTML We provide...

  • By
    Create a Simple Dojo Accordion

    Let's be honest:  even though we all giggle about how cheap of a thrill JavaScript accordions have become on the web, they remain an effective, useful widget.  Lots of content, small amount of space.  Dojo's Dijit library provides an incredibly simply method by which you can...

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!