High Performance Images

Chapter 15. Summary

Colin Bendell and Tim Kadlec

People love images. We make more images than ever and we share more images than ever (22,338 uploaded per second between Facebook, Snapchat, and Whatsapp). The increasing amount of imagery available to us is reflected in user expectations for websites. Sites are expected to be visually rich and compelling, and effectively using imagery is a big part of that. Serving these images to the wide variety of devices and browsers being used, in the most performant way possible, is a big challenge—one we’ve tried to help steer you through in this book.

Throughout the book we’ve looked at why performance matters online and the huge role images play in that performance. We’ve discussed the foundational concepts of digital imagery and how those concepts impact performance and compression. We looked at both lossless and lossy image formats in detail, looking at the role each plays and how to shave as many bytes as possible based on the image type.

We looked at how browsers load these images. Far from being purely about file size, performance can be affected by resource loading in the browser, as well as the device’s memory and CPU. We looked at the challenges presented by responsive images, and how new standards like <picture>, srcset, and Client Hints can help you provide the optimal image no matter the situation.

And we looked at how you can start to put all of this knowledge together to create a plan of attack for your organization that ensures ...