High Performance Images

High-quality images have an amazing power of attraction. Just add some stunning photos and graphics to your website or app and watch your user engagement and conversion numbers climb. It can be tricky, but with this practical guide, you’ll master the many facets of delivering high performance images on the internet―without adversely affecting site performance.

You’ll learn the nuts and bolts of color theory, image formats, storage and management, operations delivery, browser and application behavior, the responsive web, and many other topics. Ideal for developers, this book also provides useful tips, tricks, and practical theory for processing and displaying powerful images that won’t slow down your online product.

• Explore digital image theory and the different formats available
• Dive into JPEGs, SVG and vector images, lossless compression, and other formats
• Use techniques for downloading and rendering images in a browser, and for loading images on mobile devices and cellular networks
• Examine specific rendering techniques, such as lazy loading, image processing, image consolidation, and responsive images
• Take responsive images to the next level by using content negotiation between browser and server with the Client Hints HTTP standard
• Learn how to operationalize your image workflow
• Contributors include Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle, and Mike McCall from Akamai Technologies.

Table of Contents

Capter 1. The Case for Performance

Part I. Image Files and Formats

Chapter 2. The Theory Behind Digital Images

Chapter 3. Lossless Image Formats

Chapter 4. JPEG

Chapter 5. Browser-Specific Formats

Chapter 6. SVG and Vector Images

Part II. Image Loading

Chapter 7. Browser Image Loading

Chapter 8. Lazy Loading

Chapter 9. Image Processing

Chapter 10. Image Consolidation (for Network and Cache Efficiencies)

Chapter 11. Responsive Images

Chapter 12. Client Hints

Chapter 13. Image Delivery

Chapter 14. Operationalizing Your Image Workflow

Chapter 15. Summary

Appendix A. Raster Image Formats

Appendix B. Common Tools

Appendix C. Evolution of <img>

About the Authors

Colin Bendell is part of Akamai’s CTO Office, where he focuses on web performance. He speaks to global audiences about images, mobile, and web development while also trying to imagine six impossible things before breakfast. Colin has a Masters degree in Business and has worked in a variety of industries, including roles in software development for real estate to managing the Infrastructure and Operations for Cameco, the worlds largest uranium mining company. He is also an accomplished entrepreneur and former owner of KelvinsWheel, an automotive wheel repair shop. His musings and writings can be found at http://bendell.ca.

Tim Kadlec is the head of developer relations at Snyk―a company focused on making open code source more secure. Prior to that, he was a developer advocate at Akamai. He is the author of Implementing Responsive Design: Building sites for an anywhere, everywhere web, and was a contributing author for Smashing Book #4: New Perspectives on Web Design, and the Web Performance Daybook Volume 2. Along with Katie Kovalcin, he also co-hosts The Path to Performance Podcast.

Yoav Weiss has been working on mobile web performance for longer than he cares to admit. He takes image bloat on the web as a personal insult, which is why he joined the Responsive Image Community Group and implemented the various responsive images features in Blink and WebKit.

Yoav is now working at Akamai as a Principal Architect, focused on making the web platform faster by adding performance-related features to browsers, as well as working on server-side optimizations.

When he’s not writing code, Yoav is probably slapping his bass, mowing the lawn in the French countryside, or playing board games with his family.

Guy Podjarny (@guypod) is a web researcher and entrepreneur, constantly aiming to make the web faster and safer. Guy is currently cofounder at Snyk.io, focusing on securing open source code. He was previously CTO at Akamai and founder of Blaze.io (acquired by Akamai). Prior to that, Guy led dev and product for the first web app firewall and security code analyzer. Guy is a frequent conference speaker, the author of Responsive & Fast (O’Reilly 2014), and the creator of Mobitest, a mobile performance testing agent.

Nick Doyle is a software developer at Akamai on the Image Manager team, focusing on image transformations and optimizations. Previously, he worked on the Front End Optimization product with Blaze and Akamai, working on optimization development and web performance. Before Blaze, he worked with IBM on their Java Virtual Machine. When not optimizing the internet, Nick makes noise with modular synthesizers; sometimes it even sounds like music.