DEV Community

Evan Tahler for Grouparoo

Posted on • Originally published at


Gifit: Convert Screen Recordings to easy-to-share Animated gifs

When building Grouparoo, the team often shares screen recordings of our work with each other. In many cases, the tools we are using (like Github, until recently anyway) could only embed image content into READMEs and Pull Requests. That meant that the humble animated gif was often the best way to share a video. Here is my personal script called gifit which uses the open source ffmpeg and gifsicle tools to make it super easy to convert any video file into an easy-to-share gif!

Animated Gif


# This script required ffmpeg and gifsicle
# On OSX: `brew install ffmpeg gifsicle`


echo "πŸŽ₯ Converting $INPUT_FILE to $OUTPUT_FILE"

# Convert the video to a gif
ffmpeg -i $INPUT_FILE -pix_fmt rgb8 -r 10 $OUTPUT_FILE -loglevel warning -stats

# Compress the Gif
# Reduce the size to 1/2 the original (because we are recording a retina screen)
# Tweak the "lossy" argument to add more colors, but increase filesize
gifsicle -O3 $OUTPUT_FILE -o $OUTPUT_FILE --lossy=80 --scale=0.5

# How lng did it take?
ELAPSED="$(($SECONDS / 3600))hrs $((($SECONDS / 60) % 60))min $(($SECONDS % 60))sec"

echo "πŸŽ‰ Complete in $ELAPSED"
Enter fullscreen mode Exit fullscreen mode

Note that on OS X you will need to brew install ffmpeg gifsicle first.

So, to make the video above, I:

  1. Used Quicktime to record my screen
  2. Saved the video as
  3. Ran gifit and I got screenshot.gif!

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.