A lot of our users have been asking how to create high quality animated GIFs to help them when announcing new features and sending out newsletters. Here’s a quick overview on why and how we use GIFs to convey message.

Why use GIFs?
• They work seamlessly on mobile and legacy browsers. iPhone Safari and Chrome for Android still have issues with the autoplay and loop attributes of the HTML5

• They work on all email and webmail clients, which makes them a great fit for newsletters and announcements.

• They’re easy to share, store and link to, which explains their overwhelming popularity on today’s web. Especially when the subject of the GIF is a cute kitten.

How To Create GIFs
In order to create GIFs like the one above on our featured image, we first produce a screencast and export it to a QuickTime® mov format. You can use virtually any program, including QuickTime itself (File > New Screen Recording)

A neat trick we use when recording is to set the system’s background to a solid white background. This ensures that fewer GIF image blocks are used and that they’re focused on the content you’re recording, instead of your wallpaper, resulting in higher quality and lower file-size.

Once you have your video, the rest of the work is taken care of by ffmpeg and GraphicsMagick.

Thankfully, there’s a great npm package called gify that makes combining these tools to produce an animated GIF as simple as this:

$ npm install -g gify
$ gify file.gif

We can’t wait to see your GIFs


Please enter your comment!
Please enter your name here