Converting .gif to web-safe video formats using ffmpeg

By Sidney Liebrand on Feb, 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 here.

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ā€¢%76.78caniusespec

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 Feb, 25 2021
IE
Edge
Firefox
Chrome
Safari
Opera
Firefox for Android
Chrome for Android
iOS Safari
Opera Mobile
Opera Mini
Android Browser
Samsung Internet
UC Browser for Android
5.5-8
3
9-10
12-13
12
14-18
79-87
2-3.6
1
4-27
28-84
4-5
1
6-24
25-87
3.1-5.1
3
6-12
4
12.1-13.1
9-10.5
1
10.6-15
16-72
3.2-12.1
4
12.2-13.7
10-12.1
2.1-2.2
1
2.3-4.4.4
1
4
5.0-12.0
3
11
88
85
88
456
14
73
85
88
45
14.0-14.4
1
59
all
81
13.0
12.12
86-87
89-91
456
TP

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 here. 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ā€¢%95.7caniusespec

Commonly used video compression format.

updated Feb, 25 2021
IE
Edge
Firefox
Chrome
Safari
Opera
Firefox for Android
Chrome for Android
iOS Safari
Opera Mobile
Opera Mini
Android Browser
Samsung Internet
UC Browser for Android
5.5-8
9-10
12-87
2-20
21-34
35-84
4-87
3.1
3.2-13.1
9-24
25-72
3.2-13.7
10
11-12.1
2.1-2.2
1
2.3
3-4.3
4.4-4.4.4
4-12.0
11
88
85
88
14
73
2
85
88
14.0-14.4
59
all
81
13.0
12.12
86-87
89-91
TP
  • 1 The Android 2.3 browser requires specific handling to play videos.
  • 2 Partial supports refers to the lack of hardware acceleration.

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