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 it 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.
Below is a quick video that demonstrates how you can easily optimize your videos using Cloudinary, followed by a detailed list of easy-to-use solutions:
Scale videos to the 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, which will also save some storage space.
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, your product environment’s default video quality setting will be used.
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, 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.
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 using eager transformations upon upload or using the explicit method for already uploaded assets.
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.
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 videos and pre-warm the cache to save your user the time waiting for your videos to process and load.
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.
Comments
0 comments
Please sign in to leave a comment.