O'Reilly logo

High Performance Images by Mike McCall, Nick Doyle, Guy Podjarny, Yoav Weiss, Tim Kadlec, Colin Bendell

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

If you’ve ever had to move from one home to another, you know that moving day is long and grueling. You quickly realize that you want to minimize the number of trips from your apartment to the moving truck. If you took one small box each trip, you’d spend more time going back and forth than actually loading the moving truck. Therefore, carrying more boxes in each load reduces the number of trips back up the stairs and brings that much-deserved beer that much closer. At the same time, there is a limit. Good luck trying to carry eight cartons of books in one load. An extra trip is better than a broken back.

This is the same challenge with loading images in a browser or app. In order to optimize the delivery we need to address either the number of requests or the payload per request. This is particularly true for small images. A useful technique is to consolidate images, thereby reducing requests and making each request more effective. This chapter explores how to achieve high performance for the smaller images using techniques like spriting, web fonts, and inlining.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required