Compressing Videos for Web and Mobile – High Quality at Minimal File Size

The basics of video compression: formats, codecs & settings

Let’s quickly go over the basics. Not because we want to throw jargon at you, but because these terms will come up everywhere once you dive into the topic.

A video format consists of two parts: the container and the codec. The container (e.g., MP4 or WebM) is like the box everything is packed into – video, audio, subtitles, and metadata. The codec determines how the actual image and audio content is compressed.

On codecs:

"A video coding format ... typically uses a standardized video compression algorithm"— Wikipedia

The most widely used codec by far is H.264, also known as AVC (Advanced Video Coding).

"By far the most commonly used format for the recording, compression, and distribution of video content, used by 84–86% of video industry developers"— Wikipedia

H.264 is the go-to for web videos because it delivers solid quality with relatively small file sizes – and it works on virtually all browsers and devices. Newer codecs like H.265 or AV1 can be more efficient but aren’t fully supported everywhere. And let’s be honest: if you're putting a video on the web, you want everyone to be able to watch it, without installing anything.

These settings determine how big (or small) your video ends up:

• Resolution: Full HD (1920x1080) is usually enough. 4K looks great but creates huge files.
• Framerate: 24 to 30 fps is fine in most cases. More doesn’t add much value.
• Bitrate: One of the biggest levers. Higher bitrate = better quality = larger file.
• Audio: 128 kbps stereo is often totally sufficient and saves a lot of space.

If you want to go deeper into formats and codecs, or you’re not sure what fits your project best, check out these two articles:

Prepping videos for the web: the key planning questions

Before you compress: these questions make the difference between “decent” and “perfectly optimized.”

🔍 Where is the video embedded?

A homepage hero video needs a different quality level than a small testimonial in the footer. The more visible it is, the more you need to optimize.

Example:

• Creating a short autoplay background video? → Low quality is fine.
• Embedding a video in a small box without full-screen? → You don’t need 4K. Go for 720p or even 360p.

🌐 How is it accessed?

Are most of your users on mobile or Wi-Fi? Just check your analytics. Chances are, a large portion of your traffic is on mobile – meaning huge videos are a no-go.

🖼️ Do you really need max quality

For brand videos, Full HD might make sense. For FAQ content, 720p is enough. It’s always a tradeoff between looks and load time.

🔇 Is sound necessary?

Most web videos run muted. If audio doesn’t matter, ditch it. It saves space and avoids awkward auto-play surprises.

🧏 Do you need accessibility features?

If subtitles or transcripts are required (e.g., public sector), plan that before compressing. Don’t burn in captions; make them toggleable via your player. [Details on accessible video players]

📍 Where is the video hosted?

On your CMS, own server, or external platform? That determines whether you can support adaptive streaming – or if you’ll need multiple versions manually.

Adaptive video compression: why one version isn’t enough

A lot of people think they just need one perfect version: decent quality, small file, done.

Here’s the problem: that one version never works equally well for everyone. Depending on device and connection, even an “optimized” video can be a mess.

Example:
Someone on a slow train connection tries to load your 1080p file. No chance. Someone else with fiber internet sees a blurry mess because you overcompressed it.

Both are bad experiences – and both hurt performance.

The fix: adaptive compression using multiple quality levels. Your video is delivered in different versions, and the player picks the best one in real-time based on speed and screen size. The go-to tech for this is HLS (HTTP Live Streaming) or MPEG-DASH.

Want to dig deeper? Check out:

Compressing videos for websites – Tools & workflows compared

Let’s get practical:

How do you get your video into a format that loads quickly and still looks professional? Here are three options, depending on your setup and resources.

🛠️ 1. Do-it-yourself with desktop tools

If you're handling a few videos and don’t need automated conversions, tools like HandBrake, FFMPEG, or Adobe Media Encoder are great. You can fine-tune resolution, bitrate, and codec settings, and export a lean MP4 with H.264.

Ideal for:

• Smaller websites
• One-off video projects

🧑‍💻 2. In-house workflows with presets

If you regularly embed videos (e.g., as an agency, editorial team, or marketing department), it’s worth creating export presets in your editing software. Combine those with automated uploads to your CMS, and you’ll save time and avoid errors.

Ideal for:

• Bigger content teams
• Regular video production
• Consistent quality & branding

☁️ 3. Video hosting platforms with automatic optimization.

Using a specialized video platform? They handle the tech for you: multiple resolutions, adaptive streaming, responsive players – all automated.

Ideal for:

