How to optimise video for your website

What video encoding actually is

When you record or export a video, it is stored as raw data: millions of individual frames, each one a full image. Without compression, a single minute of 1080p footage can exceed 10 GB. Video encoding is the process of compressing that data into a manageable file using a set of mathematical algorithms called codecs.

A codec (short for encoder/decoder) does two things: it compresses the video for storage or transmission, and decompresses it for playback. Most video you encounter online uses one of a small number of codecs – H.264, H.265, VP9, or the newer AV1. Each represents a generation of compression technology, with newer codecs achieving smaller file sizes at the same quality.

Alongside the codec sits the container – a wrapper format like MP4, MOV, or WebM that bundles the compressed video and audio streams together into a single file. The container does not determine quality or compression; it is simply the format that applications use to read and play the file. MP4 is the safest choice for web use due to near-universal browser support.

---

Why raw video files are unsuitable for the web

Three things make unencoded or poorly encoded video a problem on websites:

• File size and bandwidth. A large video file requires significant bandwidth every time someone loads the page. On shared or standard hosting, this can exhaust your monthly transfer allowance quickly, and it makes the page slow to load for anyone on a mobile connection.
• Browser compatibility. Not all formats play in all browsers. MOV files, common from Apple devices and editing software, will not play natively in many browsers. MP4 with H.264 encoding is the standard for reliable cross-browser playback.
• Performance impact. A video that autoplays as a page background or hero element will block or delay rendering if it is not properly prepared. Dimensions, bitrate, and file size all directly affect how quickly a page becomes usable.

---

Codecs and formats worth knowing in 2026

• H.264 (MP4) – The standard for web video. Universally supported, well-optimised, and the right choice for the vast majority of website use cases. If in doubt, use H.264 in an MP4 container.
• H.265 (HEVC) – Approximately 50% better compression than H.264 at equivalent quality, but browser support is inconsistent without a licence fallback. Not yet reliable for general web use without serving both formats.
• VP9 (WebM) – Google’s open-source codec, supported in Chrome and Firefox but not universally. Often used alongside H.264 as a secondary source for browsers that support it.
• AV1 (WebM or MP4) – The newest generation, offering excellent compression with no licensing fees. Browser support is now strong in modern browsers, but encoding is significantly slower than H.264. Worth considering for high-traffic sites where bandwidth savings justify the encoding time.

For most client websites, H.264 in an MP4 container remains the practical choice. AV1 is worth watching as support matures.

---

Preparing video with ffmpeg

ffmpeg is a free, open-source command-line tool that handles virtually any video encoding task. It is available on Mac, Windows, and Linux, and is what most professional video pipelines use under the hood.

Run the command for your platform to install it:

# macOS (Homebrew - install Homebrew first from brew.sh if needed)
brew install ffmpeg

# Windows (winget - built into Windows 11)
winget install ffmpeg

# Windows (Chocolatey - alternative if you use Chocolatey)
choco install ffmpeg

# Linux (Ubuntu / Debian)
sudo apt install ffmpeg

Once installed, ffmpeg works identically across all platforms – the commands throughout this guide apply regardless of which operating system you are using.

The examples below cover the most common website scenarios.

Hero banner or background video

Background video on a website header should be short (15-30 seconds, looping), muted, free of text or detail, and as small as possible. Quality takes a back seat to performance here.

ffmpeg -i input.mp4 \
  -vf "scale=1920:1080" \
  -c:v libx264 \
  -crf 28 \
  -preset slow \
  -an \
  -movflags +faststart \
  output-hero.mp4

What each option does:

• -vf "scale=1920:1080" – Resizes to 1920×1080. For a background video that only ever fills a screen, this is the maximum you need. Many hero videos can go to 1280×720 without any visible difference.
• -c:v libx264 – Encodes using H.264.
• -crf 28 – Constant Rate Factor controls quality vs file size. Range is 0 (lossless) to 51 (worst). 23 is the default; 28 gives a noticeably smaller file with acceptable quality for background use. Try 24-26 if quality matters more.
• -preset slow – Slower encoding = better compression at the same quality. Use medium if you need speed.
• -an – Removes the audio track entirely. Background video should always be silent.
• -movflags +faststart – Moves metadata to the start of the file so the browser can begin playback before the full file has downloaded. Important for web video.

A 30-second 1080p background video should come out at roughly 3-8 MB depending on content complexity.

