An unoptimised video can weigh several gigabytes and kill a site's performance in seconds. Here's how to choose the right format, configure compression, and load videos intelligently.
Video is the heaviest media on the web. Poor management of formats and compression can make a site unusable on mobile. Here are the essentials for integrating performant videos.
Main formats
- MP4 / H.264: the universal format. Support across all browsers and devices, mature and well-tooled encoding. Ideal for maximum compatibility. Recommended bitrate: 800kbps–2Mbps depending on resolution.
- WebM / VP9: Google's open-source format. 30-40% lighter than H.264 at equivalent quality. Excellent support on
Chrome and Firefox, partial on Safari. Use alongside MP4 via the
<source>tag. - MP4 / H.265 (HEVC): H.264's successor, twice as efficient. Still limited web support (Safari only without licence). Worth monitoring.
- AV1: the next-gen format, open source, even better than VP9. Growing support (Chrome 70+, Firefox 67+, Safari 16.4+). Very slow server-side encoding — reserve for important content.
Bitrate and resolution by use case
- Mobile video (360-480p): 300–500 kbps
- SD web (720p): 800 kbps–1.5 Mbps
- HD web (1080p): 1.5–4 Mbps
- Background video (hero section, muted): 500kbps–1Mbps, 720p sufficient
- Adaptive streaming (HLS/DASH): multiple bitrates, video CDN recommended
HTML best practices
The <video> tag with multiple sources lets the browser choose the best supported format. For background videos:
autoplay muted loop playsinline is the correct combination — without muted, autoplay is blocked by browsers. Native
lazy loading (loading="lazy") is not yet supported on <video>: use preload="none" or a JS solution with
IntersectionObserver.
Compression tools
- FFmpeg: the reference CLI tool, free, supports all formats. Example:
ffmpeg -i input.mp4 -c:v libvpx-vp9 -crf 32 -b:v 0 output.webm - HandBrake: user-friendly graphical interface, perfect for non-developers
- Cloudflare Stream / Mux / Cloudinary: video CDN with automatic transcoding and adaptive streaming. The best option for high-traffic sites.