Video Compression for Web: Reducing File Size Without Losing Quality
Large video files slow page loads and consume bandwidth. Effective compression balances visual quality with file size using the right codec settings, resolution, and bitrate.
Key Takeaways
- An uncompressed 1080p video at 30fps generates about 178 MB per second.
- Higher resolution means more pixels to encode.
- Two-pass encoding analyzes the entire video first, then allocates bits optimally.
- Always use VBR over constant bitrate (CBR) for web
分辨率参考
常见屏幕分辨率参考
Why Video Compression Matters
An uncompressed 1080p video at 30fps generates about 178 MB per second. Compression reduces this by 100-1000x while preserving acceptable visual quality. The goal is finding the lowest bitrate where compression artifacts remain invisible to viewers.
Key Parameters
Resolution
Higher resolution means more pixels to encode. Downscaling from 4K to 1080p can halve file size with negligible quality loss on most screens. Match resolution to your delivery context — mobile viewers rarely benefit from resolutions above 720p.
Bitrate
Bitrate controls how many bits per second the encoder allocates. Higher bitrate means better quality but larger files. Use variable bitrate (VBR) to allocate more bits to complex scenes and fewer to static ones.
Recommended web bitrates:
| Resolution | Bitrate (H.264) | Bitrate (VP9/AV1) |
|---|---|---|
| 480p | 1-2 Mbps | 0.7-1.5 Mbps |
| 720p | 2.5-5 Mbps | 1.5-3 Mbps |
| 1080p | 5-8 Mbps | 3-5 Mbps |
| 4K | 15-25 Mbps | 8-15 Mbps |
Constant Rate Factor (CRF)
CRF is the simplest quality control. Lower values mean higher quality (and larger files). For H.264, CRF 23 is the default; 18-20 is visually lossless. For VP9, CRF 31 is a good starting point.
Two-Pass Encoding
Two-pass encoding analyzes the entire video first, then allocates bits optimally. This produces better quality than single-pass at the same file size but takes twice as long to encode.
Practical Tips
- Always use VBR over constant bitrate (CBR) for web
- Set a maximum bitrate cap to prevent bandwidth spikes
- Use keyframe intervals of 2-4 seconds for streaming
- Test on slow connections (3G simulation) before publishing