Exporting video for the web without losing quality

A beautiful edit loses its impact if it takes six seconds to start. When I rebuilt this portfolio I re-exported every video, and the whole library went from over a gigabyte to a fraction of that with no visible difference. These are the settings I use.

The settings

• Codec: H.264 (MP4). It plays everywhere, including older phones.
• Size: 1280×720 for website embeds; 1080p only when the video is the page.
• Frame rate: keep the source rate, capped at 30 fps for the web.
• Quality: constant quality (CRF 23–27) instead of a fixed bitrate, so simple shots stay tiny and complex ones get the data they need.
• Audio: AAC at 96–128 kbps is plenty for voice and music on laptop speakers.
• Fast start: move the index to the start of the file ("faststart"), so playback begins before the download finishes.

Three mistakes that make video stutter

Uploading the master file. A 2 GB ProRes export belongs in the client handoff, not on the website. Autoplaying everything at once. Only load a video when it scrolls into view. No poster image. Without one, visitors stare at a black box while the first frame loads.

Hover previews

For the Work grid on this site I cut a silent five-second loop from each project and shrink it to 640 pixels wide. Each one is a few hundred kilobytes, and it loads only when you point at the card.

Keep the masters. Compress copies. You can always make a smaller file from a big one, never the other way round.

I keep the full-quality originals outside the website folder, so re-exporting for a new platform is always one step away.