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.
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.
Automatic quality is supported for videos using the h264, h265 and VP9 codecs.
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_auto overrides this default setting, producing slightly different results depending on the complexity of the video.
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.
Use the 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. 120000.
A string supporting 'k' and 'm' (kilobits and megabits respectively) e.g. 250k or 2m.
For example, setting the maximum bitrate of the uploaded mp4 video named dog to 250 kilobits (also reducing file size down to ~550 KB):
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.
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.
The 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):
This feature is also available on mobile native applications as long as the specified formats are included in the Accept header.
When using automatic format selection, a derived resource 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 resources for each format in advance; either upon upload (using eager transformations) or after upload (using the explicit method).