Gifit: Turn Screen Recordings into GIFs

engineering grouparoo 
Fri Feb 12 2021 - Originally posted at https://www.grouparoo.com/blog/gifit


Grouparoo gif example of changing destination groups



When building Grouparoo, the Grouparoo 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!

1#!/bin/bash 2 3# This script required ffmpeg and gifsicle 4# On OSX: `brew install ffmpeg gifsicle` 5 6SECONDS=0 7INPUT_FILE=$1 8BASENAME="${INPUT_FILE%.*}" 9OUTPUT_FILE="$BASENAME.gif" 10 11echo "🎥 Converting $INPUT_FILE to $OUTPUT_FILE" 12 13# Convert the video to a gif 14ffmpeg -i $INPUT_FILE -pix_fmt rgb8 -r 10 $OUTPUT_FILE -loglevel warning -stats 15 16# Compress the Gif 17# Reduce the size to 1/2 the original (because we are recording a retina screen) 18# Tweak the "lossy" argument to add more colors, but increase filesize 19gifsicle -O3 $OUTPUT_FILE -o $OUTPUT_FILE --lossy=80 --scale=0.5 20 21# How lng did it take? 22ELAPSED="$(($SECONDS / 3600))hrs $((($SECONDS / 60) % 60))min $(($SECONDS % 60))sec" 23 24echo "🎉 Complete in $ELAPSED"

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 screenshot.mov
  3. Ran gifit screenshot.mov and I got screenshot.gif!
Hi, I'm Evan

I write about Technology, Software, and Startups. I use my Product Management, Software Engineering, and Leadership skills to build teams that create world-class digital products.

Get in touch