Blog

Category
  • Convert a Mov to a GIF like a boss

    So, there's this swell Gist to convert an OS X screencast made with ScreenFlow from a movie (.mov) file to a GIF. I needed this for a new-user email I need to send out to fresh NeonMobsters. The problem with this, though, is that the output of this command was shit:

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

    No, seriously — not just shit, but 2.3MB of heinousness:

    I'm am not sending this out to new users.

    So I started poking around and discovered that 1) I should install ffmeg and gifsicle and then 2) do something way more complicated, but that would give me the results I was looking for (a beautiful image that was tiny). Here's basically what I ended up doing, after installing those binaries:

    1. The video that I had was a 2.5MB .mov file, encoded with the Animation codec at full resolution, recorded on my Retina MacBook Pro. This means that I had a file that was 2x the size I wanted it to be, which was intentional.
    2. In the directory where my movie (src.mov) was, I executed these commands in Terminal.app to convert the movie to a bunch of PNGs:
      mkdir ./pngs
      ffmpeg -i src.mov -r 10 ./pngs/out%04d.png  
    3. Next, I ran these commands to create a directory and convert all these PNGs into GIFs (sips is built in to OS X):
      mkdir ./gifs
      sips -s format gif .pngs/*.png --out ./gifs
    4. Finally, I ran these command to generate the GIF from my recently generated GIFs:
      cd ./gifs
      gifsicle --optimize=3 --delay=3 --loopcount *.gif > animation.gif
    The result is nearly identical to the source video and clocks in at an amazing 76KB:
    I then decided to resize the image by 50% to get it back to a non-Retina size using the --resize command:
    gifsicle *.gif --optimize=3 --delay=3 --loopcount --resize 238x272 > animation-small.gif
    ...and ended up with a 40KB image I can use:
    I'm sure this technique won't work for everyone — as it's highly dependent on the video source that you're working with, but it should give you a place to start from if you're trying to do something similar.
    For additional gifsicle commands and optimizations, refer to the developer docs.