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!
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.
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.
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.
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.