How to record screen on macOS and convert to .gif

Record screen and convert to .gif on macOS.md

1. What you need

Download and install:

• ffmpeg (https://www.ffmpeg.org/)
• gifsicle (https://www.lcdf.org/gifsicle/)

---

You can do it directly in terminal with Homebrew:

• $brew install ffmpeg
• $brew install gifsicle

If you don't have Homebrew, check out their official site on how to install it: https://brew.sh/

---

2. How to record screen on macOS

You don't need any third-party apps, just press:

Command⌘+Shift⇧+5

You should see the following menu:

Use the crop tool to select part of the screen you want to capture and hit 'Record'.

---

3. Convert .mov to .gif

Using terminal commands we will now convert the screen video we've just captured:

• For the sake of simplicity, rename the video to input.mov.
• open a new terminal at the same directory as the video (eg. if it's on desktop you can navigate there with cd desktop)
• you can copy and run the following command: ffmpeg -i input.mov -pix_fmt rgb8 -r TYPE_HERE_DESIRED_FRAMERATE -vf "scale=TYPE_HERE_DESIRED_WIDTH:-2" output.gif && gifsicle --optimize=3 output.gif -o output.gif
  • I use gifs as a way to showcase demo usage of apps, that's why I suggest rescaling here the gif, because the screen captured video will have a really high resolution, which is not useful for example for attaching a gif to a GitHub README.md. Therefore, replace "TYPE_HERE_DESIRED_FRAMERATE" and "TYPE_HERE_DESIRED_WIDTH" in the code with expected values. I usually go with: ffmpeg -i input.mov -pix_fmt rgb8 -r 10 -vf "scale=500:-2" output.gif && gifsicle --optimize=3 output.gif -o output.gif

DONE

You should find the output.gif file in the same directory as your input video.

---

4. (OPTIONAL) Let's save that code for the future

Now you can either just copy it to the terminal whenever you want to convert a video to a gif, or you can neatly pack it for future usage in a form of one command.

• navigate to your shell configuration file, for Z shell on Mac it's ~/.zshrc, you can use Command⌘+Shift⇧+G when at Finder to navigate there.
  • there is a chance the file may not exist by default, so you can create it at your ~/ home directory.

• open it with a text editor and paste there: gif(){ ffmpeg -i input.mov -pix_fmt rgb8 -r 10 -vf "scale=$1:-2" output.gif && gifsicle --optimize=3 output.gif -o output.gif }
• save the file

Now whenever you need to convert an input.mov file, just open your terminal and type gif WIDTH_VALUE:

• for example: gif 500 to automatically convert and scale the video to a gif with a width of 500px.

---

Resources

While looking for the most convienent method to quickly create gifs for attaching in apps demos, I've found these guides and articles to be helpful:

• https://gist.github.com/dergachev/4627207
• https://dev.to/piczmar_0/quickly-make-a-gif-from-a-video-553m
• https://www.lcdf.org/gifsicle/man.html
• https://stackoverflow.com/questions/8218363/maintaining-aspect-ratio-with-ffmpeg