# Video optimization — Web Performance Optimization

Source: https://www.skillbyai.com/en/web-performance/web-perf-15

> Optimize video delivery through compression, format selection, and lazy loading strategies.

## Video compression and codecs

Use AV1 or VP9 where supported, with H.264 as the universal fallback. Compress with FFmpeg: `ffmpeg -i video.mp4 -c:v libx264 -crf 23 output.mp4`. Target bitrate is about 5Mbps for 1080p and 1.5Mbps for 480p.

## Adaptive streaming and delivery

Use DASH or HLS for adaptive bitrate streaming. Serve multiple quality versions. Replace video with static image on slow connections. Add `preload=none` by default to avoid downloading video metadata.

## Video as background alternative

Consider static image with video enhancement on load. Use small preview image while video loads. Disable autoplay on mobile. Animated GIF alternative uses 5-10x more data than optimized video.

Quick check

**Quiz:** Which preload value avoids downloading video data until the user plays?

- [ ] Always preload=auto
- [ ] preload="metadata", which still fetches some data
- [ ] preload=auto on every video
- [x] preload="none"

*Answer:* preload="none". preload=none avoids downloading video data until the user chooses to play.