WebM and MP4 are two ubiquitous file formats for video delivery on the web. This article dives deep into each of these formats so that you can better understand which format to use to optimise compatibility, quality, and accessibility for your audience and ensure seamless playback across various devices and platforms.

Before learning about WebM & MP4, let’s review a few terms that will help us better understand these file formats.

Stream
A stream in the context of multi-media files refers to a continuous flow of digital audio, video, or other multi-media data. A file can have multiple streams.

Container Format
A container format is a file format that can contain various types of data streams, such as video, audio, subtitles, and metadata. It acts as a wrapper or container that holds these different types of data together in a single file.

They typically consist of a header structure containing metadata and information about the contained streams, followed by one or more data streams containing the actual multi-media content.

Both MP4 and WebM are container formats that can contain various kinds of multi-media streams.

Codec
The term “codec” is a combination of “encoder” and “decoder.” A codec is a technology used to encode and decode digital data streams, such as audio, video, or even text.

Each codec uses its compression algorithms and techniques to achieve different levels of compression, quality, and compatibility.

Some standard codecs are H.264/AVC, VP9 for video & AAC, MP3 for audio streams.

Let’s learn a bit about each format now:

MP4, officially known as MPEG-4 Part 14, is one of the most prevalent multi-media container formats globally.

Its origins trace back to the Moving Picture Experts Group (MPEG), which developed it as part of the MPEG-4 standard. First standardised in 2001, MP4 emerged as a successor to the earlier MPEG-2 and MPEG-1 container formats, offering enhanced versatility and efficiency.

MP4 accommodates an extensive range of codecs, making it suitable for various multi-media applications, from streaming services and digital broadcasting to personal media storage and distribution.

WebM

WebM has rapidly gained prominence as a versatile solution for storing and distributing video content on the web.

Officially introduced in 2010, WebM represents a collaborative effort within the web standards community, incorporating elements from existing formats while introducing novel features tailored to web-based environments. Its development originated from Google’s initiative to create an open, royalty-free alternative to proprietary formats, aligning with the company’s vision of fostering innovation and accessibility across the digital landscape.

As an open standard, WebM has no licensing fees or restrictive usage agreements. At its core, WebM utilises advanced video codecs such as VP9 and AV1, which have superior compression efficiency compared to traditional codecs. This efficiency enables WebM files to achieve remarkable reductions in file size without compromising visual quality, a crucial advantage for streaming applications and bandwidth-constrained networks.

Comparing WebM and MP4

Compatibility

WebM is now widely supported across all popular browsers except Internet Explorer. While Safari has added support for playing WebM files, iOS still lacks native support for WebM compared to Android.

MP4 has been well-supported across all platforms since its early days.

Supported Video and Audio Codecs

MP4 supports many more codecs, including the ones supported by WebM.

It's recommended that codecs like VP9 or Opus be used with the WebM container format for better compatibility across all platforms.

Licensing

While the MP4 container format supports a wide variety of codecs, the most popular video codecs, such as H. 264 and H.265, require a hefty license fee to distribute content if you’re a large commercial user.

Compared to this, the video codecs for WebM (VP8, VP9, or AV1) are all royalty-free.

Compression

ffmpeg is a cross-platform command line tool to process media files. You can download it from here.

Let’s use it to do a rough test and check how much space can be saved by compressing an MP4 video to a WebM video.

The gain from compression is relatively minor in smaller files, so a large MP4 file should be used to run this test.

Let’s inspect the file you have using ffprobe (a command-line tool that comes with ffmpeg and helps to inspect media files).

Run this in your command line:

ffprobe -i video.mp4 -loglevel info -hide_banner

Replace video.mp4 by the path of the file you want to check.

