Modern web development introduces new performance standards every year.

Frameworks compete in optimizing network requests, images, and code to make websites load blazingly fast. Almost every framework, headless CMS, or CDN offers built-in tools for image optimization. However, video optimization is more complex…

But don’t worry! Modern video codecs allow you to achieve excellent quality with a small file size. Using video for animation with proper optimization is always better than GIF, and sometimes even surpasses native implementations. In this section, we’ll look at codecs like VP9 and H265 and learn how to optimize video using ffmpeg.

This topic may seem complicated, so let’s break it down. Imagine a video format as a container that defines the file structure for storing video and audio streams. The video and audio streams inside are multimedia data encoded using a codec.

Simply put: a format is a box, and a codec determines how the contents are packed into that box.

Format examples: mp4, WebM, MKV.

Codec examples: H264, H265, VP8/9.

Example: The video on Apple’s MacBook Air website uses the MP4 format, encoded with H264. H264 is widely used but less optimized than VP9 or H265.

WebM and VP9: Open Standard for the Web

WebM is an open and free media container created specifically for the web. It can contain video streams compressed using VP8 or VP9, and audio streams compressed using Vorbis or Opus

WebM files are typically 20-50% smaller than H264 files, with comparable quality. It is supported by all modern browsers on desktop and mobile devices, except Safari on iOS (Apple, when will it be?). Safari on desktop (macOS Big Sur and later) supports WebM, it’s still not available on iOS mobile devices

No problem, there is a solid alternative for iOS users.

MP4 and H265: Alternative for iOS

H265 (aka HEVC — High-Efficiency Video Coding) is Apple’s favorite, which is 20-50% more efficient than its predecessor H264. But there is a caveat: this codec is not free, so it is not as widespread as WebM.

There are two popular tools for video optimization: Handbrake and ffmpeg

Handbrake is easy to use, with a graphical interface.

ffmpeg is a command-line tool that that offers greater flexibility. It comes in handy if you need to render video with an alpha channel (transparency) or use hardware acceleration (to make compression much faster). Additionally, ffmpeg commands are easier to share with the team than explaining where to click in Handbrake.

Installing ffmpeg

If you are a macOS user, install it using brew

For all other users, you can follow the instructions on the official website.

ffmpeg Basics

ffmpeg is a command-line tool, and it has a lot of options that are helpful to get acquainted with. As a beginner, you can start the following command:

The result will be a WebM encoded using VP9, with pretty decent compression by default. If you want to master this tool, you will need to learn how to use flags.

To illustrate how different ffmpeg options can affect file size and video quality, we conducted tests using one of the animations from our recent project.

The original video size is ~26 MB with a resolution of 5000×2700 pixels. But even after basic compression, the size is reduced to 1 MB. Not bad, but we can do even better.

Advanced Setup

In addition to the previous arguments, the VP9 and H265 codecs in ffmpeg support the -crf flag. This flag enables constant quality mode, which allows you to set a specific quality level throughout the video. The flag value is a number from 0 to 63 (for VP9) and from 0 to 51 (for H265), where 0 is the highest quality and the maximum number is the lowest.

Values from 18 to 40 can provide a very decent level of quality. If you do not specify this parameter, ffmpeg uses the value -crf 32 for VP9 by default.

This results in a size of 314 KB.

Want to learn more about video optimization with ffmpeg?

Experiment! Add and change ffmpeg flags and parameters depending on your tasks, using the instructions we provided above.