Cloudinary Blog

Three Tips for Faster, Easier Video Delivery

Three Tips for Faster, Easier Video Delivery

Videos make websites more engaging and lively, promising audience “stickiness” and return visits. However, research studies show that slow startup or playback stalls of videos often leads to visitor loss. In fact, Akamai found that after a two-second delay, each additional second of stalling could cost you a 6-percent depletion of audience.

Not surprisingly, the major factor that accounts for poor video performance on the web is file size because video files probably take up the most bandwidth on your website. For slow network connections, videos might play back faster than they can be downloaded, causing stalls. By optimizing videos for both file size and quality, you reduce the to-be-downloaded content for the same user experience, delivering faster playback with fewer stalls.

This post shows you how to leverage Cloudinary to reduce video file size yet still retain a high quality with only three simple tips. That is, you set Cloudinary parameters to resize the video dimensions, optimize the compression, and add codec settings for the optimum video format.

Webinar
Delivering Compelling Video Experiences at Scale

Resizing Video Dimensions

Oftentimes, raw videos are of a larger file size than is required for an ideal user experience. Even though many mobile devices can record videos in a 4K resolution, very few devices can actually replay 4K videos with that resolution. Resizing videos to 1080p, 720p, or even less pixels saves millions of pixels per frame, concurrently generating gratifyingly smaller files.

Take a 30 seconds long, 1280 pixels wide, and 720 pixels high video that weighs in at 25 MB. Resizing it to 960x540 produces a 10.7 MB video that’s 60-percent smaller. Plus, the video would start playing four times faster!

Resizing videos requires reencoding, which Cloudinary automatically handles once you’ve added a width (w) parameter to the video URL. For example, resizing this video with the w_960 parameter on Cloudinary—

