ASCII Thoughts

Animated GIFs with LICEcap, Preview and ImageMagick

Animated GIFs have seen a resurgence over the last few years. It's easy to see why...

Cute kitten and puppy

While I'm grateful for puppies and kittens, the reason I like animated GIFs, and I think the reason they won over the web, is because GIF is a universal format. Point anyone to a URL, and no matter their platform/device, it's pretty much guaranteed they can see it.

Screencasts

Because GIF is such a universal format, it makes sense to use it for short screencasts. LICEcap is a tiny utility for Mac and Windows that allows you to quickly select a section of your screen and record it directly to a GIF file:

LICEcap recording

Editing

While LICEcap makes it super easy to quickly record GIFs, it lacks any editing capabilities. Sometimes, all you need to make your GIF perfect is remove a few frames, for errors, typos, dead time, etc. Keeping the smallest number of frames possible also helps with size.

GIF being a standard format, you can open it in Preview to edit the frames. Simply click on a frame and press delete to delete it. When you're done, you can save the file.

Editing in preview

Another alternative, if the GIF gets really big, is to use ImageMagick:

# Generate individual frames
convert -coalesce input.gif frames.png

# Do some editing, and then put the frames back together
convert frames*.png output.gif

Framerate

Your GIF is almost ready. Since your removed a few frames, and sticked to the essential, it's possible it's now a bit too fast. So let's reduce the framerate with ImageMagick:

convert     \
  -loop 0   \  # number of loops. 0 is infinite
  -delay 20 \  # ticks between frames. 1 tick is 10ms, so 5FPS
  input.gif \
  output.gif

Optimizing

Finally, we can use ImageOptim to optimize the file size:

Optimization

And you're done! Your screencast is ready to be shared with the world.

Conclusion

While you won't be producing hours of videos with LICEcap, it's definitely a useful tool for one off screencasts and other small demos. In association with Preview, ImageMagick and ImageOptim, it makes for a fast and powerful workflow.

Other alternatives and tools:

That's it for today. Cheers!