Intervention: stop animated gif, convert them to video

Graphics Interchange Format, invented during the dark ages of the late 80s, still persists in our daily lives. Technologically speaking, gifs are in the same ballpark with Macintosh II, Windows 1, and floppy disc.


Animated gifs are horrible! By that I mean they’re totally great, but the technology behind them is outdated and outright bad, a remnant of the 90s clipart and guestbooks internet. Gif is an extremely inefficient way to pack video. Where as the static gif is pretty awesome format for graphical shapes and images with only few colors.

MRW I hear the size of the below gif: 1.6MB.

A large Gif

It’s 4 seconds long.

There are better things! Behold.

Good things about Gifs

“Old” does not equal bad, we still use hammers for instance. Why are Gifs so popular then? Here’s my guess:

  • They’re portable, just one file
  • Easy to embed, just an img tag
  • Works on any device
  • Easy to make with Gif cams
  • They’re inherently loopy
  • They play automatically

It is save to conclude that the replacement format should have most of these attributes.

Also, Gifs are pretty bueno as loader spinners. So they’re not evil to the bone, just as a video replacement.

What then?

HTML5 video springs to mind automatically. Here’s the video formats commonly in use in the interwebs:

  • WebM (open source)
  • Ogg (open source)
  • mp4 (non open, non royalty free)

Here’s the browser support.


IE Firefox Chrome Safari Opera
Nope Yep Yep Nope Yep


IE Firefox Chrome Safari Opera
Nope Yep Yep Nope Yep


IE +8 Firefox Chrome Safari Opera
Yep Yep Yep Yep Yep

mp4 seems to lead the game. The downside being, it’s not open source and it’s not royalty free. What that means is: you can freely upload mp4 videos to internet without worrying about royalties, but companies implementing mp4 to their products need to pay a royalty fee. If I understand right, for instance, Linux distributions do not support mp4 out the box, because of the royalty fees. Here’s an SO thread if you want to dig more into it.

Imgur, for instance, has their own little gifv thingy, that in reality is just a muted HTML video, that autoplays and loops. The main format behind it is WebM and mp4 as fallback. 4chan also supports WebM, blog article about it here.

The problem: I’d love to go with WebM, but in order to satisfy the portability requirement (one file), might lean more to mp4.

Converting Gifs to videos with ffmpeg

Ideally you’d just make videos, not gifs. But Web is full of gifs, so it makes sense to talk about the conversion process. There’s a great command line tool called ffmpeg that’ll convert pretty much anything to any format.

Install ffmpeg

On Mac, use homebrew:

$ brew install ffmpeg --with-libvpx

Note the --with-libvpx, it needs to be there.

$ ffmpeg -i your-test-gif.gif -c:v libvpx -crf 12 -b:v 500K output.webm

Test that it’s installed:

$ ffmpeg -version

The converting process

$ ffmpeg -i your-test-gif.gif -c:v libvpx -crf 12 -b:v 500K output.webm
  • -crf values can be anything between 4 and 63. Smaller number means better quality.
  • -b:v is the maximum allowed bitrate. Higher means better quality.

Gifs are pretty shitty looking anyway, so we can use just about anything in the quality settings. The following minimal settings still produces okay results.

$ ffmpeg -i your-test-gif.gif -c:v libvpx -crf 4 -b:v 100K output.webm

Give it a try, it should work.

The 1.6MB gif file turned into 47KB WebM:

This is with the higher setting -crf 12 -b:v 500K, not that much difference really:

See more in the exhaustively comprehensive docs.

Alias the convert command

No human can remember that command from memory, let’s humanize it.

Not really an “Alias” per se, but a bash function. If you’re using some sort of a dotfiles thingy, like the Mathias’s dotfiles, you already have a ~/.functions file. If not, go ahead and make it $ touch ~/.functions, pop it open and add the following (adjust the quality settings to your liking):

