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!

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 Evolution of the Role of Software Developers

Since the early 1990s, I’ve been watching with interest and intrigue the rapid evolution of the software industry and its developers, which ushered in the Internet age in the meantime. I’d like to share with you my observations on that subject. Because of the breadth and complexity of the related topics, I’ll chronicle them in a series of posts, starting with this one.

Read more
StubHub Finds Ticket to Effective Digital Asset Management with Cloudinary

As StubHub evolved from a lightweight website to one that was rich with images, videos and custom views from seat locations at event venues around the world, it sought a way to streamline image management. The company implemented Cloudinary, which enabled it to significantly reduce the time required to manually edit images, while ensuring that the key focal points of each image were viewable in more than 30 viewports across a multitude of devices. Cloudinary’s digital asset management capabilities also have helped StubHub better protect its content, creating a single repository that ensures developers and designers have access to only the most current images and understand the associated brand guidelines.

Read more
The Visual Media Report: Visual Engagement and User Experience

With privacy top of mind, we wondered what we might learn from analyzing the large volume of data. What user behaviors would we discover, what regional differences might exist? What insights or early hints from different industries could we extrapolate? These questions guided us as we analyzed millions of anonymous end-user experiences and asset interactions across our platform.

Read more