Awareness

I am experiencing symptoms of a problem and want a greater understanding

Guide

GIFs are Quick Examples of Showing Features, Here are a few Quick Ways to Make Them

GIFs are a great way to quickly show visitors a product or method, quick example from the fabulous WordPress Migrate DB Pro here, and there are number of ways to make these. First a few pros and cons of GIFs since they are used less than on page videos such as MP4s for projects like Asana or Insightly. (Though Basecamp has a very subtle and clever use of a GIF, watch the numbers.)

A few pros of GIFs:

  • Easy sharing, from Social Media to Slack, GIFs show right within feeds, and on mobile, without additional clicks and replay without reclicking
  • Lighter bandwidth footprint, GIFs are normally smaller and load sooner on a page
  • Less work to make since they are more universally supported, so messing around with codecs or other video specifications

And the cons of GIFs:

  • Less trackable/interactive than a YouTube, Vimeo, or self hosted video
  • Properly compressed videos can get better bang for the Kilobyte, a 2MB video can be higher resolution and better looking than a 2MB GIF
  • Compression in GIFs gets uglier than with videos or JPGs, indexed images don't play nice with photos

Now, here are the 3 quick methods. The best method will be flexible to allow for wide use, if possible not be heavily compressed to allow for later editing, but optimized to quickly have good results. (To keep page bandwidth down, the images and videos are links.)

1. On Macs, Quicktime can record videos that can then be opened and optimized in Photoshop. The key to this method is the optimizing, removing as many possible frames and then saving. A good option but not the best.

Example resulting GIF and MP4 Video starting point

  • Most flexible method, Quicktime can capture a full screen and save out to many formats
  • Photoshop has a lot of editing potential and, again, can save out not only to a GIF but to JPGs as well even sometime later
  • Slowest and least optimized method, you need to know how to use Photoshop to get the best possible results

 

2. GIPHY is a popular GIF sharer and has their own capture software. It has some upsides but has too many constraints to get the best results.

Example GIF from GIPHY

  • Quickly creates GIFs that can be directly uploaded to their search engine with a sharable link
  • Very compressed and doesn't take full size GIFs, they are automatically cut down to avoid size issues
  • Both the hosting and sharable link are very useful as well as the automatic constraints

3. Gyazo is purpose built for exactly this purpose and is the best option. It does need a download but is available on Mac and PC.

Example GIF and Video from Gyazo

  • Just like other options, click and drag an exact video, saves to both GIF and MP4
  • Like Giphy it creates a sharable link and though the exports are compressed the video can be cropped and resaved in different formats without losing too much quality
  • There is a paid upgrade, freemium model month-to-month, which is mildly annoying but looks to provide a lot of value and isn't forces in too quickly

Try each one out to see which one best for you and leave your thoughts below!