Cloudinary Blog

Digital Nomad With a Chance of Streaming Videos

Optimizing Video Streaming and Delivery: Q&A with Doug Sillars

Doug Sillars, a digital nomad and a freelance mobile-performance expert, answers questions about video streaming and delivery, website optimization, and more.

Doug Sillars, a freelance mobile-performance expert and developer advocate, is a Google Developer Expert and the author of O’Reilly’s High Performance Android Apps. Given his extensive travels across the globe—from the UK to Siberia—with his wife, kids, and 11-year-old dog, Max, he has been referred to as a “digital nomad.” So far in 2018, Doug has spoken at more than 75 meetups and conferences!

Webinar
Delivering Compelling Video Experiences at Scale

Recently, Doug held an interesting Ask Me Anything (AMA) on The Practical Developer. We had the opportunity to speak with him and dig in further on some of the topics he touched on during that AMA.

What would be the first item to work on when optimizing a website or mobile app?

Every site is different but I’d run it through webpagetest.org on both a mobile device and a desktop and see what comes up. Often, there is excess JavaScript, CSS, and code that you can optimize. In particular, take a good look at the Lighthouse reports on images. Images make up 40-60% of the payload on a website, so optimizing them can dramatically reduce the payload and thus speed up your site. If your page is really long with a lot of images, consider lazy-loading techniques.

When delivering images, how do you prevent users from downloading unnecessary pixels?

Optimizing images is really easy. Tools like Cloudinary make it even easier. Start with making your images responsive (smaller sizes for smaller screens) to accommodate your mobile users. That’s the easiest way to remove excess pixels.

The image-quality setting removes pixels in the resized image, averaging the colors inside the image. Even though reducing the number of pixels lowers the quality, you can do it in such a way that the human eye cannot tell the difference. Lighthouse recommends Quality=85% but SSIMULACRA can get it to the exact point of human perception, often saving hundreds more KBs.

What’s wrong with animated GIFs?

Animated GIFs add a lot of fun to online content, including social media. However, on the downside, they are huge files. Since their format was devised in the 1980s (perhaps older than some of the readers of this post), animated GIFs are a flip book of images being played at whatever the frame rate of the animation is. That means that, unlike videos, no compression occurs on the time axis. Delivering a movie as an animated GIF can make the file two to four times larger. Luckily, Colin Bendell shows how to serve looping movies as described in his post Evolution of : Gif without the GIF.

What are the best ways to leverage videos on mobile sites?

Great question! For images, you can use media queries to serve different-sized ones based on screen size. You can’t do that with videos. The easiest solution is to serve exactly the same video to both mobile and desktop but please don’t do that. You could write some simple JavaScript to determine which videos to play, that is, big screens get big videos and small screens get smaller ones, or you could stream the videos. In the past, you would need a streaming server but, with HTTP Live Streaming (HLS), you can host the files on any server.

The great thing about streaming is that the player on the device has an idea of the network speed and knows the screen size. That means the player can choose the best playback file for any of your videos.

Streaming is becoming more and more popular. What are some ways to make sure that it doesn’t impact site or app performance?

As I mentioned before, streaming can really help with adjusting the bitrate and quality to best account for the device and its network conditions. That’s already a huge improvement from just sending the same 1080p MP4 video to all users.

We can do better, though. To ensure fast startup, choose one of the lower-quality bitrates to begin streaming. That way, the video might not be gorgeous but it will start faster. And when choosing bitrates—tools like Cloudinary would create them for you—be sure that the bitrate changes are fairly evenly sized, thus enabling a more smooth transition during playback should network conditions change.

Recent Blog Posts

The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more

Building Display Ads With Transparent Video

By Afzaal Ahmad Zeeshan
Build Web Ads With Transparent Video to Attract User Engagement

Billions of views on the Internet every day drive one of the biggest industries on the planet: advertising. The sheer size of that market and the competitive nature of vying for consumer attention results in a constant need for innovation. Readers are jaded, and display ads are blind spots.

Read more
How Cloudinary's Media Optimizer Helps E-Businesses Deliver Superior Web Performance

As a technology company, Cloudinary owes its success to its ability to build solutions that address the most critical challenges you, our customers, face. The companies we serve run the gamut of digital businesses—retailers and direct-to-consumer brands, media and entertainment, travel and hospitality—which, coincidentally, all care about the same things.

Read more
How to Auto-Tag Video With Markers on Cloudinary for Easy Navigation

A picture is worth a thousand words, and that also holds true for video, one minute of which, according to Dr. James McQuivey of Forrester Research, is worth 1.8 million words. That's why online stores rely on rich media to promote products and sales. Images and videos impart a real sense of involvement with a purchase—a car, a vacation getaway, an apartment rental—setting your business apart from the competition.

Read more