OS X Screencast to animated GIF

GIF-Screencast-OSX.md

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

• Open "Quicktime Player",
• Go to File -> New Screen Recording
• Selected screen portion by dragging a rectangle, recorded 13 second video.
• Go to File -> Export -> As Movie
  • Saved the video in full quality with the filename in.mov

To convert in.mov into out.gif (filesize: 48KB), open Terminal to the folder with in.mov and run the following command:

ffmpeg -i in.mov -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > out.gif

Notes on the arguments:

• -r 10 tells ffmpeg to reduce the frame rate from 25 fps to 10
• -s 600x400 tells ffmpeg the max-width and max-height
• --delay=3 tells gifsicle to delay 30ms between each gif
• --optimize=3 requests that gifsicle use the slowest/most file-size optimization

To share the new GIF using Dropbox and Copy Public URL, run the following:

cp out.gif ~/Dropbox/Public/screenshots/Screencast-`date +"%Y.%m.%d-%H.%M"`.gif

Installation

The conversion process requires the following command-line tools:

• ffmpeg to process the video file
• gifsicle to create and optimize the an animated gif

If you use homebrew and homebrew-cask software packages, just type this in:

brew install ffmpeg 
brew cask install xquartz #dependency for gifsicle, only required for mountain-lion and above
open /usr/local/Cellar/x-quartz/2.7.4/XQuartz.pkg # runs the XQuartz installer (YOU NEED TO UPDATE THE PATH)
brew install gifsicle

See also

I ended up rewriting this gist's functionality into screengif, a ruby script with significant quality improvements and a few gratuitous features. Check it out at https://github.com/dergachev/screengif

Resources

• http://schneems.com/post/41104255619/use-gifs-in-your-pull-request-for-good-not-evil (primary source!)
• http://www.reddit.com/r/programming/comments/16zu7d/use_gifs_in_your_pull_requests_for_good_not_evil/
• http://superuser.com/questions/436056/how-can-i-get-ffmpeg-to-convert-a-mov-to-a-gif#_=_
• http://gnuski.blogspot.ca/2012/06/creating-animate-gif-with-free-software.html

Related Ideas

• Extend https://github.com/dergachev/copy-public-url folder action for this use case
  • it would automate the conversion before copying Dropbox public URL
  • assign the folder action to ~/Dropbox/Public/Screenshots/gif
  • consider finding a way to simplify the dependency installation

Performance-vs-quality.md

GIF-Screencast-OSX performance testing

I was disappointed with the color and quality that ffmpeg's GIF conversion gives. Imagemagick's convert can also be used to do the conversion, though this has serious performance penalties.

The following details my experiments of converting a 3.8 second movie to a GIF.

FFMPEG to PNG -> CONVERT to GIF individually

• 42 seconds in CONVERT, did not determine file size

ffmpeg -i in-trimmed.mov -r 10 -vcodec png out-static-%02d.png 
time for img in out-static*.png; do convert -verbose +dither -layers Optimize "$img" "$img.gif" ;  done

FFMPEG to PNG -> CONVERT TO GIF in bulk

• 70KB filesize; 7.2 seconds in CONVERT
• http://dl-web.dropbox.com/u/29440342/screenshots/CTHVGY-Screencast-2013.02.06-18.03.gif

ffmpeg -i in-trimmed.mov -r 10 -vcodec png out-static-%02d.png 
time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png  GIF:- > out13.gif

FFMPEG to PNG -> CONVERT to GIF in bulk -> gifsicle

• 56KB size; 7.2 seconds in CONVERT
• http://dl-web.dropbox.com/u/29440342/screenshots/USNVKN-Screencast-2013.02.06-18.13.gif

ffmpeg -i in-trimmed.mov -r 10 -vcodec png out-static-%02d.png 
time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png  GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > out12.gif

FFMPEG to PPM -> CONVERT to GIF in bulk

• 6.7 seconds in CONVERT, 70KB filesize
• http://dl-web.dropbox.com/u/29440342/screenshots/ZMMDMX-Screencast-2013.02.06-17.59.gif

ffmpeg -i in-trimmed.mov -r 10 -vcodec ppm out-static-%02d.ppm
time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.ppm  GIF:- > out14.gif

FFMPEG to PPM -> CONVERT to GIF in bulk -> gifsicle

• 7.2 seconds in CONVERT, 56KB filesize
• http://dl-web.dropbox.com/u/29440342/screenshots/UGTQNY-Screencast-2013.02.06-17.49.gif

time ffmpeg -i  in-trimmed.mov -r 10 -f image2pipe -vcodec ppm - |  time convert -verbose +dither -layers Optimize -resize 600x600\> - gif:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile ->  out15.gif

FFMPEG to GIF -> gifsicle

• 1 second total (not using CONVERT), 22KB filesize
• http://dl-web.dropbox.com/u/29440342/screenshots/XVXWCJ-Screencast-2013.02.06-17.48.gif

ffmpeg -i in-trimmed.mov -vf "scale=min(iw\,600):-1" -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=7 --colors 128 > out16.gif

Notes

• Omitting resizing down to 600x600 before converting to GIF dramatically slows down CONVERT.
• PPM is the only image format that is compatible with FFMPEG piping directly to CONVERT
  • it has the same performance and compression characteristics as outputting to PNG
  • it avoids creating and cleaning up temporary image files
  • otherwise the temporary files would need to be sorted by numeric order before globbing

