How can I optimize my videos?

These days videos represent a significant proportion of web and mobile content, which is constantly growing. As video content is extremely heavy, one must make sure to deliver this video content in the most optimized way.

The challenges developers face with videos on their websites tend to be quite complex. The video files can be huge, which means longer upload & download times and very CPU-intensive transcoding and manipulation. The set of potential devices, resolutions, video formats, and video codecs is large and confusing. 

This article will address these challenges and offer easy-to-use and implement solutions:

1. Scale videos to display size

The most efficient way to downscale your videos and improve their performance is to resize them so they'll fit your site/app-specific design.

If it suits your use-case, you can also perform the resize before you save the video to your Cloudinary account using incoming transformations, to also save storage space.

2. Automatic Video Quality

Cloudinary allows you to control the video quality - the higher the quality is, the heavier the resulting video is, and vice versa. Quality is configured on a 0-100 scale. However, instead of defining a specific quality value, you can use Cloudinary's intelligent quality and encoding algorithm (q_auto in the URL). The algorithm analyses each video to decide on the optimal encoding characteristics that will produce the best visual quality while minimizing the file size. For example, http://res.cloudinary.com/demo/video/upload/q_auto/dog.mp4

For further control of the automatic quality selection, https://cloudinary.com/documentation/video_manipulation_and_delivery#automatic_quality

Note: When applying any transformation to a video, unless q_auto is explicitly requested, Cloudinary automatically sets the quality to 70 and the video codec to automatic for the derived video. 

3. Automatic 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. 

Using the "format" parameter (f_<format>) you can explicitly choose the format you'd like the video to be delivered in (e.g f_webm). Another option would be to utilize Cloudinary's smart algorithm in order to automatically choose the most suitable delivery format by using f_auto. This way, Cloudinary will choose the most suitable video codec and format according to the requesting browser.

Important Note: When using f_auto, a derived resource for each format is created. This could be reflected in the transformations and storage usage quota. In addition, you may consider creating the derived resources in advance - either upon upload (using eager transformations) or after upload (using the explicit method).

The automatic format feature is available for all new accounts and is being rolled out for existing accounts - you can easily check whether your account has this feature enabled by using it to deliver an MP4 video in Chrome - if the video is delivered as WebM, the feature is enabled, otherwise, it usually means that the feature is not yet enabled for your account. In that case, feel free to contact Cloudinary Support in order to have it enabled.

4. 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. For more information - http://cloudinary.com/documentation/video_manipulation_and_delivery#adaptive_bitrate_streaming_hls_and_mpeg_dash.  

5. Use incoming/eager transformation

Using incoming transformations to downscale your videos before they're saved on your Cloudinary account. This can save you some precious storage for large videos when the original video is disposable. 
Another option is using eager transformations to pre-generate the derived images and pre-warm the cache to save your user the time waiting for your videos to process and load. 

6. Restrict transformations

You can enable Strict Transformations on your account to prevent transformations from being dynamically applied to your videos. This might save you on transformations (quota), bandwidth, and storage.