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.

Optimization best practices

This section highlights the most important best-practice guidelines to follow when optimizing your videos. The details of what each of these features does and how to use it, as well as other optimization functionality, are covered in the rest of this page, or on the other pages linked from these guidelines.

• Add q_auto and f_auto to every delivery URL
• Resize to the dimensions you actually need
• Deliver responsive sizes

Add q_auto and f_auto to every delivery URL

Except where noted in the exceptions below, you should generally add q_auto and f_auto (or the SDK equivalent) as the final two components of every delivery URL:

• q_auto (automatic quality) applies the best balance of visual quality and file size.
• f_auto (automatic format selection) delivers each video in the optimal format for the requesting browser.

Together they reduce bandwidth and improve performance with a single, small addition to your URL.

Automatic quality and format example

The original MP4 below is 3.7 MB. Just adding q_auto and f_auto brings the delivered file down to about 0.55 MB (around 85% smaller). q_auto keeps the visual quality nearly identical despite the significantly smaller file size, while f_auto causes most browsers to receive it as WebM (VP9) rather than the original MP4.

Resize to the dimensions you actually need

Use resizing transformations so your video is delivered no larger than the maximum dimensions and resolution your use case requires. Avoid relying on client-side or CSS resizing whenever possible, since it downloads more data than needed.

• Use the c_scale crop mode if you just want to resize for optimization purposes without other changes.
• Choose another crop mode if it better fits your use case.

Resize example

For example, the original video below is 1920 x 1080 px, but it's delivered at 500 x 281 px. The resize happens on Cloudinary's servers before delivery, so even setting aside the q_auto and f_auto that are also applied here, delivering the smaller resized video instead of the full-resolution original is a significant optimization on its own.

Deliver responsive sizes

Use responsive delivery features to serve the right sizes to various desktop and mobile devices across different screen widths depending on the viewport.

For videos, responsive delivery is handled mainly through adaptive bitrate streaming, which automatically adjusts the resolution and bitrate to each viewer's bandwidth and screen. You can also resize to deliver a version sized for the target layout.

Default optimizations

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

Certain plans include the ability to optimize the video format by default (see Optimize by default). All plans let you optimize video quality by default.

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):

Meeting minimum bitrate thresholds

If your delivery pipeline requires videos to meet a minimum bitrate (for example, some streaming systems or ad platforms enforce bitrate floors), you can use constant bitrate (CBR) mode by appending :constant to the bit_rate value. With CBR, the encoder targets the specified bitrate throughout the video, even for scenes that could be efficiently compressed at a lower rate.

For example, to set a constant bitrate of 2500 kilobits per second:

You can also control the video and audio bitrate independently using br_av. For example, to set a constant video bitrate of 2500k and an audio bitrate of 128k:

See also: br (bitrate) in the Transformation Reference

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, most of your users with modern browsers would receive a VP9-encoded WebM or AV1 encoded MP4 file. For browsers like Safari, users may receive an HEVC-encoded MP4 file. If a browser does not support the more optimal 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) or MP4 (AV1) to most browsers (336 KB/244 KB), an MP4 (HEVC) to Safari browsers (349 KB), or as an MP4 (H.264) to browsers with limited support (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.
• AV1 format:
  • If your account plan uses the video seconds metric, AV1 format is automatically supported as a possible f_auto format.
  • If your account plan uses the video bandwidth metric, AV1 is not supported for f_auto by default. To discuss options for getting f_auto support for AV1, contact support.
• f_auto is not effective if used in a named transformation or an incoming transformation, because the format must be resolved per requesting browser at delivery time.

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

Analyze media to improve optimization

After you've applied optimizations, it's worth checking how your assets are actually being delivered so you can catch any that still need attention. Cloudinary gives you two complementary ways to do this. The Delivery Reports in your console surface account-wide data on your biggest bandwidth consumers, while the Media Inspector browser extension analyzes the media on any live web page to pinpoint unoptimized, oversized, or incorrectly sized assets.

Console Delivery Reports

Even after employing as many automated optimization solutions as possible, you may find that some assets and formats are still especially big bandwidth eaters.

Take a look at the Delivery Reports page of the Cloudinary console. From here, you can view detailed information on a variety of data points that can help you understand where to make improvements.

For example, check the Top Assets and Top Delivered Assets sections, to determine whether you can employ file-specific optimizations on these assets. Alternatively, scroll down to the Top Browsers to get an idea of how important each browser is to your users. This can give you insights on the relative value of using newer formats that are only supported on some browsers.

Top Assets Top Browsers

Chrome Media Inspector Extension

Install and use the Cloudinary Media Inspector browser extension to analyze all media assets on your site and identify optimization opportunities. The Media Inspector helps you find unoptimized assets, oversized files, and other performance issues that may be impacting your site's speed and user experience.

Find unoptimized assets

To identify assets that aren't using Cloudinary's automatic optimizations:

1. Click the Cloudinary Media Inspector button in your browser's extensions toolbar.
2. In the Media Overview page, enter !f_auto AND !q_auto in the URL search field to filter for assets that aren't using automatic format and quality optimizations.
3. Optionally, add additional filters like Image or Video in the Content Type field to narrow your search.

The results show all assets on the page that could benefit from adding f_auto and q_auto to their delivery URLs.

Find oversized assets

To identify assets that are larger than necessary:

1. Click the Cloudinary Media Inspector button in your browser's extensions toolbar.
2. In the Media Overview page, enter a size threshold in the Size field, such as >500000 to find assets over 500 KB.
3. Sort the results by clicking the Size heading to see the largest files first.

The information at the bottom of the screen updates based on your filtered results, showing you stats for minimum, maximum, average, and total delivered bytes, in addition to bytes saved.

Find incorrectly sized assets

The Scale Ratio column in the Media Inspector indicates whether your images and videos are being upscaled, downscaled, or displayed with modified aspect ratios. This helps you identify assets that aren't sized appropriately for their display dimensions.

scale ratio = served resolution / display resolution

• A scale ratio of 1.00 means the asset is served at exactly the right resolution for the display, either because it's stored at the correct resolution, or because it's served with Cloudinary resize transformations applied.

• A scale ratio less than 1.00 means the asset is being upscaled, which may cause quality issues.

• A scale ratio greater than 1.00 means the asset is being downscaled. The served asset is larger than required, so delivering this asset uses more bandwidth than required. Consider resizing these assets in the delivery URL so that they're served at the display size.

Mismatched width and height scaling

Hovering over the Scale Ratio shows you the Width Ratio and Height Ratio separately, where:

• width ratio = served width / display width
• height ratio = served height / display height

If the width and height ratios are different, the displayed asset may appear squashed or stretched because the display aspect ratio differs from the source aspect ratio. Consider using a smart cropping method to make your video fit the available space without losing important details.

For more information on using the Media Inspector, see the Media Inspector browser extension documentation.