They say a picture is worth a thousand words, does that mean that a how many words a GIF is worth is a function of number of its frames?
m Number of words = n Frames in a GIF × 1000
Cringeworthy nerd jokes aside, I have found using GIF’s can sometimes be an effective supplement to documentation.
Should you use a GIF
After seeing a few Github repositories and Sublime Text effectively use GIF’s to create demos I have been inspired to do the same to some of my projects. GIF’s are able to demonstrate something quickly, without requiring the user to read possibly confusing documentation or commit to watching a video. It can be a nice middle point between a screenshot and video.
Although GIF’s can be large, by limiting the time and screen size captured you can vastly reduce filesize. So it is always ideal to pick what you want to show.
When to use a GIF
Some scenarios that might warrant using a GIF:
- Quick demo to catch your users eyes
- Demo different features
- Explain something that is slightly complicated
- Keep content entertaining
- When the resulting GIF size is reasonable
Note: It might not be worth using a demo if the GIF is over 1MB even after optimization, due to limitations in bandwidth in some parts of the world.
Examples
Here are some examples from some of my projects:
Example 1: CMD Resume
At time of writing, filesize: 147kb.
Example 2: Seamcore
At time of writing, filesize: 1.56mb.
Example 3: Multiline String Converter
At time of writing, filesize: 153kb.
Example 4: WLCMD
At time of writing, filesize: 102kb.
Other Examples
Here are some other good examples:
My script
After recording a screen region with Quicktime, I use the below script to create a palette of the image and use that palette to create the GIF. This allows the GIF to have a decent size and still hold much of its colour information. You are also able to provide start and end time in seconds which allows you to minimise filesize cropping any parts of the start and end.