Converting .gif to web-safe video formats using ffmpeg

By Sidney Liebrand on Feb 14, 2021•3 min read

When recording animated content for my blog posts I use a gif recorder. However, using .webm or .mp4 files is usually more efficient and works in pretty much every major browser today.

Convert .gif to .webm

To convert a .gif file to .webm, use the following command:

ffmpeg -i file.gif -c vp9 -b:v 0 -crf 40 file.webm

This will output a .webm file that works in most browsers, but what are these options doing exactly? Let's dive in:

  • -i: Specifies the input file, in this case file.gif.
  • -c: Specifies the codec, vp9 works in most browsers.
  • -b:v: Specifies the video bitrate, 0 allows us to specify the quality via the -crf option.
  • -crf: Specifies the quality, ranges between 0-63, lower means better quality.

More detailed explanations about the options can be found on the ffmpeg VP9 wiki.

These .webm files will suffer a little bit of quality loss, but if more quality is needed the -crf flag can be set to a lower value easily. With these settings the .webm file is (on average) 60% smaller than the .gif file.

When we check caniuse, .webm support looks good too, mostly. Indeed the only real reason today to use .mp4 on the web is to support Internet Explorer.

WebM video formatother%78.70+%19.02=%97.72

Multimedia format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video. WebM supports the video codec VP8 and VP9.

updated Sept 2, 2022
IE
Edge
Firefox
Chrome
Safari
Opera
Safari on iOS
Opera Mini
Android Browser
Blackberry Browser
Opera Mobile
Chrome for Android
Firefox for Android
IE Mobile
UC Browser for Android
Samsung Internet
QQ Browser
Baidu Browser
KaiOS Browser
5.5-8
3
9-10
12-13
12
14-18
79-104
2-3.6
1
4-27
28-103
4-5
1
6-24
25-104
3.1-5.1
3
6-12
4
12.1-13.1
456
14
7
14.1-15.5
9-10.5
1
10.6-15
16-89
3.2-12.1
4
12.2-13.7
45
14.0-15.5
2.1-2.2
1
2.3-4.4.4
7
10-12.1
10
1
4
5.0-17.0
3
11
105
104
105
7
15.6
90
45
15.6
all
104
10
64
104
101
11
12.12
18.0
10.4
7.12
2.5
105-106
106-108
16.0-TP
45
16.0

    Convert .gif to .mp4

    To convert a .gif file to a web-safe .mp4, use the following command:

    ffmpeg -i file.gif -movflags +faststart -pix_fmt yuv420p \
           -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" file.mp4

    Let's also cover the options for this one:

    • -i: Specifies the input file, in this case file.gif.
    • -movflags: For web video we can specify +faststart to allow the video to start playing before the download is complete.
    • -pix_fmt: The default yuv444p can't be played by some mobile browsers so we set it to yuv420p instead.
    • -vf: This flag is allows us to set "scale=trunc(iw/2)*2:trunc(ih/2)*2" to ensure the video width and height are divisible by 2 which would otherwise cause an error when using yuv420p.

    More detailed explanations about the options can be found on the ffmpeg H.264 wiki. Additionally, this commit provides some additional context about -pix_fmt and -vf.

    The .mp4 file is (on average) 50% smaller than the .gif file. While less efficient than .webm, it is still much better than using .gif. Additionally, this .mp4 file is widely supported in nearly all browsers.

    MPEG-4/H.264 video formatother%97.17+%1.34=%98.51

    Commonly used video compression format.

    updated Sept 2, 2022
    IE
    Edge
    Firefox
    Chrome
    Safari
    Opera
    Safari on iOS
    Opera Mini
    Android Browser
    Blackberry Browser
    Opera Mobile
    Chrome for Android
    Firefox for Android
    IE Mobile
    UC Browser for Android
    Samsung Internet
    QQ Browser
    Baidu Browser
    KaiOS Browser
    5.5-8
    9-10
    12-104
    2-20
    21-34
    35-103
    4-104
    3.1
    3.2-15.5
    9-24
    25-89
    3.2-15.5
    2.1-2.2
    1
    2.3
    3-4.3
    4.4-4.4.4
    7
    10
    11-12.1
    10
    4-17.0
    11
    105
    104
    105
    15.6
    90
    15.6
    all
    104
    10
    64
    104
    2
    101
    11
    12.12
    18.0
    10.4
    7.12
    2.5
    105-106
    106-108
    16.0-TP
    16.0
    • Firefox supports H.264 on Windows 7 and later since version 21. Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed.
    • Partial support for older Firefox versions refers to the lack of support in OS X & some non-Android Linux platforms.
    • 1The Android 2.3 browser requires specific handling to play videos.
    • 2Partial support refers to the lack of hardware acceleration.
    • Chrome has performance problems with long h.264 videos.
    • Browsers have trouble with more than one audio track in a video (for multi-language support): IE 11 supports it, Firefox plays the last track, Chrome plays the first track.
    • In Windows 7, the maximum supported resolution is 1920 × 1088 pixels for both software and DXVA decoding. MSDN.

    Conclusion

    Hopefully this post made it a little bit easier to understand how to convert .gif files to .webm or .mp4 using ffmpeg. It a powerful tool that can help us optimize our usage of animated media on the web. It is definitely worth looking into if you run a website that displays lots of gifs.

    Until next time :)

    👋

    Back