Cacher is the code snippet organizer for pro developers

Introduction

Sometimes I want to make a screencapture of a websites behaviour.

In Chrome, I am quite happy doing this with the Awesome Screenshot: Screen Video Recorder extension.

Besides screenshots, the extension offers the ability to make a recording. (Limited to 30 seconds in the free version).

The recording can be uploaded to Youtube or Google Drive. It can also be downloaded as WebM file.

Often, I want to share the recording with co-workers on Slack.

Besides the fact that Slack does not support WebM, I dislike uploading several MBs of recording.

To remedy this, I convert the recording to a (smaller) GIF and share that on Slack.

Converting

To convert the WebM to GIF, I use FFmpeg. I then use Gifsicle to resize and optimize the created GIF.

I've found that 600 pixels height is a nice compromise between size and readablility (when text is involved).

The command I use for this is:

sInput='/path/to/file.webm';
sOutput="$(basename ${sInput%.*})";
ffmpeg -i "${sInput}" -pix_fmt rgb8 "${sOutput}.gif" \
    && gifsicle --optimize=3 --output "${sOutput}-optimized.gif" --resize-height 600 "${sOutput}.gif"

This will easily turn a 2.5M WebM file to a 600K GIF. Without optimization it would be roughly 3.5M.

I'm sure more optimizations are possible, I might add these later.

It would also be simple to turn the command into a function. I might do that later as well.