Converting animgif to WebM/H.264 video

The ImageOptim API provides high-quality conversion of animated GIFs to efficient WebM or H.264 files:

The conversion reduces file sizes dramatically (5-10×), and often improves quality as well!

(these are screenshots, click to open the clips)
ugly dithering nice, smooth video, with edges preserved
Fat, 8-bit-color GIF sourceWebM from the API — nicer and 8 times faster!

Requesting conversion

  1. Make an API POST request, or upload the GIF file with the format=webm (or format=h264) option. Example API URL: More how to make the request.

  2. Save video file obtained from the API on your server (e.g. in the same directory where GIF files are stored). The file should have .webm filename extension (or .mp4 for H.264).

  3. Change your page's markup to use both GIF and video (example below).


Animated GIF files can be quite large, so the conversion may take 30 seconds or even longer. In case you get HTTP timeout errors, please configure your HTTP client to allow longer timeouts.


The WebM format is supported by Chrome, Firefox, Microsoft Edge, Opera, and Chrome for Android. The H.264 format is required for Internet Explorer and Safari.

By the way, ImageOptim API supports also GIF optimizations. You can optimize the fallback animation, too (to do that, omit format=webm).

Serving both GIF and video

It's possibe to automatically use video in browsers which support it, and gracefully fall back to GIF if they not. We recommend the following approach:

This script needs to be placed only once on the page:

<script> function gifFallback(source) {
    var video=source.parentNode;
    video.outerHTML='<img src="'+video.querySelector('a').href+'">';
} </script>

And then, later on the page, GIFs can be embedded like this (change highlighted filenames to point to your files):

<video autoplay loop muted playsinline>
    <source src='clip.webm'
        type='video/webm; codecs="vp9"' onerror="gifFallback(this)">
    <a href='clip.gif'>Play</a>

Technical details about this code: in the fallback GIF is the markup as a link, not an <img>, because browsers load all images unconditionally, even when the video works, which is a huge waste of bandwidth. The extra bit of JavaScript ensures reliable and efficient fallback.