function gif2vid() {
    ffmpeg -i $1 -c:v libvpx -crf 7 -b:v 100K $2;

Then you need to tell bash about the existence of the .functions file. Pop open .bash_profile (if you don’t have it, try .bashrc) and add the following:

# Load the shell dotfiles, and then some:
# * ~/.path can be used to extend `$PATH`.
# * ~/.extra can be used for other settings you don’t want to commit.
for file in ~/.{path,bash_prompt,exports,aliases,functions,extra}; do
    [ -r "$file" ] && [ -f "$file" ] && source "$file"
unset file

This is straight from the Mathias’s dotfiles. It sources the bash with the following files: .{path,bash_prompt,exports,aliases,functions,extra}, you might not need them all, just drop off the ones you don’t need.

Then open a new tab to your terminal, or boot it, or reload it $ exec $SHELL -l.

Now you should have access to the gif2vid command. It takes two arguments: source file, and target file.

$ cd my_gifs
$ gif2vid brent-rambo.gif brent-rambo.webm


If you get error messages like Unknown encoder 'libvpx' or ffmpeg unable to find encoder libvpx. It might be that you didn’t install the ffmpeg with the --with-libvpx flag. It can be reainstalled:

$ brew reinstall ffmpeg --with-libvpx

Displaying videos

HTML5 video syntax is a follows:

<video autoplay="1" height="250" loop="1" muted width="250">
    <source type="video/webm" src="">
    <p>Your browser is not supporting this video format :(</p>

The important bits for our gif-like videos are:

  • muted — sound of, we want to imitate gif, and since it’s autoplay wouldn’t make sense anyways.
  • autoplay="1" — start playing the video immediately.
  • loop="1" — loop it like a gif.

If you want, you can drop in the mp4 fallback:

<video autoplay="1" height="250" loop="1" muted width="250">
    <source type="video/webm" src="">
    <source type="video/mp4" src="">
    <p>Your browser is not supporting this video format :(</p>

Also, noteworthy video element attributes that I’ve excluded from the above example:

  • preload="metadata" — preloads video dimensions, first frame, duration etc. More here.
  • poster="img.jpg" — cover image to the video so to speak.

Display in WordPress posts

Nothing stops you from pasting <video> elements in WP posts, it’s just HTML. But WordPress also has a [video] shortcode that is pretty great. It performs all sorts of magic behind the scenes, provides custom controls and fallback for old browsers etc. It also only allows one video to play at the time, which makes sense if you want to avoid the schizophrenic cacophony, that results from the playback of multiple audio tracks. But those limitations are blockers for the gif like video experience.

WordPress gifv plugin

I made a little gifv plugin that is basically a [gifv] shortcode. Get it at

Hows it different from the video shortcode:

  • Loop is on by default
  • Autoplay is set true
  • Controls are hidden
  • Audio is muted
  • Can have multiple videos on at the same time
  • No external JavaScript included

How to use:

[ gifv width="250" height="250" webm=""][/gifv]

With an mp4 fallback:

[ gifv width="250" height="250" webm="" mp4=""][/gifv]

(remove the space after [, I couldn’t fugure out how to escape shortcodes inside code blocks)

When inserting videos to WordPress, by default it uses the video shortcode, then just edit to gifv.

Making videos

Gifcams have been around long but lived through a renaissance during the last few years (I think). LICEap is one for OS X.

For screen recording I’ve used MonoSnap very successfully, it’s fast and painless. Originally it’s a screen capture app like Skitch, but it’s been branching out more.

Screenshot 2015-02-04 09.48.46

There are no shortage of screen recorders.


Let’s see how we did on our fight against the gif:

  • ✔ Portable, just one file
  • ✔ Easy to embed, just an HTML tag, or a shortcode
  • ✔ Works on any device, see Can I Use
  • ✔ Easy to make
  • ✔ Can easily be loopy
  • ✔ Autoplay

Only downside is the mp4, WebM would be nicer but Safari and IE lacking support, it’s just not there yet.

Essentially, videos can save you bandwidth, seems oxymoron, but when it comes to gifs it’s very logical.

I’ll leave you off with some gif contemporaries :)

Not Windblows 3.1 but 1.0
Not Windblows 3.1 but 1.0
A beige box that is Mac II
A beige box that is Mac II

In the end, I really have give my respects go gif, a good run! Right out the bat I can only think of MIDI that has had as long trot as gif.

Club-Mate, the beverage →