Cloudinary Blog

Top 10 Mistakes in Handling Website Videos and How to Solve Them

10 Website Videos Mistakes and How to Solve Them

It should come as no surprise that video use on the internet is exploding. You can see the dramatic growth of video on the average site in this SpeedCurve blog post.

Average Website Weight over Time

With the growth in video comes greater bandwidth use, which is not only costly for your IT budget, but for your visitors as well. Beyond the expense, there is the user experience to consider. The heavier the page, the longer it will take to load, and the greater likelihood visitors will abandon your site. Page load speed is also an important factor in SEO ranking, so clearly video is something we need to take seriously and get right. Video is challenging, presenting terms still unfamiliar to developers - like codecs, bitrate and adaptive bitrate streaming. As a result, mistakes are being made in video implementation.

Cloudinary solves a large number of common video issues. For developers who are not yet using Cloudinary, we thought it might be helpful if we reviewed some of the video challenges we encounter on a daily basis and how they can (and should) be solved:

1) Using the wrong video resolution

Probably the most common error we encounter is videos being delivered at a resolution that is way too large for how it is being displayed. Just like with images, it's a waste to deliver more pixels than the browser can render and rely on browser-side resizing.

Encoding video is time consuming, and there are not many solutions that will do this for you in an efficient manner. So what does a developer do? Typically they take what they have, reference it in a <video> tag on the page, and move on to other, easier things. This is extremely common too. Take this example from the yahoo.com homepage. The container for the video is 215 pixels wide, while I'm getting a video 1080 pixels wide. What a waste!

yahoo! video

While the results will look the same either way, encoding the video at the proper size on the server can save a tremendous amount of bandwidth, each additional pixel sent down to the browser that it can't render is wasted bytes.

2) Using the wrong video codec

Similar to the above, developers unfamiliar with video will take the approach of just using what was given to them and throwing it on the page. Oftentimes this can result in using a codec that is not optimized for the web, wasting bytes again. Think of codecs like you would image formats. An image will have vastly different weights while looking nearly the same whether it’s a .jpg,.png, .gif or .tiff.

Video codecs are similar, so you want to make sure you're choosing the right tool for the job. The old H.264 video codec standard is supported by every browser and was made for web video delivery, so at the very least you should be encoding your web videos as H.264 video codec.

3) Using too high a video bitrate

Bitrate is simply the number of bits it takes to encode 1 second of video. Take the total number of pixels in a frame, multiply by the frames per second, then multiply by the bytes per pixel to get the bitrate. Just like the quality setting on images, using too high of a setting can result in a heavier file for no perceived difference in visual fidelity. Since your bitrate is a function of the resolution, I'd find the resolution you need, then find the bitrate multiplier that results in the visual fidelity you desire. Going forward you can repurpose that multiplier when encoding at different resolutions. Or you could simply use Cloudinary to do this automatically.

4) Not using adaptive bitrate streaming

Have you ever been watching Netflix or YouTube and notice the quality change? Suddenly your crisp and smooth video became grainy and choppy? If so, you have witnessed Adaptive Bitrate Streaming in action. This is the practice of encoding a single video at multiple bitrates/resolutions and letting the video player determine which one is most appropriate for the visitor based on their screen size and bandwidth availability. Instead of buffering, or downloading a video that too large for the display, each visitor will get the right resolution/bitrate and it will adapt if network conditions change mid-stream. This approach should only be used for longer form videos and is unnecessary for short videos, such as those shorter than 20 seconds or so.

5) Not using modern video codecs

I mentioned the H.264 codec above, but there are actually more modern and efficient codecs that you can use! Codecs such as VP9 and H.265 are anywhere from 30% to 50% more efficient, so they can't be ignored if website performance is something you care about. This is analogous to the WebP, JPEG 2000 and JPEG XR image formats, which are more efficient than the old standby, JPG, but not universally supported. Luckily it's pretty easy to take advantage of these modern codecs without writing a ton of conditional logic to figure out which one to present to which user. Read on!

6) Not presenting multiple codec options

Recently we wrote about optimizing video by choosing the correct codec. The cool thing about the HTML5 video player is that you can present it with multiple video options, and it'll play the first one it knows how to play. This makes it super simple to present multiple codecs and let the browser pick the most efficient one it knows how to play. If you're serious about user experience and saving money, this is one of the easiest ways to do both.

