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.
Codec | Compression | Browser Support | Use Case |
---|---|---|---|
H.264 | Good | Universal | General use |
H.265 | ~30% more efficient | Partial | Modern devices |
VP9 | Efficient | Wide | Free alternative |
AV1 | Best | Growing | Future-proof |
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
- Download the latest build from gyan.dev.
- Extract the archive.
- 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
Codec | Chrome | Firefox | Safari | Edge |
---|---|---|---|---|
H.264 | ✅ | ✅ | ✅ | ✅ |
H.265 | ⚠️ (partial) | ❌ | ✅ | ⚠️ (partial) |
VP9 | ✅ | ✅ | ⚠️ (Safari v16+) | ✅ |
AV1 | ✅ | ✅ | ⚠️ (Safari v17+) | ✅ |
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.