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

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    WebSocket and Socket.IO

    My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push messages from client to server efficiently...

  • By
    JavaScript Copy to Clipboard

    "Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great for...

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!