Ruby:
Copy to clipboard
cl_video_tag("rbsp_launch_720p_gz9zfm", :end_offset=>"30")
PHP:
Copy to clipboard
cl_video_tag("rbsp_launch_720p_gz9zfm", array("end_offset"=>"30"))
Python:
Copy to clipboard
CloudinaryVideo("rbsp_launch_720p_gz9zfm").video(end_offset="30")
Node.js:
Copy to clipboard
cloudinary.video("rbsp_launch_720p_gz9zfm", {end_offset: "30"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().endOffset("30")).videoTag("rbsp_launch_720p_gz9zfm");
JS:
Copy to clipboard
cloudinary.videoTag('rbsp_launch_720p_gz9zfm', {endOffset: "30"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("rbsp_launch_720p_gz9zfm", {end_offset: "30"})
React:
Copy to clipboard
<Video publicId="rbsp_launch_720p_gz9zfm" >
  <Transformation endOffset="30" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="rbsp_launch_720p_gz9zfm" >
  <cld-transformation endOffset="30" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="rbsp_launch_720p_gz9zfm" >
  <cl-transformation end-offset="30">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().EndOffset("30")).BuildVideoTag("rbsp_launch_720p_gz9zfm")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().endOffset("30")).resourceType("video").generate("rbsp_launch_720p_gz9zfm.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEndOffset("30")).generate("rbsp_launch_720p_gz9zfm.mp4")

—generated this resized version, which loads and starts playing much faster:

Ruby:
Copy to clipboard
cl_video_tag("rbsp_launch_720p_gz9zfm", :end_offset=>"30", :width=>960, :crop=>"scale")
PHP:
Copy to clipboard
cl_video_tag("rbsp_launch_720p_gz9zfm", array("end_offset"=>"30", "width"=>960, "crop"=>"scale"))
Python:
Copy to clipboard
CloudinaryVideo("rbsp_launch_720p_gz9zfm").video(end_offset="30", width=960, crop="scale")
Node.js:
Copy to clipboard
cloudinary.video("rbsp_launch_720p_gz9zfm", {end_offset: "30", width: 960, crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().endOffset("30").width(960).crop("scale")).videoTag("rbsp_launch_720p_gz9zfm");
JS:
Copy to clipboard
cloudinary.videoTag('rbsp_launch_720p_gz9zfm', {endOffset: "30", width: 960, crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("rbsp_launch_720p_gz9zfm", {end_offset: "30", width: 960, crop: "scale"})
React:
Copy to clipboard
<Video publicId="rbsp_launch_720p_gz9zfm" >
  <Transformation endOffset="30" width="960" crop="scale" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="rbsp_launch_720p_gz9zfm" >
  <cld-transformation endOffset="30" width="960" crop="scale" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="rbsp_launch_720p_gz9zfm" >
  <cl-transformation end-offset="30" width="960" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().EndOffset("30").Width(960).Crop("scale")).BuildVideoTag("rbsp_launch_720p_gz9zfm")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().endOffset("30").width(960).crop("scale")).resourceType("video").generate("rbsp_launch_720p_gz9zfm.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEndOffset("30").setWidth(960).setCrop("scale")).generate("rbsp_launch_720p_gz9zfm.mp4")

Optimizing Video Compression

Video quality is paramount. If compressing videos, that is, combining pixels, for faster video delivery compromises their quality, that’s a lost cause. A common solution is to compress videos with a tool that also ensures that the quality degradation after compression is imperceptible. An example is free and open-source FFmpeg, which does the job by adjusting the Constant Rate Factor with the crf parameter while encoding videos: the higher the crf value, the more the compression. By default, FFmpeg sets crf=23. In general, values up to 28 are perfectly acceptable for the web.

An impressive alternative is Cloudinary, which automatically optimizes quality while compressing videos in all transformation tasks. All you need to do is add the vc_auto parameter to the video URL. See these two examples:

Ruby:
Copy to clipboard
cl_video_tag("rbsp_launch_720p_gz9zfm", :end_offset=>"30", :video_codec=>"auto")
PHP:
Copy to clipboard
cl_video_tag("rbsp_launch_720p_gz9zfm", array("end_offset"=>"30", "video_codec"=>"auto"))
Python:
Copy to clipboard
CloudinaryVideo("rbsp_launch_720p_gz9zfm").video(end_offset="30", video_codec="auto")
Node.js:
Copy to clipboard
cloudinary.video("rbsp_launch_720p_gz9zfm", {end_offset: "30", video_codec: "auto"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().endOffset("30").videoCodec("auto")).videoTag("rbsp_launch_720p_gz9zfm");
JS:
Copy to clipboard
cloudinary.videoTag('rbsp_launch_720p_gz9zfm', {endOffset: "30", videoCodec: "auto"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("rbsp_launch_720p_gz9zfm", {end_offset: "30", video_codec: "auto"})
React:
Copy to clipboard
<Video publicId="rbsp_launch_720p_gz9zfm" >
  <Transformation endOffset="30" videoCodec="auto" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="rbsp_launch_720p_gz9zfm" >
  <cld-transformation endOffset="30" videoCodec="auto" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="rbsp_launch_720p_gz9zfm" >
  <cl-transformation end-offset="30" video-codec="auto">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().EndOffset("30").VideoCodec("auto")).BuildVideoTag("rbsp_launch_720p_gz9zfm")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().endOffset("30").videoCodec("auto")).resourceType("video").generate("rbsp_launch_720p_gz9zfm.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEndOffset("30").setVideoCodec("auto")).generate("rbsp_launch_720p_gz9zfm.mp4")

Ruby:
Copy to clipboard
cl_video_tag("rbsp_launch_720p_gz9zfm", :end_offset=>"30", :width=>960, :video_codec=>"auto", :crop=>"scale")
PHP:
Copy to clipboard
cl_video_tag("rbsp_launch_720p_gz9zfm", array("end_offset"=>"30", "width"=>960, "video_codec"=>"auto", "crop"=>"scale"))
Python:
Copy to clipboard
CloudinaryVideo("rbsp_launch_720p_gz9zfm").video(end_offset="30", width=960, video_codec="auto", crop="scale")
Node.js:
Copy to clipboard
cloudinary.video("rbsp_launch_720p_gz9zfm", {end_offset: "30", width: 960, video_codec: "auto", crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().endOffset("30").width(960).videoCodec("auto").crop("scale")).videoTag("rbsp_launch_720p_gz9zfm");
JS:
Copy to clipboard
cloudinary.videoTag('rbsp_launch_720p_gz9zfm', {endOffset: "30", width: 960, videoCodec: "auto", crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("rbsp_launch_720p_gz9zfm", {end_offset: "30", width: 960, video_codec: "auto", crop: "scale"})
React:
Copy to clipboard
<Video publicId="rbsp_launch_720p_gz9zfm" >
  <Transformation endOffset="30" width="960" videoCodec="auto" crop="scale" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="rbsp_launch_720p_gz9zfm" >
  <cld-transformation endOffset="30" width="960" videoCodec="auto" crop="scale" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="rbsp_launch_720p_gz9zfm" >
  <cl-transformation end-offset="30" width="960" video-codec="auto" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().EndOffset("30").Width(960).VideoCodec("auto").Crop("scale")).BuildVideoTag("rbsp_launch_720p_gz9zfm")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().endOffset("30").width(960).videoCodec("auto").crop("scale")).resourceType("video").generate("rbsp_launch_720p_gz9zfm.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEndOffset("30").setWidth(960).setVideoCodec("auto").setCrop("scale")).generate("rbsp_launch_720p_gz9zfm.mp4")

After transformation, the file size of the 1280-pixel-wide video drops from 25 MB to 4.1 MB, an 84-percent reduction. The 10.7-MB, 960-pixel-wide video takes up only 2.3 MB, 78.5 percent less than before. Both videos start up faster with more content in the buffer, rendering stalls during playbacks less likely.

You must be wondering: how has the video quality changed? As a rule, quality is measured with these three tests:

  • The Structural SIMilarity (SSIM) index
  • The Peak Signal-to-Noise Ratio (PSNR)
  • The Video Multimethod Assessment Fusion (VMAF) metric

The following table shows the values of the two example videos above:

Dimensions SSIM PSNR VMAF
1280x720
    0.985
    45.4
    89.6
960x540
    0.985
    45.1
    88.8

All the values fall within the acceptable limits, testifying to the fact that size reduction along with compression only minimally impacts the visual quality of the videos. Still, do test your post-compression videos to ensure that their quality meets your standards.

Identifying the Optimum Video Format

Finally, pinpoint a video format that best satisfies your requirements. The tests described in the preceding section were on H.264 MP4, an old yet popular format that works on almost all browsers. WebM with its VP8 and VP9 encodings are newer formats that deliver similar quality with smaller-sized videos. However, those two formats don’t work on certain browsers.

Reencoding videos with Cloudinary requires only changing vc_auto in the URL to vc_vp8, vc_vp9, or vc_h265. Cloudinary’s optimization capabilities for video delivery are at least 50-percent smaller in file size. Notwithstanding the negligible improvement in startup time, more video is in the buffer at startup, further reducing the probability of stalls.

Summing Up

As explained in this post, Cloudinary can, with these three simple, intuitive tips, downsize a video from 25 MB to 1.7 MB, 93% smaller, with no perceptible loss in visual quality. The time savings in downloads and startup in addition to fewer stalls during playbacks are all too obvious and significant. Do give those helpful features a try with your video delivery.

Note
For an even deeper dive into faster video delivery, view Doug's analysis here


Doug Sillars Doug Sillars s a freelance mobile performance expert, having helped thousands of developers speed up their mobile apps and websites. A Google Developer Expert and the author of O’Reilly’s “High Performance Android Apps”. Doug has spoken at developer conferences in the US and Europe, and blogs regularly at  dougsillars.com. You can also find him at @dougsillars on Twitter.

About Cloudinary

Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.

For more information, visit www.cloudinary.com or follow us on Twitter


Further Reading on Video Manipulation

Recent Blog Posts

New Learning Pathways From the Cloudinary Academy

In December 2019, Cloudinary launched its customer education platform, the Cloudinary Academy, replete with courses taught by the company’s experts on developer-oriented products and digital asset management (DAM) solution. The courses comprise interactive lessons and hands-on assignments, a proven way of familiarizing the audience with the course material and illustrating it with live examples.

Read more
Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more