Reducing video file size with FFmpeg for web optimization

Optimizing video content for fast loading times is crucial for modern web applications. Large video files can significantly impact website performance, affecting user experience and search engine rankings. FFmpeg, a powerful open-source multimedia framework, offers robust tools to compress videos while maintaining quality, leading to faster load times and improved user engagement.

Understanding video codecs and formats

For web video in 2024, select codecs based on compatibility and compression efficiency:

• H.264: Offers universal compatibility and is ideal for general use.
• H.265: Delivers approximately 30% better compression than H.264 and is supported on most modern devices.
• VP9: Provides a free alternative to H.265 with wide browser support.
• AV1: Provides the best compression with growing support, making it a future-proof choice.

A codec encodes and decodes digital video data. Container formats (such as MP4, MKV, or WebM) package video, audio, and metadata together. For web delivery, MP4 with H.264 is the most compatible option, while WebM with VP9 or AV1 can offer superior compression for supported browsers.

Installing FFmpeg on your system

As of 2024, FFmpeg 7.1 is the latest stable release. The examples in this guide work with FFmpeg 6.0 and newer.

Linux (Ubuntu/Debian)

sudo apt update && sudo apt install ffmpeg

macOS

brew install ffmpeg

Windows

1. Download the latest build from gyan.dev.
2. Extract the archive.
3. Add the bin folder to your system's PATH.

Basic video compression with FFmpeg

Reducing video file size

The following command provides a good balance between quality and compression for web video using H.264:

ffmpeg -i input.mp4 -c:v libx264 -crf 23 -preset medium -movflags +faststart -c:a aac -b:a 128k output.mp4

Recommended CRF values by codec:

• H.264: 18-23 for high quality, 23-28 for general use
• H.265: 24-30 (roughly equivalent to H.264 at CRF 18-24)
• VP9: 15-35 (using a different scale)
• AV1: 25-35 for general use

Modern codec options

For browsers supporting newer codecs, you can use AV1 for improved compression:

ffmpeg -i input.mp4 -c:v libaom-av1 -crf 30 -b:v 0 -strict experimental -cpu-used 8 -row-mt 1 -c:a libopus -b:a 128k output.mkv

Advanced compression techniques with FFmpeg

Two-pass encoding

For precise bitrate control, use two-pass encoding:

# First pass
ffmpeg -y -i input.mp4 -c:v libx264 -b:v 1000k -pass 1 -an -f null /dev/null

# Second pass
ffmpeg -i input.mp4 -c:v libx264 -b:v 1000k -pass 2 -c:a aac -b:a 128k output.mp4

Quality-based encoding

To maintain consistent visual quality, consider quality-based encoding:

# H.265 (HEVC)
ffmpeg -i input.mp4 -c:v libx265 -crf 28 -preset medium -tag:v hvc1 -c:a aac -b:a 128k output.mp4

# Vp9
ffmpeg -i input.mp4 -c:v libvpx-vp9 -b:v 0 -crf 30 -row-mt 1 -c:a libopus -b:a 128k output.webm

Browser compatibility

Comparing quality and file size

Use FFmpeg's built-in tools to evaluate your output:

# Preview video
ffplay output.mp4

# Compare file sizes
ls -lh input.mp4 output.mp4

# Get detailed video information
ffprobe -v quiet -print_format json -show_format -show_streams output.mp4

Automating batch video compression

Bash script

#!/bin/bash

input_dir="/path/to/videos"
output_dir="/path/to/output"

mkdir -p "$output_dir"

for file in "$input_dir"/*.mp4; do
  filename=$(basename "$file")
  ffmpeg -i "$file" \
    -c:v libx264 \
    -crf 23 \
    -preset medium \
    -movflags +faststart \
    -c:a aac \
    -b:a 128k \
    "$output_dir/${filename%.*}_compressed.mp4"
done

Powershell script

$inputDir = "C:\path\to\videos"
$outputDir = "C:\path\to\output"

New-Item -ItemType Directory -Force -Path $outputDir

Get-ChildItem -Path $inputDir -Filter *.mp4 | ForEach-Object {
    $outputFile = Join-Path $outputDir ($_.BaseName + "_compressed.mp4")
    ffmpeg -i $_.FullName `
        -c:v libx264 `
        -crf 23 `
        -preset medium `
        -movflags +faststart `
        -c:a aac `
        -b:a 128k `
        $outputFile
}

Best practices

• Choose codecs based on your target audience and browser support requirements.
• Test different CRF values to determine the optimal balance between quality and file size.
• Use two-pass encoding for more predictable file sizes.
• Enable fast start to improve web playback performance.
• Consider generating multiple formats to ensure compatibility across devices.

In summary, FFmpeg offers a versatile and powerful solution for video compression for the web. By carefully selecting codecs and fine-tuning your encoding parameters, you can optimize video performance without compromising quality.

For automated video processing at scale, consider using Transloadit's video encoding service, which provides optimized encoding pipelines and automatic format selection based on browser capabilities.