Last updated: Sep-07-2023
Video content is extremely heavy, especially when compared to images, so it's essential to deliver your video content in the most optimized way.
Optimizing videos for web and mobile applications can be complex, however, with video files often very large. It can therefore result in longer upload & download times and very CPU-intensive transcoding and transformation. The vast set of potential devices, resolutions, video formats, and video codecs makes it even more confusing.
This page describes how you can apply various optimization techniques to deliver the best quality videos with the lowest file sizes, a key component in improving Core Web Vitals metrics. It also outlines the default transformations applied by Cloudinary to aid the optimization.
Whenever you apply any transformation to video, Cloudinary performs the following optimizations by default:
- Automatically selects the video codec (vc_auto). See vc_auto in the Transformation URL API Reference for the default values.
- Applies a quality adjustment relevant to the codec. To override the default adjustments, set the quality parameter in your transformation.
You can control the video quality with the
quality parameter (
q in URLs). This parameter represents a mapping between the actual low-level settings of each different video format normalized to a quality value between 1 (lowest) and 100 (highest). Reducing the quality is a trade-off between visual quality and file size. See vc (video_codec) in the Transformation URL API Reference for the default settings for each format.
For example, reducing the quality of the uploaded mp4 video named
dog to 50 results in a file size of 1.1 MB compared to the original file size of 9.8 MB:
Instead of defining a specific quality value, you can use Cloudinary's intelligent quality and encoding algorithm. The algorithm analyzes each video to decide on the optimal encoding characteristics that will produce the best visual quality while minimizing the file size.
The quality transformation parameter can be set to auto (
q_auto in URLs) in order to perform automatic quality encoding. Further control of the automatic quality selection is supported as follows:
q_auto- The optimal balance between file size and visual quality. By default, this is the same as q_auto:good.
q_auto:best- Less aggressive algorithm. Generates bigger files with potentially better visual quality.
q_auto:good- Ensuring a relatively small file size with good visual quality. Example of a target audience: stock media sites that display videos with a high visual quality.
q_auto:eco- More aggressive algorithm, which results in smaller files of slightly lower visual quality. Example of a target audience: popular sites and social networks with a huge amount of traffic.
q_auto:low- Most aggressive algorithm, which results in the smallest files of low visual quality. Example of a target audience: sites using thumbnail preview videos that then link to higher quality videos.
Save-Data support is a feature included in the Client-Hints standard, which is already supported by Chrome and Opera browsers. The browsers send a special request header named
Save-Data if the user has enabled data saving mode. When
q_auto is specified and the
Save-Data: on header reaches the CDN layer of Cloudinary, image compression and encoding will automatically switch to the
eco mode (
q_auto:eco) instead of the default
good quality mode (
q_auto:good). This feature has implications for using
q_auto in named transformations.
Click the various quality settings below to see how the resulting file size is affected when encoding the hourglass video:
- Automatic quality is supported for videos using the
- Cloudinary already performs some basic content-aware encoding when delivering a transformed video. See vc (video_codec) in the Transformation URL API Reference for the default settings for each format, which includes setting quality to 70. Using
q_autooverrides this default setting, producing slightly different results depending on the complexity of the video.
See also: q_auto for images
In some cases, transcoding videos from mp4 to webm (VP8/9 encoding) may give a pixelated result. In these cases, you can control the final quality by setting a maximum quantization percentage (1-100 range) value:
qmax in addition to a fixed
quality value. This can help ensure that the video is not over-quantized.
For example, you could set the
quality parameter to:
"80:qmax_90" to ensure that the transcoded video is quantized no more than 90% of the maximum possible quantization. When you set a
qmax value, the quality value is relative to the quantization value.
For example, if you transcode the video below to .webm format without setting a max quantization value, the quality drops fairly significantly compared to its .mp4 counterpart, but by setting the max quantization to 70, you get a better visual quality.
Keep in mind that the lower you set the
qmax value, the higher the bitrate, and the larger the resulting file size.
If you don't supply a
qmax value, then the maximum quantization is 100%, although the actual applied quantization will be determined by other factors such as the
quality value you set (or your product environment's default quality setting), the content of the actual video, and other transformation and optimization options you include.
bit_rate parameter (
br in URLs) for advanced control of the bitrate for audio and video files. This parameter controls the number of bits used to represent the audio or video data. By default, the
br_ value uses variable bitrate (VBR), where the specified value indicates the maximum bitrate. The actual bitrate and quality are optimized according to the audio or video content, to conserve bandwidth and storage. You can also specify a constant bitrate value (CBR):
br_[value]:constant in URLs. In this case, the specified bitrate will be used even in cases where that high of a rate is not necessary for good quality listening or viewing. When you specify a constant bitrate, the
quality parameter is ignored.
bit_rate can take one of the following values:
- An integer e.g.
- A string supporting 'k' and 'm' (kilobits and megabits respectively) e.g.
For example, setting the maximum bitrate of the uploaded mp4 video named
dog to 250 kilobits (also reducing file size down to ~550 KB):
qmax), and there is a conflict between these two settings, the maximum or constant bitrate will take precedence.
Adaptive bitrate streaming is a video delivery technique that adjusts the quality of a video stream in real-time according to detected bandwidth and CPU capacity. This enables videos to start quicker, with fewer buffering interruptions, and at the best possible quality for the current device and network connection, to maximize user experience. See adaptive bitrate streaming documentation for more on how to use this with Cloudinary.
See also: How to optimize image quality
As there are many different video formats out there, each one with different characteristics and compression capabilities, choosing the right format for each one of your videos can be a tough task.
Using the format parameter (f_
There are a lot of formats and codecs for encoding videos, with some formats better than others at compression and reducing the file size without impairing visual quality. Since different browsers support different video formats and codecs, the best solution to save bandwidth and optimize delivery time would be to deliver the best format according to the browser used by each of your visitors.
fetch_format parameter can be set to auto (
f_auto in URLs) in order to perform automatic format and codec selection based on the requesting browser. For example, with the automatic format feature, in most cases Chrome users would receive a VP9-encoded WebM file, while Safari users would receive an HEVC-encoded MP4 file. If a browser does not support either of these formats then the video is delivered as an H.264-encoded MP4 file (which is supported by almost every browser).
For example, the uploaded video named
dog scaled down to a height of 280 pixels and delivered as WebM (VP9) to Chrome browsers (482 KB), an MP4 (HEVC) to Safari browsers (520 KB), or as an MP4 (H.264) to browsers that support neither format (821 KB):
In certain scenarios, it may be necessary to include the media type option to ensure that your video is delivered as a video rather than a still image video frame, or as just audio. By default,
f_auto will assume all media is an image unless a file extension is included in the URL. You can ensure a video is delivered by using a video file extension such as
mp4, but when building your URLs using one of our SDKs, you might not use a file extension as part of the public ID.
f_auto:video, you can ensure that the asset will be delivered in the most optimal video format. For example, to deliver the
dog video with automatic format selection, ensuring it is delivered as a video when no file extension is used:
- This feature is also available on mobile native applications as long as the specified formats are included in the
- When using automatic format selection, a derived asset is created for each format that is delivered. This could impact your total transformation counts and storage usage. To ensure best performance, even for the first users requesting each format, you may want to create the derived assets for each format in advance; either upon upload (using eager transformations) or after upload (using the explicit method).
f_autoin an eager transformation does not eagerly generate derived assets for all formats; see Using automatic format in eager transformations.
f_autois not effective if used in named transformations. Learn more.
See also: q_auto for images
The most efficient way to minimize the file size of your delivered videos and improve their performance is to resize them so they'll fit your web or mobile app-specific design.
If it suits your use-case, you can also perform the resize before you save the video in Cloudinary using incoming transformations, this will help save on storage space.
For details on how to resize your videos, see resizing and cropping videos.
See also: How to optimize image sizing
- New Auto-Quality Setting for Content-Aware Video Compression
- Automatic Video Transcoding
- How to Compress Video Size Automatically With One Line of Code
- Optimizing Video with Cloudinary and the HTML5 video Player: Part 1
- Video Optimization, Part II: Multi-Codec Adaptive Bitrate Streaming
- Top 10 Mistakes in Handling Website Videos and How to Solve Them