Thanks to the growing number of mobile devices (a group predicted to reach 1.75 Billion this year) and Google's recent crackdowns - it's no wonder that site speed is at the top of everyone's list these days. Now, if you've already delved into the challenge of getting your site to load within the Google suggested 2 seconds then you know that enemy number one is images. Well, the good news is that I've been researching and working on this issue for well over a year and as a member of SEN, you get the benefit of my late nights.

Within this article I'm going to explain the advanced strategy of combining images using CSS Sprites to dramatically cut the load time of your mobile site. Simply put, by combining some of the images displayed on a page, you can reduce the number of round trips it takes to get those images. This in turn reduces latency as well as the number of bytes that must be downloaded, which gives you a significant speed improvement - especially on mobile devices. Large Web sites such as Google and YouTube leverage this technique, especially for the numerous small images used for navigation elements.

Working Practical Example

We recently ran across a project that needed a handful of manufacturers logos on the bottom of the page. You've seen rows like this before, for example the Hibbet Sports Web site has a row of sports logos like this.

This is a prime example of a few simple images hu...