• High-traffic websites
• Projects focused on UX, SEO, and load times
• Teams without in-house video expertise

A key difference here is whether you want (or need) to build compression skills internally.

With options 1 and 2, someone needs to know what they’re doing. With option 3, anyone on the team can embed videos correctly – which takes the pressure off.

We see this all the time: during a relaunch, videos are perfectly optimized. But a few months later, someone uploads a 200 MB file to a subpage – and performance tanks. Automation helps avoid that.

GDPR-compliant and fast – how Ignite automatically optimizes web videos

At Ignite, we believe that great web video only works when performance, privacy, and user experience go hand in hand.

Our platform handles all the technical optimization for you – including automatic compression into multiple quality levels, HLS streaming, and responsive player embedding. And because we’ve built privacy in from the start, you don’t need cookie banners or external tracking scripts.

The result?

Just upload your video – we’ll take care of the rest.

Compressing videos for the web – your questions, answered

1. What’s the best video format for the web?

In most cases: MP4 with the H.264 codec. It’s widely supported across browsers and devices, and offers a great balance between file size and quality.

2. What’s the difference between a codec and a container?

The container (like MP4 or WebM) is the “wrapper” around your video. The codec (like H.264 or H.265) is what actually compresses the visual and audio content inside it.

3. What resolution makes sense for web videos?

For most websites, 1080p (Full HD) is plenty. If you want to save even more data, 720p usually works fine. 4K only makes sense if visual detail is critical.

Pro tip: Often less is more. Only make your video as large as it needs to be.

4. How much can I compress a video without losing quality?

It depends on the content: a talking-head video can be compressed much more than fast-paced action footage. Rule of thumb: keep the bitrate as low as possible – but as high as necessary. For 1080p, that’s usually 2,500–5,000 kbps.

5. How big should a video be for the web?

It depends – but ideally keep it under 10 MB for mobile hero videos, and under 50 MB for longer clips. More important than size is: how fast does it start?

6. What is adaptive bitrate streaming?

With adaptive streaming, your video is encoded in several versions (e.g. 360p, 720p, 1080p). The player picks the right one based on the user’s connection. That means smooth playback even with weak networks.

7. Can I host videos myself?

Technically yes – but it’s complex. You’ll need to prepare multiple versions manually, embed a player, and take care of privacy compliance. Platforms like Ignite handle all that for you.

[More on the difference between web and video hosting →]

8. What tools are good for beginners?

For starters: HandBrake (free, GUI-based) or FFMPEG (powerful, CLI-based). Both work well if you know what to set. If you’d rather skip the tech stuff, a professional hosting platform can do the job automatically.

9. How big should a video be for mobile websites?

Short autoplay videos in headers should stay under 10 MB. For longer clips on landing pages, try not to exceed 50 MB – at least not for the first loaded version.

10. What’s better for websites – MP4 or HLS?

MP4 is simple and works everywhere. But HLS (HTTP Live Streaming) offers multiple quality levels and adjusts to the user’s connection – ideal for performance and mobile UX. It’s more complex, but worth it long term.

[More on HLS vs MP4 in this guide →]

11. Can I compress multiple videos at once?

Yes – tools like HandBrake, FFMPEG, and many pro encoders support batch processing. Even better: platforms like Ignite have powerful encoding pipelines that handle large volumes of videos in different formats, fully automated and optimized for the web.

12. Why is my video still slow, even after compression?

File size isn’t everything. If your web server is slow, lacks caching, or your user’s connection is weak, playback will still lag. Also: if you only offer one big file (e.g. 1080p), users on mobile may struggle. Use adaptive delivery to avoid that.

13. How can I improve video loading on mobile?

Use adaptive streaming (like HLS), provide lower resolutions, and avoid defaulting to high quality. Also: don’t autoplay large videos. A simple preview image loads faster and avoids unnecessary bandwidth.

14. Can I compress or optimize videos directly in my CMS?

Some CMSs or page builders offer basic video optimization – like lazy loading or auto-format conversion. But usually it’s limited and not comparable to professional tools or hosting solutions.

15. How does framerate affect file size and quality?

Higher framerates (like 60 fps) mean more data per second – and bigger files. Most web videos work great at 24 or 30 fps. Only high-motion content (e.g. sports) may need more.

16. Can I re-compress a video that’s already compressed?

Technically yes – but you’ll lose quality. Each compression step reduces visual clarity, especially if the bitrate was already low. It’s better to export properly from the start or use a platform that creates optimized versions automatically.