Skip to content

Instantly share code, notes, and snippets.

Star You must be signed in to star a gist
Save paulirish/b6cf161009af0708315c to your computer and use it in GitHub Desktop.
Screencapture and animated gifs

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

screen shot 2014-10-22 at 11 16 23 am

  1. hit the button

image

  1. you can chose to record entire screen or a portion by dragging:
  2. do that then record and hit the stop button in the top taskbar.
  • You can then Trim the video in quicktime with cmd-t.
  1. File > "Save…". Save that shit.

Capturing (Pro)

  1. Use Screenflow. It can do 60fps and do all sorts of annotations beyond the basic clicks that Quicktime will capture.

Making an animated gif (easy)

  1. Go to gfycat and drag your mov file onto it. image
  2. get the embed code and use the iframe
![2014-10-22 11_35_09](https://cloud.githubusercontent.com/assets/39191/4741874/9890757a-5a1a-11e4-9a71-3f64bd66b7ab.gif)

Really, use the iframe. It'll give you better perf and will load way faster for your users.

If you really want a GIF file (terrible), then click the "GIF" icon. It's sweet to let them do the work for us.


However if you want to make the gif on your own.. continue.

Making an animated gif (cheater)

Use an app called GIFBrewery but it costs money and is a little weird to configure. But it works. Run it through imageoptim after.

Making an animated gif (pro)

(This path is for people comfortable with homebrew and dotfiles.)

  1. Grab gifify from @SlexAxton's gist: https://gist.github.com/SlexAxton/4989674 and toss it into your dotfiles somewhre
  2. Make sure you have the dependencies: brew install ffmpeg gifsicle imagemagick
  3. Run it with gifify yourvideo.mov --good
  4. Run the image through imageoptim after.
@alechp
Copy link

alechp commented Jun 15, 2018

https://getkap.co/ is pretty phenomenal

(repo: https://github.com/wulkano/kap)

@ArkaJU
Copy link

ArkaJU commented Aug 17, 2018

LICEcap is pretty cool. 💯

@miguelmota
Copy link

+1 for http://recordit.co ; it's quick, simple, free

@cdmo
Copy link

cdmo commented Jan 6, 2020

Super (lazy) pro: one-line idempotent (get docker first of course)

docker run -it --rm -v $(pwd):/data maxogden/gifify source.mov -o output.gif

https://github.com/maxogden/gifify-docker#installation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment