How to Use CSS Sprites to Slash Image Load Time
 by John Heard

How to Use CSS Sprites to Slash Image Load Time — by John Heard
YouTube Sprite Example
Portion of Sprite
from YouTube

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.

Hibbet Sports Brand Logo Bar

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

Already a member? Sign in here

Read the rest of this article,
and get all this for only $1.

  • The Search Engine Strategies Updates for February 2021
  • SEN's Monthly Marketing Podcast for Strategies on the Go
  • Ultimate Guide to Avoiding Google Penalties
  • The Complete Site Audit Checklist
  • The Definitive Local Search Audit Checklist
  • 100's of Strategic SEO Articles and Q&As
  • The Internet Marketing Glossary
  • The Pro SEO's Local Search Directory List
  • 2019 Unfair Advantage SEO Beginner's Book
  • Pro's Ultimate WordPress Plugin Guide
  • The Vault: SEN's Internet Marketing Research Libraries
  • PLUS, as a Full SEN Basic Member, you'll be eligible for hundreds of dollars of discounts on SEO courses ranging from beginner to master on a variety of topics including organic search, local search, and social networking.

  • Your $1 Trial is good for 7 days at which time your card will be charged $29/mo unless you cancel before March 4th, 2021

 This form is encrypted for your security