Standard inline video (embedded in page content)

For video that plays within page content with visible controls, you typically want better quality than a background video but still optimised for streaming.

ffmpeg -i input.mp4 \
  -vf "scale=1280:720" \
  -c:v libx264 \
  -crf 23 \
  -preset slow \
  -c:a aac \
  -b:a 128k \
  -movflags +faststart \
  output-content.mp4

Changes from the hero example:

• scale=1280:720 – 720p is sufficient for most inline content and keeps file sizes manageable.
• -crf 23 – Default quality, a good balance for visible content.
• -c:a aac -b:a 128k – Keeps the audio encoded as AAC at 128 kbps. Remove these lines if the video has no audio.

Scaling while preserving aspect ratio

If your source video is not exactly 16:9, forcing a specific resolution will distort it. Use -1 to let ffmpeg calculate the correct dimension automatically:

ffmpeg -i input.mp4 \
  -vf "scale=1280:-2" \
  -c:v libx264 \
  -crf 23 \
  -preset slow \
  -movflags +faststart \
  output-scaled.mp4

scale=1280:-2 sets the width to 1280px and calculates height to preserve the aspect ratio, rounding to the nearest even number (required by H.264).

Extracting a poster image

A poster image is the still frame shown before a video plays. Without one, many browsers show a blank or black frame, which looks unfinished. You can extract a specific frame from your video to use as the poster.

Extract the first frame:

ffmpeg -i input.mp4 \
  -frames:v 1 \
  -q:v 2 \
  poster.jpg

Extract a frame at a specific timecode (useful if the first frame is black or a title card):

ffmpeg -i input.mp4 \
  -ss 00:00:02 \
  -frames:v 1 \
  -q:v 2 \
  poster.jpg

-ss 00:00:02 seeks to 2 seconds in before extracting. Adjust to taste – pick a frame that gives a clear, representative still of the video content. Once extracted, run the image through your usual optimisation process (compress to under 150KB, as per the image optimisation guide).

Creating a WebM version for modern browsers

If you want to serve a smaller file to browsers that support VP9, you can provide both an MP4 and a WebM source. The browser picks the first format it can play.

ffmpeg -i input.mp4 \
  -vf "scale=1920:1080" \
  -c:v libvpx-vp9 \
  -crf 33 \
  -b:v 0 \
  -an \
  output-hero.webm

In your HTML, serve both:

<video autoplay muted loop playsinline poster="poster.jpg">
  <source src="output-hero.webm" type="video/webm">
  <source src="output-hero.mp4" type="video/mp4">
</video>

The browser tries WebM first, falls back to MP4. This is optional for most sites but useful for high-traffic pages where bandwidth matters.

---

Video on your website: hosting considerations

Where a video is stored matters as much as how it is encoded.

Storing video on your web hosting works for short, well-optimised files such as hero background video. Keep files under 10 MB if possible, and be aware that video playback counts towards your monthly bandwidth. A busy page with a 15 MB background video could consume your allowance quickly.

Third-party video hosting (YouTube, Vimeo) takes bandwidth entirely off your server. If a video needs to be discoverable, shareable, or is longer than 30 seconds, embed from a platform rather than hosting it directly. YouTube embeds also carry SEO benefits. The trade-off is some loss of control over the player appearance and any ads or recommendations the platform shows.

For most brochure sites and landing pages, a well-optimised MP4 served directly is the right choice for background video, while any longer or content-led video should be hosted externally and embedded.

Video encoding workflow summary

1. Export from your source at the highest quality you have – you can always compress down, not up.
2. Choose your target dimensions – 1920×1080 maximum for background video, 1280×720 for most content video.
3. Run through ffmpeg using the appropriate command above for your use case.
4. Check the output file size – background video should be under 10 MB, ideally under 5 MB; content video under 30 MB for a few minutes.
5. Extract a poster image if the video will have visible controls or needs a preview frame.
6. Compress the poster image using your usual image optimisation process.
7. Add movflags +faststart if you have not already – this is easy to miss and makes a real difference to perceived load time.
8. Test on mobile – video performance on a mobile connection is the real test, not your broadband.

Need help?

If you are working on a website project that involves video and want guidance on getting it right, or if your existing site has performance issues related to media files, get in touch. We can also carry out a full website performance audit if you want a broader picture of what is affecting your site’s speed.