Resources

• http://www.imagemagick.org/discourse-server/viewtopic.php?f=2&t=18320#reading-multiple-images-over-standard-input
• http://superuser.com/questions/71028/batch-converting-png-to-jpg-in-linux
• http://zeekish.wordpress.com/2011/09/14/pdf-to-gif-conversion-and-optimization/
• http://stackoverflow.com/questions/3306888/ffmpeg-generate-n-evenly-spaced-png-screenshots
• http://mariovalle.name/postprocessing/ImageTools.html#gifsicle
• http://ffmpeg-users.933282.n4.nabble.com/Converting-avi-files-to-animated-gifs-td935274.html
• https://lists.libav.org/pipermail/ffmpeg-user/2010-August/026860.html
• http://stackoverflow.com/questions/8133242/ffmpeg-resize-down-larger-video-to-fit-desired-size-and-add-padding
• http://superuser.com/questions/318845/improve-quality-of-ffmpeg-created-jpgs

Be aware that brew install ffmpeg brings in a million dependencies, including for some bizarre reason, gnutls and unbound (a validating, recursive, caching DNS resolver):

• aom, libpng, freetype, fontconfig, frei0r, gettext, libidn2, libtasn1, p11-kit, libevent, unbound, gnutls, lame, fribidi, glib, pixman, cairo, graphite2, harfbuzz, libass, libbluray, libsoxr, libvidstab, libogg, libvpx, opencore-amr, jpeg, libtiff, little-cms2, openjpeg, opus, rtmpdump, flac, libsamplerate, rubberband, sdl2, snappy, giflib, webp, leptonica, tesseract, theora, x264, x265 and xvid

That said, this worked really well. I used --delay=10 too.

You can find xquartz here if you installed it with homebrew v2.2+,

/usr/local/Caskroom/xquartz/2.7.11/XQuartz.pkg

❤️ It works like a charm!

I got Incompatible pixel format 'rgb24' for codec 'gif', auto-selecting format 'rgb8' despite installing gifsicle, upgrading ffmpeg, etc.

Here is my version for slightly higher-quality output (my use-case is short screencasts of UI interactions for sharing on Github PR's). Note it is slower.

mov2gif() {
  out="$(echo $1 | sed 's/\.mov$/\.gif/')"
  max_width="650"
  frames_per_second="20"
  ffmpeg -i $1 -vf "scale=min(iw\,$max_width):-1" -r "$frames_per_second" -sws_flags lanczos -f image2pipe -vcodec ppm - \
    | convert -delay 5 -layers Optimize -loop 0 - "$out" &&
  echo "$(tput setaf 2)output file: $out$(tput sgr 0)" &&
  open -a Google\ Chrome $out
}

I got Incompatible pixel format 'rgb24' for codec 'gif', auto-selecting format 'rgb8' despite installing gifsicle, upgrading ffmpeg, etc.

Here is my version for slightly higher-quality output (my use-case is short screencasts of UI interactions for sharing on Github PR's). Note it is slower.

mov2gif() {
  out="$(echo $1 | sed 's/\.mov$/\.gif/')"
  max_width="650"
  frames_per_second="20"
  ffmpeg -i $1 -vf "scale=min(iw\,$max_width):-1" -r "$frames_per_second" -sws_flags lanczos -f image2pipe -vcodec ppm - \
    | convert -delay 5 -layers Optimize -loop 0 - "$out" &&
  echo "$(tput setaf 2)output file: $out$(tput sgr 0)" &&
  open -a Google\ Chrome $out
}

for future readers - convert is from imagemagick (installed via brew install imagemagick)

To avoid installing the dependencies if you don't need them, use docker:

docker run -v $PWD:/tmp jrottenberg/ffmpeg \
        -stats  \
        -i /tmp/file.mov \
        -vf "scale=min(iw\,650):-1" -r 20 \
        -f gif - > file.gif

The file must be in the same directory as you run, if not you need to provide the right volume configuration (see docker volume documentation).

For macOS, we have built one small app: https://github.com/joshdholtz/crunchygif

What @mrk-han said. I didn't need to do anything other than brew install ffmpeg and brew install gifsicle and away we go with the one-liner, which you can easily tweak to fix the size and the output delay framerate.

ffmpeg -i in.mov -r 10 -f gif - | gifsicle --optimize=3 > out.gif was enough for me. Also you need to run brew install ffmpeg gifsicle before running the command.

ffmpeg -i in.mov -r 10 -f gif - | gifsicle --optimize=3 > out.gif worked well. Thanks @ugultopu

cool

Thanks dude.

Awesome!
few things that I could collect to use ffmpeg from terminal

• brew install gifsicle
• brew install ffmpeg I already had it, you can verify by typing ffmpeg on terminal (install only if you see command not found)
• It works fine with mp4 and mov format

The dropbox link at the top of this gist died long ago. (Thanks Dropbox for removing features).
Here's a hack to bring it back: uploading image as a comment to this gist, then linking the resulting URL from the markdown in the gist itself. :)

brew cask install xquartz has been updated to brew install xquartz --cask

Thanks, Dropbox!

brew cask install xquartz has been updated to brew install xquartz --cask
Should be updated to something else ;-)

Gifski ftw!

• Record with Quicktime.
• Drag-and-drop the recording into Gifski.
• Tweak your options.
• Generate gif.
• Tweak again.
• Done.