0

Recording a Low-Filesize Gif on OSX

Posted (Updated ) in Uncategorized

Recording a gif on OSX is fairly easy but you’ll need a few tools to make it happen – especially if you want a nice, small filesize for online viewing.

 

Step 1 – Record a video

You can use anything for this – I was recording a window on my screen so I used Screenium but Quicktime works fine. The output was a 15 second 1.1MB MOV file of resolution 1184×738. I saved the file as demo.mov on my desktop.

 

Step 2 – Convert to a Slideshow of PNGs

  • 1

    brew install ffmpeg #if you don't already have it
  • 1

    mkdir output
  • 1

    ffmpeg -i demo.mov -vf scale=iw:ih -r 10 output/ffout%3d.png
    • ‘scale=iw:ih’ – Don’t change the input scale. You can also set this to specific values or ‘320:-1’ to rescale down for example
    • ‘-r 10’ – Set to 10 FPS
    • ‘output/ffout%3d.png’ output slideshow of pngs in output folder

 

Step 3 – Convert the Slideshow to a GIF

From our PNG slideshow we can generate a (huge) gif. Don’t worry, we’ll fix the filesize later.

  • 1

    brew install imagemagick #if you don't already have it
  • 1

    convert -delay 8 -loop 0 output/ffout*.png output/demo.gif
    • ‘convert’ is the command-line tool from ImageMagick
    • ‘-dalay’ is the delay of 8, you would get a FPS=100/8=12.5
    • ‘-loop’ adds Netscape loop extension to your GIF animation
    • ‘output/ffout*.png’ is the directory and file names going into the GIF
    • ‘output/animation.gif’ is the final location and GIF output

 

Step 4 – Optimise your GIF with Photoshop

  • Drag your new gif into Photoshop. Here you can make any changes such as removing frames. Turning on Window – Timeline will help here.
  • File – Save for Web and select GIF from the image type drop down at the top right
  • Tweak your Image Size and Colors values until you get the filesize you want (shown at bottom left). You can preview the GIF in realtime using the media buttons at the bottom right.
  • If the filesize is still too large, return to step 2 and lower your gifs FPS by lowering the r value.

  • Optimising your GIF with Photoshop

 

References