Nothing is more disheartening than creating beautiful content only for the video to appear mushy, compressed, and grainy when you upload it online. Much of this comes down to the export settings you use on your videos and how they interact with the website’s video compression. To understand video optimization, you need to understand the how these two aspects work together. In this article, we’ll cover the core basics of how to optimize your videos for the web. Let’s dive in.
Understanding video optimization
When uploading a video to the web, it must be optimized to ensure fast, smooth, and efficient playback across all devices. Videos, especially high-resolution or lengthy ones, contain a lot of data, which can affect load times and quality. To address these issues, videos are compressed.
There are a few ways to think about it, but let’s focus on the two main points. First, consider the influx of video data uploaded to platforms. For instance, YouTube receives five hundred hours of video content uploaded every minute. As you can imagine, even if all this content is correctly optimized, the sheer amount of data being uploaded daily is astronomical. The storage space YouTube would need to handle this would be overwhelming and likely only possible with some intervention.
Secondly, there’s the delivery of these videos. People watch content on various devices, from streaming on a mobile phone with poor network coverage to built-in screens on a plane flying across the Atlantic. Viewers consume content in countless ways, and not everyone is hooked up to an ethernet cable to stream 4K UHDR. So video delivery has to be optimized to ensure a smooth experience for everyone.
How optimization works when you upload a video
When you upload a video to a platform like YouTube, it automatically compresses and re-encodes your video to optimize it for smooth streaming across different devices and internet speeds. Here’s a quick rundown of how it works:
- Transcoding: When you upload a video to YouTube, there’s a slight delay before it goes live, and it says that YouTube is ‘processing your video.’ Within this period, the video is transcoded (converted) into multiple resolutions and formats. This creates different versions, allowing viewers to stream in the best quality their device and connection can handle.
- Compression Algorithms: Besides processing the video into a deliverable format, YouTube compresses the video to shrink the file size without noticeably affecting quality. It removes redundant data and uses inter-frame compression, storing only changes between frames to save bandwidth (we touch upon this with VBR and CBR later).
- Bitrate Adjustment: YouTube adjusts the bitrate depending on the resolution. Higher resolutions, like 1080p or 4K, require higher bitrates to maintain quality, while lower resolutions, like 480p, use less. This keeps playback smooth without overloading your connection.
- Adaptive Streaming: Using adaptive streaming (such as DASH or HLS), YouTube dynamically adjusts the video quality based on your internet speed. Have you ever been watching a video, and the quality drastically drops for some reason, but you’re still able to watch the content? This is adaptive streaming. The stream shifts to a lower resolution if there’s a hiccup with your internet speed, and when it speeds up, it jumps back to a higher-quality version.
This process ensures videos are streamed efficiently, minimizing buffering while allowing playback on everything from smartphones to 4K TVs.
The good news? Just because a platform needs to compress the video doesn’t mean your content has to look squished. You can still achieve crisp-looking media by using a specific set of parameters. Let’s dive into those.
Understanding video formats and codecs
First, let’s talk about video formats. When you get to the render page of DaVinci Resolve or open the export options in Premiere Pro, you’ll see tons of different presets to choose from. Each preset offers its own set of codecs that differ from the others. It can get confusing, but just knowing the core fundamentals will be enough for you to optimize your videos.
Formats
So, when we talk about video formats, we first have to break down the two components of the format, which are containers and codecs. For example, in DaVinci Resolve there are 17 formats to choose from.
Every time we switch to a new format, a different selection of codecs appear.
The format options are what we call a container. This is your Quicktime, MP4, AVI, and so forth. These containers hold all the necessary files for playback, including the video stream, audio, subtitles, and metadata.
Containers you can find across NLEs
AVI: An older format still popular on Windows, supporting codecs like Cineform, Grass Valley HQ, and Uncompressed RGB/YUV.
Cineon: Developed by Kodak for film scanning, Cineon is an uncompressed 10-bit RGB format used in digital mastering.
DPX: A film industry favorite for uncompressed image sequences, supporting 10-, 12-, and 16-bit RGB, plus 8-bit RGBA.
EXR: A high-dynamic-range format developed by ILM for quality and multi-channel outputs, commonly used for ACES and HDR deliverables.
IMF: A tapeless format for delivery to networks, supporting multiple video, audio, and subtitle tracks, using JPEG2000 for encoding.
JPEG 2000: Commonly used in IMF and DCP workflows, following the JPEG2000 Part 1 standard.
MJ2: Motion JPEG 2000, used in IMF and DCP workflows.
MP4: Allows exporting H.264-encoded movies, commonly used for web and general distribution.
MXF OP–Atom: A basic format for delivering DNxHD, supporting a range of codecs like DNxHR and XDCAM MPEG2.
MXF OP1A: Supports delivery in formats like DNxHD, DNxHR, and Sony XAVC, ideal for broadcast and professional workflows.
QuickTime: Apple’s format, supporting codecs like ProRes, DNxHD, and H.264, plus uncompressed formats for high-quality output.
TIFF: An image sequence format widely compatible across platforms, often used in DCDM mastering.
Many of these formats are highly specialized, so chances are that you probably won’t need to use most of them!
Codecs
On the other hand, codecs are the algorithms used to encode and compress this information. This determines how the data within the container is processed. With MP4 in Davinci Resolve, I can choose from H.264 and H.265. These codecs will each compress the video files to smaller sizes without compromising the quality in different ways.
Within the popular NLE options, you’ll encounter various codec choices, such as:
Apple ProRes (422 HQ, 422, 422 LT, 422 Proxy): A popular choice for high-quality, efficient editing across different compression levels.
H.264 (MP4 or MOV): The go-to for web and mobile video, balancing quality and file size.
H.265 (HEVC): A more efficient version of H.264, offering better compression for the same quality.
DNxHD / DNxHR: Avid’s top-tier codecs for professional editing workflows.
CineForm: GoPro’s high-quality codec is often used in post-production for editing flexibility.
Uncompressed RGB/YUV: When you need the absolute best, lossless quality—typically in high-end production.
DPX: A staple in high-end post-production and film scanning, perfect for maintaining quality throughout.
OpenEXR: A VFX favorite that delivers high-dynamic-range, floating-point images for detailed effects work.
JPEG 2000: Commonly used in digital cinema, known for handling large, high-quality files.
MXF OP1A: A file format that works with DNxHD, DNxHR, and XDCAM codecs, commonly used in professional environments.
XAVC Intra / XAVC Long: Sony’s codecs for 4K and HD content, designed for broadcast and production.
IMF (Interoperable Master Format): The standard for delivering content to streaming platforms, supporting multiple formats.
DCP (Digital Cinema Package): The cinema distribution and projection format.
What is the difference between H.264 vs H.265?
In a nutshell, H.265 is more advanced and can compress video data more efficiently than its older counterpart, H.264. It can reduce video export sizes by around 50% while retaining the same quality. This is ideal for long videos with less-than-satisfactory upload speeds.
H.265 can support 10-bit color depth, essential for preserving higher-quality video with vivid colors. 8-bit video can quickly reduce gradients to blocky steps, and H.265 can help fix that. However, due to the additional processing required to encode and decode H.265, some platforms still do not support the codec, like Instagram and Facebook, whereas YouTube and TikTok do.
Given that H.265 delivers better-quality images than H.264 and does so without increasing file sizes, it likely won’t be too long before most platforms also support this newer technology.
On the topic of social media platforms, let’s run through the recommended formats for each platform.
Recommended formats for social media video optimization
TikTok
- Supported Formats: MP4 (recommended), WebM, MOV
- Supported Codecs: H.264 (recommended), H.265, VP8, VP9
- Framerate: 23 FPS minimum, 60 FPS maximum
- Picture Size: 360px to 4096px for both height and width
- File Size: Max: 4GB
- Supported Formats: MP4 (recommended), MOV
- Supported Codecs: H.264 (recommended), VP8
- Framerate: 24 FPS minimum, 60 FPS maximum
- Picture Size: 1080px is recommended, up to 4K (it’s worth noting that they will compress 4K files to 1080 delivery).
- File Size: Max: 4GB
- Supported Formats: MP4 (recommended), MOV
- Supported Codecs: H.264 (recommended), VP9
- Framerate: 24 FPS minimum, 60 FPS maximum
- Picture Size: 1080px recommended, up to 4K
- File Size: Max: 10GB
YouTube
As a specialized video platform, YouTube provides more advanced recommended settings for optimal performance.
Encoding Recommendations:
- Container: MP4
- No Edit Lists (video may not process correctly)
- Moov atom at the front of the file (Fast Start)
- Progressive scan (no interlacing)
- High Profile
- Two consecutive B-frames
- Closed GOP, GOP of half the frame rate
- CABAC (Context-Adaptive Binary Arithmetic Coding)
- Variable bitrate (no limit, but recommended bitrates are listed below)
- Chroma subsampling: 4:2:0
Frame Rate:
- Encode and upload using the same frame rate as recorded.
- Common frame rates: 24, 25, 30, 48, 50, and 60 fps (other frame rates are acceptable).
- Interlaced content should be deinterlaced before uploading (e.g., 1080i60 should be deinterlaced to 1080p30).
Recommended Video Bitrates for SDR Uploads:
- 8K: 80–160 Mbps for standard frame rate (24, 25, 30), 120–240 Mbps for high frame rate (48, 50, 60).
- 2160p (4K): 35–45 Mbps for standard frame rate, 53–68 Mbps for high frame rate.
- 1440p (2K): 16 Mbps for standard frame rate, 24 Mbps for high frame rate.
- 1080p: 8 Mbps for standard frame rate, 12 Mbps for high frame rate.
- 720p: 5 Mbps for standard frame rate, 7.5 Mbps for high frame rate.
- 480p: 2.5 Mbps for standard frame rate, 4 Mbps for high frame rate.
- 360p: 1 Mbps for standard frame rate, 1.5 Mbps for high frame rate.
Recommended Video Bitrates for HDR Uploads:
- 8K: 100–200 Mbps for standard frame rate, 150–300 Mbps for high frame rate.
- 2160p (4K): 44–56 Mbps for standard frame rate, 66–85 Mbps for high frame rate.
- 1440p (2K): 20 Mbps for standard frame rate, 30 Mbps for high frame rate.
- 1080p: 10 Mbps for standard frame rate, 15 Mbps for high frame rate.
- 720p: 6.5 Mbps for standard frame rate, 9.5 Mbps for high frame rate.
- 480p and 360p: Not supported for HDR uploads.
Vimeo
Like YouTube, Vimeo provides more advanced settings due to the platform’s specialized focus.
- Video Codecs: H.264, Apple ProRes 422 (HQ), or H.265 (HEVC)
- Frame Rate: Stick with the native frame rate and opt for a constant frame rate
- Bit Rate: Variable is the preference; follow bit rate ranges based on your video’s resolution
- Resolution: The pixel aspect ratio should be 1:1
- Color Primaries & Matrix Coefficients: All are accepted, but BT.2020 (Rec. 2020) or BT.709 (Rec. 709) are the recommended options
- Color Transfer: For HDR, only PQ (SMPTE 2084) or HLG transfer function is supported
- Bit Depth: 10-bit or higher
- Scan Type: I recommend progressive scan and deinterlace videos for best results
While combing through guidelines or a manual may seem tedious, developer pages on a platform often contain all the necessary information—and more—regarding format requirements.
Balancing video quality and file size
If your video’s size is too large after export and optimization, here are some steps you can take to ensure the file size is manageable for uploading.
Resolution Adjustment
One of the easiest ways to reduce file size is to lower the resolution. For example, if you have a 4K video and you’re uploading to Instagram, which only supports 1080p, you can lower the resolution to 1080p to reduce file size. As a bonus, you’ll often achieve better sharpness than if you had a native 1080p file.
However, if you upload in 4K and Instagram compresses it to 1080p, you might notice some quality loss. Adjusting the resolution beforehand can be beneficial, as the platform’s algorithm has less to compress.
Bitrate Management
This is one of the more complex aspects of exports. The bitrate directly affects both file size and quality. Lowering the bitrate reduces file size, but can introduce artifacts and pixelization.
There are two main options: CBR (constant bitrate) and VBR (variable bitrate). Constant bitrate keeps the same level throughout the entire video. This is useful for high-fidelity graphics or lots of motion where you want to maintain consistency. The downside is that some scenes might not need this high bitrate level, leading to larger file sizes than necessary.
On the other hand, VBR allows the bitrate to adjust dynamically based on the complexity of each scene, optimizing both size and quality. This is often preferable, but the system may need to recognize certain complex scenes in some cases, leading to lower quality in those sections.
Bonus Tips
I have two bonus tips for video optimization. First, if the platform’s compression degrades your footage too much, I recommend subtly applying sharpness to your video. In DaVinci Resolve, you can go to the blur tab and reduce the sharpness from 0.50 to 0.47. It’s a minor adjustment but often preserves detail through social media compression.
Second, let’s talk film grain. While film grain adds a cinematic feel, overusing it can be counterproductive. Tom Scott’s video below explains how detailed, chaotic scenes challenge video compression, leading to blocky visuals. Too much grain can cause the same issue. Keep it subtle for the best results.
Final thoughts
The world of video optimization is a very advanced and intricate series of paths to navigate. But for web optimization, one combination will rarely steer you wrong: an MP4 container with an H.264 codec. Ultimately, adjusting the bit rate on each platform is key to preserving quality throughout.
To help you create the highest quality video content possible, Storyblocks has a massive library of stock footage in both 4K and HD. One subscription gives you unlimited downloads of over 2 million royalty free stock assets, so you can focus on creating amazing videos quickly. Explore our plan options and sign up today to start downloading instantly.