How to Convert MP4 to WebM for Web — Step-by-Step Guide
Converting your MP4 videos to WebM can reduce file size by 20–40% while maintaining the same visual quality. For modern websites where Chrome and Firefox are the primary browsers, WebM is the optimal choice.
Why convert to WebM
- Smaller files: VP9 compresses ~30% better than H.264 at the same quality level
- No royalties: WebM is completely patent-free
- Native in Chrome and Firefox: loads without plugins
- Accepted by YouTube and platforms: they support it natively
Install FFmpeg
Windows
- Download from ffmpeg.org/download.html → Windows builds
- Extract the ZIP and copy
ffmpeg.exetoC:\Windows\System32\(or add the folder to PATH) - Verify:
ffmpeg -versionin CMD
macOS
brew install ffmpeg
Linux (Ubuntu/Debian)
sudo apt install ffmpeg
Basic MP4 → WebM conversion
# WebM with VP9 (best quality-to-size ratio)
ffmpeg -i video.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus -b:a 128k video.webm
Parameters explained:
-c:v libvpx-vp9: use the VP9 encoder-crf 30: constant quality mode (0=best, 63=worst; recommended 28–35 for web)-b:v 0: constant quality mode (CRF without bitrate cap)-c:a libopus: use Opus audio codec (better than Vorbis)-b:a 128k: audio bitrate 128 kbps
Variants for different use cases
# Background web video (no audio, autoplay)
ffmpeg -i video.mp4 -c:v libvpx-vp9 -crf 33 -b:v 0 -an video_silent.webm
# Higher quality (lower CRF = better quality, larger size)
ffmpeg -i video.mp4 -c:v libvpx-vp9 -crf 22 -b:v 0 -c:a libopus -b:a 192k video_hq.webm
# Resize to 1280×720 while converting
ffmpeg -i video.mp4 -vf scale=1280:720 -c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus video_720p.webm
# Cap maximum bitrate (useful for streaming)
ffmpeg -i video.mp4 -c:v libvpx-vp9 -crf 30 -b:v 1M -maxrate 2M -bufsize 2M -c:a libopus video.webm
Generate MP4 and WebM simultaneously
If you need to serve both formats (for Safari compatibility), generate both in one command:
ffmpeg -i original.mp4 \
-c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus -b:a 128k video.webm \
-c:v libx264 -crf 23 -preset slow -c:a aac -b:a 128k video.mp4
Encoding speed vs quality
VP9 can be slow. To speed up at the cost of some compression:
# Faster (realtime deadline for previews)
ffmpeg -i video.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 \
-deadline realtime -cpu-used 4 \
-c:a libopus video_fast.webm
# Balanced quality-speed
ffmpeg -i video.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 \
-deadline good -cpu-used 2 \
-c:a libopus video.webm
-cpu-used ranges from 0 (slowest, best compression) to 8 (fastest, worst compression).
Implementing in HTML with Safari fallback
<video controls preload="metadata" width="1280" height="720">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video.
<a href="video.mp4">Download the video</a>.</p>
</video>
<!-- For autoplay background video (no controls) -->
<video autoplay muted loop playsinline>
<source src="background.webm" type="video/webm">
<source src="background.mp4" type="video/mp4">
</video>
Batch convert multiple videos
# Bash — convert all MP4s in the folder to WebM
for f in *.mp4; do
ffmpeg -i "$f" \
-c:v libvpx-vp9 -crf 30 -b:v 0 \
-c:a libopus -b:a 128k \
"${f%.mp4}.webm"
echo "Converted: $f"
done
File size comparison (real-world example)
A 100 MB MP4 H.264 file (1080p, 2 minutes):
| Format | Settings | Size |
|---|---|---|
| MP4 H.264 | CRF 23 | 100 MB (reference) |
| WebM VP9 | CRF 30 | ~70–80 MB |
| WebM VP9 | CRF 35 | ~50–60 MB |
| WebM AV1 | CRF 30 | ~50–60 MB |
Actual savings depend heavily on content type — screen recordings compress much more than camera footage with lots of motion.
Related conversions
Common video conversions that pair well with this guide: