quick and dirty .gif file generation from video

In creating ‘how to’ posts I’ve found that there are plenty of times where a screen capture would save me loads of time rather than typing out step by step instructions. While static screen grabs are often used, there are moments where a video recording of my screen would be much more helpful. But I didn’t want to create videos either, because those can really eat up file space online… maybe a .gif of the original movie would do?

I stumbled across the fact that you can import .gif files and treat them just like static images as far a the html syntax is concerned. My workflow for generating through publishing .gif files in an html style format is as follows.

Step 1 – Make your movie

I have a Mac, which has Quicktime, which is just about all I ever need to do basic screen capture work. See this tutorial for one example (there are many) using such an approach. Ultimately you need to generate a .mov file to carry on to Step 2 next.

Step 2 – Install software to convert .mov file to .gif

Thanks to Alex D for this suuuper easy to use piece of software: screengif Install instructions are provided on the default README.md page, but note you’re going to have to also install a few dependencies. In case that’s unfamiliar I’ll walk you through it a few ways starting from the ground up. I’ve found his existing instructions are outdated if you’re using a Mac OS >= Sierra, which I’ll point out explicitly below:

To the impatient – see his page for a quick Docker-based implementation if you know what you’re doing…

• Do you have the Homebrew package manager installed? Great – this is going to be easy. Use Conda or something else? You’ll have to look elsewhere for guidance in this instance.
  • No Homebrew? See my earlier blog post about install options including Homebrew.
  • No package mamanger at all? – here’s a primer
• Do you have Ruby installed? If yes, proceed.
  • No? See lots of alternative install info here, but I’m assuming you’re doing it either the Brew way:

    brew install ruby
    

If you’re set up with Homebrew, install of the program is a breeze and almost follows his instructions exactly:

## install xquartz if you haven't already:
brew cask install xquartz
open /opt/homebrew-cask/Caskroom/xquartz/2.7.9/XQuartz.pkg # runs the XQuartz installer

## install program and other dependencies
brew install ffmpeg gifsicle pkg-config   # note we have dropped install of imagemagick
brew install imagemagick@6 && brew link imagemagick@6 --force # critical extra line for newer Mac OS'
gem install screengif

You’ll notice instructions above are slightly different from the default instructions in two ways:

• 1) I’ve taken out the imagemagick program from the default install with brew install ...
• 2) I’ve added a line: the brew install imagemagick@6 && brew link .... Turns out that without running that extra line you’ll get an error message if you try to run screengif because apparently something about the imagemagick program by itself fails to coordinate with Ruby. See this post for an extended discussion. Those changes should sufficiently allow you to install the program. You can test this with:

screengif

Which should print out the help menu.

No input file available.
screengif.rb - Convert your screencast into a gif.
Usage:
	screengif.rb [options] [--input FILENAME.mov] [--output OUTPUTFILE.gif]
Examples:
	./screengif.rb --input demo.mov --output out.gif
	cat somefile.gif | ./screengif.rb --progressbar --framerate 10 --delay 50 --delay-last 5 > out.gif

Specific options:
    -i, --input FILENAME.mov         Use ffmpeg to convert FILENAME.mov into PPM image stream and process results.
                                     If missing, will process PPM or GIF image stream from STDIN.
    -o, --output FILENAME.gif        Output resulting GIF data to FILENAME.gif. (defaults to STDOUT).
    -p, --progressbar                Overlay progress bar on the animation.
    -d, --delay MS                   Animation frame delay, in tens of ms. (default: 10)
        --delay-last MS              Animation frame delay of last frame, in tens of ms. (default: 50)
    -r, --framerate FPS              Specify amount of frames per second to keep. (default: 5)
    -w, --max-width PIXELS           Output image max width, in pixels.
        --max-height PIXELS          Output image max height, in pixels.
        --no-contrast                Skip increasing contrast using imagemagick.
    -f, --fuzz PERCENT               Imagemagick fuzz factor for color reduction. (default: 5%)
        --no-coalesce                Skip Magick::ImageList#coalesce() if input doesn't need it.
        --no-gifsicle                Prevent filter the output through gifsicle. Greatly increases output file size.
    -h, --help                       Show this message
    -v, --verbose                    Verbose output
        --version                    Show version

Step 3 – run the software

Look at the print out of that help menu for all usage parameters. I’ve found that their default usage is sufficient to generate a moderately sized .gif for videos between 30 seconds to 1 minute.

Step 4 – insert a .gif file with Markdown syntax

This step is easy. You just insert the .gif as if it’s any old image file.

That’s it!