You should see something similar to this:

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'video.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf60.3.100
  Duration: 00:03:44.04, start: 0.000000, bitrate: 20099 kb/s
  Stream #0:0[0x1](und): Video: h264 (High 4:4:4 Predictive) (avc1 / 0x31637661), yuv444p(progressive), 640x480 [SAR 1:1 DAR 4:3], 20023 kb/s, 25 fps, 25 tbr, 12800 tbn (default)
    Metadata:
      handler_name    : VideoHandler
      vendor_id       : [0][0][0][0]
      encoder         : Lavc60.3.100 libx264
  Stream #0:1[0x2](und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, mono, fltp, 69 kb/s (default)
    Metadata:
      handler_name    : SoundHandler
      vendor_id       : [0][0][0][0]

The file I used had 1 video stream using the H264 codec & 1 audio stream using the AAC codec.

This output will vary for each file. You may see multiple audio streams (for different sound-tracks) & text streams (for subtitles).

There’s also some information about the duration & bitrate of the file in the command output.

Now, let’s convert the video to the WebM container format with the VP9 video codec & Opus audio codec:

ffmpeg -i video.mp4 -c:v libvpx-vp9 -c:a libopus -crf 40 -b:v 0 output.webm

• -i video.mp4: Specifies the path of the input file video.mp4. You can change this to the path for the MP4 file you want to convert. You can also use URLs to videos as input stream to ffmpeg.
• -c:v libvpx-vp9: Sets the video codec to VP9 for video encoding. -c:v is used to specify the video codec, and libvpx-vp9 is the codec name for VP9, which is a high-efficiency video coding format used in WebM files.
• -c:a libopus: Sets the audio codec to Opus for audio encoding. -c:a is used to specify the audio codec, and libopus is the codec name for Opus, which is a high-quality audio codec commonly used in WebM files.
• -crf 40: This option sets the Constant Rate Factor (CRF) for video encoding. CRF is a method used in video compression to control the output file's quality and size. A higher CRF value results in lower quality but smaller file sizes, while a lower CRF value produces higher quality but larger file sizes.
• -b:v 0: The -b:v option specifies the video bitrate, which determines the amount of data allocated for encoding the video stream. Setting it to 0 allows ffmpeg to use a variable bitrate mode which can help optimise the compression efficiency and maintain a consistent level of quality throughout the video.
• output.webm: Path of the output file.

The size of the output.webm file is 368MB. That’s a whopping 34% reduction from the original file size of 560MB, with only a slight loss in quality.

The effectiveness of compression will vary depending on the content of the video, the codecs used, and a variety of other factors.

There are many options you can configure for your use case to balance quality and size. See https://trac.ffmpeg.org/wiki/Encode/VP9 to know more about what configuration you can use.

Elevate Your Video Delivery Experience with ImageKit

Why choose ImageKit over handling video delivery in-house? Let’s explore the challenges you might encounter and how ImageKit can alleviate them:

1. Optimisation Issues: Video optimisation is crucial for fast loading times and optimal viewing experiences. However, it requires intricate knowledge of encoding formats, bitrates, resolutions, and more. Our advanced optimisation algorithms automatically handle these complexities, ensuring your videos are delivered in the best quality possible while minimising bandwidth usage.
2. Scaling Challenges: Managing video delivery infrastructure at scale requires significant resources and expertise. With ImageKit, you can scale effortlessly without worrying about infrastructure maintenance or performance bottlenecks. Our global content delivery network (CDN) ensures lightning-fast video delivery to users worldwide, regardless of traffic spikes.
3. Device and Browser Compatibility: Different devices support different video and audio codecs, leading to compatibility issues. ImageKit automatically transcodes your videos into the appropriate formats and resolutions based on the viewer’s device and browser, guaranteeing a flawless playback experience for everyone.

Check out Automatic Video Format Conversion | ImageKit.io Docs to know more.

Final Thoughts: Which format to use?

Compatibility: While WebM has gained support in all modern browsers, it is not as universally supported as MP4 on many hardware devices and old browsers.

Licensing Fees: Popularly used MP4 codecs like H.264 and H.265 charge royalty for distributing content. In comparison, all popular WebM codecs are free to use.

File size: WebM leverages advanced codecs that excel in compression efficiency, resulting in smaller file sizes without sacrificing quality. This gain is noticeable for large file sizes & leads to significant savings on cloud storage and bandwidth usage.