High Performance Images

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

Colin Bendell

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.

What About HTTP/2?

Many of these solutions for small images have been cultivated in an HTTP/1.1 world. Some have argued that consolidation is an antipattern in an HTTP/2 world. This is not the case; at worst, it will not degrade performance. However, there are many reasons why consolidation is still relevant in an HTTP/2 Internet.