Optimally storing web videos

Formats and Codecs

Videos are not just image and sound, but are based on clearly defined technical foundations. Those who understand how formats and codecs interact can specifically influence quality, file size, and compatibility.

Many confuse container/format and codec – but both are crucial for web videos.

Container / Format

The container is the "shell" of a video. It determines which types of audio, video, and subtitles can be included.

• MP4 (.mp4)
  Very widely used, supports video + audio + subtitles, used for websites, social media, and YouTube
• WebM (.webm)
  Open container, specially optimized for the web, used in modern browsers and HTML5 video
• OGG / OGV (.ogv)
  Open container, less common, used for old web projects and alternative browsers

Codec

The codec describes how the video data is compressed. Different codecs can exist in the same container.
 

• H.264 / AVC
  High compatibility and good quality, but larger files, typical containers MP4 and MOV
• H.265 / HEVC
  Very efficient compression, but requires a license and is not supported everywhere, typical containers MP4 and MOV
• VP8 / VP9
  Open source and modern, but not supported on all devices, typical container WebM
• AV1
  Very efficient compression and small files, but slow encoding and limited support, typical containers WebM and MP4 (experimental)

FPS and Bitrate

Frame rate and bitrate are key to how smooth and high-quality a video appears. Small adjustments in these two areas often have noticeable effects on perception – and on file size.

The frame rate (FPS) determines how smooth a video appears:

• 30 FPS - Standard for web and social media
• 60 FPS - For fast movements

The bitrate controls the amount of data per second of video. Higher bitrate = better quality, but larger file.

• 1080p at 30 FPS: 8-12 Mbit/s
• 1080p at 60 FPS: 12-20 Mbit/s
• 4K at 30 FPS: 25-35 Mbit/s
• 4K at 60 FPS: 35-45 Mbit/s

Responsive videos for mobile, tablet, and desktop

Modern websites should deliver videos so that they load quickly and look as good as possible on all devices. Different versions for different screen sizes make the difference.

HTML5 allows you to load different video sources depending on the device.
 

This is how the code above works in detail:

• The tag is the frame and contains all sources as well as the fallback.
• The -elements are checked from top to bottom. The browser takes the first source whose media condition matches and whose type it understands.
• The two lines with media="(max-width: 767px)" deliver the mobile version (first WebM, then MP4 as fallback).
• The lines with media="(max-width: 1024px)" are intended for tablets.
• The last two -elements without media are the default for larger displays (desktop).
• The text Your browser does not support HTML5 videos. is only displayed if no HTML5 video can be played.

Important video attributes explained:

• autoplay – Starts the video automatically when the page loads (only works with muted).
• muted – Mutes the sound, necessary for autoplay.
• playsinline – Prevents the video from starting in fullscreen on iOS.
• loop – Plays the video endlessly (optional).
• controls – Shows play/pause and browser controls (optional).
• preload – Controls how much the browser preloads (optional: none / metadata / auto).
• poster – Preview image shown before the video starts (optional).
•  – Loads different files depending on screen size.

Social Media & YouTube

Videos perform differently on social media and YouTube depending on how they are exported and uploaded. Each platform has its own requirements and typical quality levels.

Social Media

• Framerate: 30 FPS
• Bitrate: 8–20 Mbit/s
• Codec: H.264
• Always export from the master video (never from social downloads).

YouTube

• YouTube automatically adjusts resolution, codec, and bitrate.
• Embedding via iFrame

Master video workflow – ensuring quality

A clean production workflow ensures that videos look consistently good in every variant – from the master file to individual formats for web, social, or mobile devices.

1. Export master video
   H.264 or AV1, high bitrate, 30–60 FPS
2. Create device variants
   Smartphone 480–720p, tablet 720–1080p, desktop 1080p–4K
3. Create social media versions
   Compress according to platform
4. Never work from social media downloads
   Avoid loss of quality

Overview table: devices & platforms

Depending on the platform, recommended resolutions, codecs, and bitrates differ significantly. The following overview shows which settings have proven themselves for different devices and use cases.

• Master video
  4K / original, 30–60 FPS, 25-45 Mbit/s, codec H.264 / AV1, basis for all variants
• Desktop
  1080p-4K, 30-60 FPS, 8-35 Mbit/s, codec H.264 / VP9, highest quality
• Tablet
  720p-1080p, 30 FPS, 5-15 Mbit/s, codec H.264, moderate quality
• Smartphone
  480p-720p, 30 FPS, 3-8 Mbit/s, codec H.264, optimized for mobile data usage
• Instagram / TikTok / Facebook
  max. 1080p, 30 FPS, 8-20 Mbit/s, codec H.264, platform compression unavoidable
• YouTube (Embed)
  360p-4K automatically, 30-60 FPS, bitrate platform-dependent, codec H.264 / VP9, automatic adjustment

If formats, codecs, and export settings are chosen consciously, web videos remain flexible – from your own website to social media – without noticeable compromises in quality.