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

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