Videos make websites more engaging and lively, promising audience “stickiness” and return visits. However, research studies show that slow startup or playback stalls of video 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% 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, by following three simple tips, leverage Cloudinary to reduce video file size yet still retain a high quality. That is, you set Cloudinary parameters to resize the video dimensions, optimize the compression, and add codec settings for the optimum video format.
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 of them can actually replay 4K videos with that resolution. Resizing videos to 1,080 px., 720 px., or even less pixels saves millions of pixels per frame, concurrently generating gratifyingly smaller files.
Take a 30-second-long, 1,280-px.-wide, and 720-px.-high video that weighs in at 25 MB. Resizing it to 960x540 produces a 10.7-MB video that’s 60% 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—
Video quality is paramount. If compressing videos, that is, combining pixels, for faster 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:
After transformation, the file size of the 1,280-px.-wide video drops from 25 MB to 4.1 MB, an 84% reduction. The 10.7-MB, 960-px.-wide video takes up only 2.3 MB, 78.5% 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 the video quality has 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:
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.
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 result in at least a 50% reduction in file size. Notwithstanding the negligible improvement in startup time, more video is in the buffer at startup, further reducing the probability of stalls.
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.
What if there was a way to learn programming and different technologies through an interactive gamified experience that eggs them on to learn more through point gains? What if you can earn custom items to equip your avatar while you are exploring a ship with fun and engaging objectives to complete?
Supported by intelligent automation, Cloudinary serves as an effective conduit between media asset management and delivery so you can take maximum advantage of assets, compress workflows, and build and coordinate engaging and inspiring customer experiences. Through Cloudinary’s Digital Asset Management (DAM) solution, which employs the company’s innovative image and video APIs, creative and marketing teams can benefit from them, as well as from many AI-powered and automated capabilities. As a result, you can transform, optimize, and deliver media at scale on an intuitive UI.
When was the last time you thought about storytelling? Perhaps while binge-watching your favorite streaming series or when you were inspired by a shopfront’s window dressing? While browsing your and other websites?
With the digital world brimming with content, opportunities abound for brands and retailers to capitalize on it. Complexities have emerged, however. The ultimate question to answer is how to monetize and personalize digital content while also staying ahead of the competition.
Many content creators and consumers tend to regard video as visuals, but that’s only part of the experience. Immersive video content includes strong audio. Just like in a movie, the audio for video content comprises many components: the narrator or subjects, the background music that sets the mood and draws viewers in, sound effects, and so forth.
We all know the good ol', tireless <img> element, which has been a long-time go-to for inserting graphics into webpages. Time doesn’t stop, however, and neither do technological advancements. So, let’s get you up to speed with the element’s modern alternative: the <picture> element.