Optimize videos

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.

Default optimizations

Cloudinary performs default optimizations when delivering media assets. You can control these for your product environment in Settings > Optimization and override them through transformation parameters.

Default video quality

The Default video quality setting is applied to all videos delivered from your product environment, together with an automatically determined video codec (vc_auto), but only if other transformations are also applied.

This applies a certain amount of compression to your videos in order to reduce the weight of the video.

We recommend choosing an automatic quality setting to apply to all your transformed videos rather than a specific quality level.

To override the default settings, set the quality parameter in your transformation (q_ in URLs).

How to optimize video quality

The video quality setting defines the compression level to apply to a video.

The setting you choose entails a trade-off between visual quality and file size: the lower the quality value, the more the file is compressed to a smaller file size, and the more data is lost in the process, the result of which is a loss of visual quality. At the higher quality levels, the loss of visual quality is barely noticeable to the human eye. The ultimate visual quality result also depends on other factors such as the size of the original video and the resolution of the user's monitor or mobile screen.

Adjusting the quality of your videos to a level that still provides good visual output, is one of the most powerful tools in video optimization. You can often deliver videos at less than half of the original file size with little to no visually noticeable difference. Optimizing video quality can also help improve your Core Web Vitals score.

There are a few ways to control the quality of videos delivered from Cloudinary:

• Set the default quality for your product environment
• Use automatic quality selection (q_auto)
• Set the quality when delivering a video
• Control the quality of WEBM transcoding
• Use bitrate control
• Use adaptive bitrate streaming

Automatic quality (q_auto)

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

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.

Interactive demo: automatic video quality

Click the various quality settings below to see how the resulting file size is affected when encoding the hourglass video:

See also: q_auto for images

Set the quality when delivering a video

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 jumping_from_rocks to 50 results in a file size of 2.5 MB compared to the original file size of 7.4 MB:

Control the quality of WEBM transcoding

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.

Bitrate control

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 bathroom to 250 kilobits (also reducing file size down to ~2.2 MB):

Adaptive bitrate streaming

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

How to optimize video format

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.

There are a couple of Cloudinary options you can use to address these issues.

• Use automatic format selection (f_auto)
• Set the format when delivering a video

Automatic format selection (f_auto)

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 hotel_buffet scaled down to a height of 280 pixels and delivered as WebM (VP9) to Chrome browsers (336 KB), an MP4 (HEVC) to Safari browsers (349 KB), or as an MP4 (H.264) to browsers that support neither format (505 KB):

Specifying media type with f_auto

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.

By setting f_auto:video, you can ensure that the asset will be delivered in the optimal video format. For example, to deliver the sailing_boat video with automatic format selection, ensuring it is delivered as a video when no file extension is specified:

Tips and considerations for using f_auto

• 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 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).
• Using f_auto in an eager transformation does not eagerly generate derived assets for all formats; see Using automatic format in eager transformations.
• f_auto is not effective if used in named transformations. Learn more.

See also: q_auto for images

Set the format when delivering a video

Using the format parameter (f_ in URLs) you can explicitly choose the format you'd like the video to be delivered in (e.g f_webm) based on your requirements.

For details, see Transcoding videos to other formats.

How to optimize video sizing

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