Web Development Recipes, 2nd Edition

Recipe 27

Using Sprites with CSS

Problem

With data throttling a concern for many mobile users, the cost of loading lots of images on a phone or other mobile device can quickly add up in terms of time, money, and data. We want to minimize the impact we have on wireless carrier limitations so our users have a good mobile experience without eating up their data plans.

In Recipe 23, ​Targeting Mobile Devices​, we built a mobile interface for the product list from Recipe 9, ​Accessible Expand and Collapse​. We’ve been asked to add some color and graphics to the site. However, we want to make sure that we don’t take up too much bandwidth with our new images, both so we don’t use up our end users’ limited data and to make sure the pages load quickly. ...