How to Optimize Video for Web Embedding

Optimizing Video for Web

Video is typically the heaviest content on any web page. Optimization reduces buffering, saves bandwidth, and improves Core Web Vitals scores without visibly degrading quality.

Encoding Settings for Web

Use H.264 for maximum compatibility or H.265/AV1 for smaller files on supported browsers. Target bitrate depends on resolution: 720p at 2-4 Mbps, 1080p at 4-8 Mbps, 4K at 15-25 Mbps. Use two-pass encoding for the best quality-to-size ratio. Set the GOP (Group of Pictures) size to 2× the frame rate for a good balance of seek precision and compression.

Adaptive Bitrate Streaming

Instead of serving a single video file, create multiple quality levels and let the player adapt based on the viewer's bandwidth. HLS (HTTP Live Streaming) is the dominant format, supported by all major browsers. Create renditions at 360p, 480p, 720p, and 1080p. The player starts with a low quality, then upgrades as bandwidth measurements stabilize.

Preloading Strategy

preload="none" saves bandwidth when the video may not be played (below the fold, in a carousel). preload="metadata" loads enough to show the duration, dimensions, and first frame. preload="auto" (the default) aggressively buffers — use this only for hero videos that will definitely be played.

Poster Images

Always provide a poster attribute with an optimized image — this shows before the video loads and while it buffers. Use WebP format at the video's display dimensions. Include the play button overlay in the poster to signal that the element is interactive. Without a poster, users see a black rectangle until enough video data loads.

Mobile Considerations

Mobile browsers restrict autoplay to muted videos. Cellular connections have highly variable bandwidth — adaptive streaming is essential. Many mobile users have data caps, so provide video duration and estimated data usage before playback starts. Consider providing an audio-only option for content where the visual component is secondary.