7) Using the wrong bitrate for the content

Ever watch an action scene or football game is the content is choppy? That happens when the bitrate was set too low to account for all the movement in the scene. One of the methods codecs use to compress video content is sharing pixel information across frames. In action scenes, where things are moving around a lot, there's not a ton of information that remains common across frames. In this situation, you may consider reducing the video resolution while maintaining a higher bitrate than usual.

On the flip sides, there are boring scenes as well. A high bitrate probably isn't required for movies like “Driving Miss Daisy,” even at higher resolutions. Additional savings could be realized by encoding video content like this at a lower bitrate than usual.

8) Not muting autoplaying videos

Browsers today do not autoplay video unless they are muted. Chrome released the muting requirement in April 2018 and there are still video banners sitting static out there today. So, for any hero background video, or any other video you want to play automatically upon page load, make sure that you add the "muted" attribute to the video tag, like this:

<video autoplay muted>
...
</video>

Also, if your video isn't autoplaying on mobile devices, and you want it to, make sure to add the "playsinline" attribute:

<video autoplay muted playsinline>
...
</video>

9) Using a heavy video player instead of the HTML5 video player

Any specialized video player requires an extra download for the user. These video players are plugins and add some awesome functionality, like adaptive bitrate streaming support, analytics events, clickable hotspots, 360 video support and other features that are necessary if you can't provide the experience otherwise.

For things like video hero backgrounds or small short form video clips though, they are overkill and completely unnecessary, resulting in more wasted bytes as the user has to download the player. The HTML5 video player is actually quite good and can probably serve the needs of most of the video content on the web. Read more here!

Of course, for those times when you need a video player, Cloudinary offers a free, open-source player based on Video.js you are encouraged to use.

10) Using a GIF instead of a video

Animated GIFs are pretty awesome. Short, often funny, video clips add context that a still image just can't. GIF is a pretty amazing format -- in fact, it was actually the very first web-friendly image format! On the flip side, however, the format is aging and hasn't kept up with the times. The last update to GIF was 29 years ago! GIFs can be extremely large, several megabytes for a small clip.

The solution? Convert these to video formats! Modern video codecs are designed from the beginning to be web-friendly, bandwidth-efficient methods of presenting moving pictures. While we salute the GIF format and look at it with reverence, we are doing a disservice to ourselves and our visitors by continuing to use it when better alternatives exist.

GIF (2.83MB)

Office chair race. Young guys have fun in the office during a break. Games of businessmen from large offices. Men celebrate a successful deal and throwing papers up.

Video (51kb)

Final Words

In this article, we've tried to list the most common video-related website issues we encounter at Cloudinary on a daily basis. While it certainly does not address every issue, we did our best to highlight the ones that are most cost effective to solve and offer a general explanation from which you can do further research to find a solution that works best for you.

If you haven't heard about Cloudinary yet, you will be happy to know that we have already solved all of the issues described above and then some. Every video uploaded to Cloudinary can be dynamically transformed to any size, format, codec and quality, so you're able to easily test different settings that best fit your website and user expectations. All videos are delivered from a fast CDN using correct cache settings, employing every best practice in the book. Finally, Cloudinary's cloud-based, dynamic video capabilities are a perfect fit for responsive design to OTT.

Cloudinary actually offers much more than that, managing your video and image uploads and cloud-based storage and is free to sign up. Check out Cloudinary, and let us know what you think. Also, if we've missed anything crucial in the list above, please tell us about in the comment thread below. Much appreciated!

Recent Blog Posts

Auto-Generate Video Previews with Great Results Every Time

If you are an avid YouTube viewer or a Netflix binger, you might have noticed some fascinating changes in their latest preview thumbnails. They sure are attention grabbing, aren’t they?

Video previews are becoming more and more popular, not the least because they entice viewers, attract clickthroughs and, more often than not, gain a happy and loyal audience. Problem is, the task sounds like an art in itself. Just how can you go about creating appealing video previews without having to rely on movie professionals? Have you ever wished that you could quickly create video previews like those on YouTube and Netflix, but still rest assured that they'll include the good stuff?

Read more
Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more