These are the ways in which I make GIFs. Sometimes for blog posts. Sometimes for tweets. Sometimes for documentation. Sometimes for fun. GIFs can be tremendously useful and communicate better than a still image or even video in some circumstances.
I use a Mac so these are mostly Mac things.
Available on the app store, GIPHY CAPTURE has an extremely easy interface. Put it over where you want to record, hit record, hit stop.
Everytime you open the app is like a session. GIFs you record will go into the bottom bar. After recording one, you click on the icon of it to open this screen:
You can upload it to GIPHY, which is useful if you need online storage for it, but you can also save it locally. You can also edit it before you upload or save it, and can:
- Trim the start/end
- Choose how it loops
- Size it to a width of 640px, 480px, or 320px (the only options)
- Add a caption
Apparently this app is an evolution of GifGrabber, and the people that adored that hate this, but that’s the internet for you.
This is my most-used GIF making app these days, but the limited options, like not being able to do much to control file size, do sometimes push me to other apps.
LICEcap has just a minimal user interface. It’s a transparent window you position over what you’d like to record, push Record, push Stop. You can drag the window for sizing, or set exact values.
I like how you can make them any size you want. If you need smaller or bigger, you can usually zoom the browser in or out before recording to accommodate that. The best part though is that you can set the FPS (Frames Per Second), which has an enormous impact on the file size. If you’re showing something that requires fairly smooth animation you can bump it up. If you’re showing something that instantly changes states, you can bump it down. It’s quite satisfying creating GIFs that do the job with a tiny file size, when you can.
Hot tip: you can drag the window itself even while recording.
Photoshop can be useful on existing GIFs, as you can open them, then Save for Web where you can resize it, and change things like color information, which all affect the file size.
But Photoshop can actually make GIFs as well. I reach for it when I have a GIF I want to make where I control each frame very specifically. For example, I might take a bunch of window screenshots of exactly the same size that are step-by-step how to do something. Then I’ll:
- Put them into a single Photoshop file as layers
- Open the Timeline strip and create a keyframe animation
- Create one keyframe for each layer, in which that is the only layer turned on
- Adjust the timing and settings
- Save for Web
This example produced this:
No matter which way I create the GIF, I always blast it through ImageOptim.
ScreenToGif is also stellar!
Thanks! Agree with you.
Best for Windows
GIF is the most inefficient format for animated pictures. Try to visit a giphy-“contaminated” page with an iPad 2.
Use regular videos instead. Hosting them might be a littly tricky due to browser compatibility, but the traffic overhead is much smaller.
Sometimes GIFs its a quicky way to show some effect to devs. You can see a lot of examples in dribbble.
To be fair, it really depends on the intended use. We use gif capture tools all the time to help illustrate QA issues to other members of the team. They are a fast way of creating short, small, easy accessible and sharable moving images which will behave nicely with most business communication tools. And as Chris has illustrated they can even be easily post-edited in tools like photoshop, you don’t need to use video editing tools.
True GIF may not be a particularly efficient format for animated pictures, but that doesn’t mean we shouldn’t use GIFs, they can be incredibly useful.
As far as photo-based GIFs go, I’ll agree with you.
I read this article just the other week which demonstrates the massive reduction in page weight using webm as an alternative in instances where multiple animated images are used. For animated images with photographic qualities it seems to be a no brainer – the end results being nigh inseparable. However for shorter ‘vector-based’ animations I found GIFs to be sharper and of an acceptable file size. So as Chuck mentioned it comes down to intended use.
There are some caveats for webm though, mainly around support for the format and the ‘shareability’ of webm over GIF (pretty much the same issue). There is also the issue of html5 video autoplay being blocked/disabled by most mobile browsers, which requires some hackery.
For those interested I tried using gifsicle (through grunt plugin grunt-contrib-imagemin) but was seeing such minimal reductions in file sizes that I gave up. I did see pretty big reductions in GIF file size with little-to-no compromise on quality using this GIF optimisation tool (some as much as 75% and puts Photoshop to shame). If you’re looking to reduce the file size of a few GIFs I’d highly recommend it but of course it isn’t ideal for optimising in bulk.
Ah, and if you really need something similar to a slideshow, consider stitching your layers into one single PNG or JPEG file. Put it into a div with overflow:hidden and use some js or CSS3 animation for repositioning. It’s not very hard to implement. The resulting image size is limited on some platforms, so consider using not too many frames or split the whole solution into several sprites.
The stitching approach optimizes compression and reduction overhead. Give it a try: Take five slides and compare the stitched file size against the sum of the five single sizes.
Plus: This technology automatically degrades if there’s no js or CSS3 animations (it always shows the first frame).
If you’re really into sth weird you can add CSS-only navigation using labels, hidden radio buttons and the “~” selector (aka “CSS-only slideshow”).
So much nicer than GIF.
You can’t just import it as a single media asset into wordpress, though.
Google Photos also has a fairly easy animation tool.
Also worth mentioning: ImageMagick
There are lots of different compression filters you can put on images for the best size/quality ratio. Plus it be automated with some bash scripts pretty quickly
I would also suggest GIFBrew which is what I use to create GIFS. Its has a lot of options for tweaking the GIF to the right size/quality.
WebKit and Chrome both switched to allowing autoplaying video on mobile if the
mutedattribute is set, which should make Phil happy in about a year.
Nice article Chris.
Since Wes Bos published a video about his gif workflow I use ScreenFlow to edit and create animated gifs.
Very recently ScreenFlow has ben updated and now it exports animated gifs.
Whenever I can I prefer to use tiny mp4 instead of gif. As always, it depends…
There’s always https://giflr.com if you want a pretty neat web interface for webcam GIF’s or for remixing other GIF’s. It lets you draw or add captions as well.
What happened with GIF software like GIF Movie Gear and GIFmation? All GIF apps now are just movie converters and basic animators like Photoshop. There’s no way to edit the individual properties of each frame like local pallettes and frame disposal that allows you to use the full power of gifs at lower filesize.
If you are, like me, working with Windows, you can use RecordIt, wich is also availbe on mac http://recordit.co/
+1 I love recordit, and fwiw I’m on mac
Ooh Recordit actually looks pretty nice. Thanks for sharing!
+1 for recordit, use it on Mac and pic.
Though I will be trying LICEcap as sometimes it’s handy to move the viewport instead of making a larger gif with redundant areas
I feel obliged to share the OG of GIF-making, Microsoft GIF Creator https://en.wikipedia.org/wiki/Microsoft_GIF_Animator
Great. Super cool, now I have all I need to be more “spooky” with Gif!!
How about infographics … Think you can do something on infographic?
Hey Chris — what’s up with GIFV??? Looks like a very good option introduced by Imgur in 2014, but very little out there about it… has mp4 and webm fallbacks baked in, seems efficient… why the lack of attention?
Imgur introduction: http://blog.imgur.com/2014/10/09/introducing-gifv/
A bit more about it from Reddit: https://np.reddit.com/r/HighQualityGifs/comments/4qxl6o/are_you_ready/d4x5xj1?context=3
I don’t see any links to the actual project or software or repo or anything in that article. Seems like some smart ideas though.