These days, videos represent a significant proportion of web and mobile content, which is constantly growing. Because video content is extremely heavy, it is imperative 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 enormous, which means longer upload & download times and very CPU-intensive transcoding and manipulation. The set of potential devices, resolutions, video formats, and video codecs to consider is also large and confusing.
To address these challenges, we will discuss some easy-to-use solutions below:
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. Adjust 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 can be configured on a 1-100 scale. However, instead of defining a specific quality value, you can also use Cloudinary's intelligent quality and encoding algorithm (q_auto in the URL). The algorithm analyzes 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
Further details about this can be found in our automatic quality documentation.
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 existing video formats, 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. More information can be found in our adaptive bitrate streaming documentation.
5. Use incoming/eager transformation
Using incoming transformations to downscale your videos before they're saved on your Cloudinary account 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. Enable strict transformations
You can enable strict transformations on your account to prevent transformations from being dynamically applied to your videos. This will prevent users from altering your URLs to generate and request your videos with any transformation they like. This could have savings implications for transformations, bandwidth, and storage, at the cost of not being able to generate new videos on-the-fly.