The Quest to get Quality Video at Small Sizes for HTML5

Monday, August 18th, 2014

As a video production company, it only made sense that we would be anxiously tapping our toes to try out HTML5’s new Big Video functionality as part of our site redesign. However, as is often the case when art meets technology, it can be difficult to find the middle between high quality work and low file sizes.

image

It’s the pixels. They are just a fickle bunch.

One could just go for broke and put up a huge 30MB file and hope for the best. But accessibility is important. And when it comes to marketing, it should be a priority. Don’t make people wait forever. You’ve got 6 seconds. Make it happen. Plus, there are all the technical needs.  The site needed to load on a variety of browsers, work well on mobile and tablet devices and respond somewhat to varying internet speeds.

And so we did as we always do. Start with a super high quality file, looking sharp and ready for a date with an internet audience, and then we compressed. We used this super helpful guide to from DiveIntoHTML5 to find all the file types needed. Basically, you can cover virtually every browser with an OGG file and an H264 encoded MP4 file. You can add WebM for a few versions of Firefox and IE, but we found it wasn’t as necessary as the first two.

So then it comes down to compression and comparing the quality of the encode to the final file size. We were hoping to get a file below 4MBs with no interlacing and the least possible degradation of the black vignetting effect we were using on the footage. The video itself was 8 seconds long, 1920×1080 at 30 fps, encoded in H264 to save time.

Handbrake was a good place to start. We ended up using the WebM file and Ogg files from this program. They weren’t our priority file type though. We knew that the vast majority of users were going to be seeing the MP4, so were were willing to experiment and compare files for hours to get the right option.

Final Cut’s Compressor was the obvious first stop, but the file sizes were all coming out too big. Even with some manual adjustments to prioritize bit/rate, we couldn’t get a file that was below 4MBS.

MiroVideo Encoder did well with the MP4, but all the other formats were disappointing. We were leaning towards the file it encoded until our programmer had a genius idea. Use Vimeo.

By uploading our original file into Vimeo and downloading one of the compressed options our Pro account afforded us, we got a 3.9MBs file with the least pixel noise and the highest quality depth of black and white color retention of all the versions. Here’s a comparison:

MIRO ENCODE:

image

VIMEO ENCODE:

image

Now this might not seem like much just staring at two virtually identical shots, but look at two things for me. First, the contrast on the Miro version has decreased significantly, whereas the Vimeo version gives you slighly blacker blacks and whiter whites. It’s even more noticeable when you look at the hues in between, like the gray/opaque white lighting across the center of the starfield.

The second thing to notice is the crispness of the picture. While both are still pretty crisp at this size, I think the Vimeo one maintains more of the detail, especially in the highlight crowded areas, like the far right of the screen.

So while Vimeo might not be the first place you look for encoding anything, it’s not surprising to me that their people have figured out a better way to deliver a high quality picture at lower file sizes. If you choose to embark on a website redesign that includes Big Video, I recommend this work around. It’s working for us.