CSS Sprites

CSS Sprites

One of the most effective ways of limiting page-load time is to cut down on the amount of images your website uses (and subsequently requests made to the server). What better way to speed up a webpage, than with some CSS image spriting?

What are CSS Sprites?

If you're familiar with video games, the first image that might come to mind when hearing the word "sprites" is probably a character from Zelda, Super Mario Bros. or Final Fantasy. In the 8-bit era of gaming, developers would map out and create a single image grid consisting of hundreds of graphics.

As opposed to retrieving hundreds of individual graphics every "screen", game developers would load a single "sprite" and simply crop particular sections of the grid, and display only the graphics that were required on that particular screen. CSS Sprites are no different. The result is as simple now as it was then: retrieving and loading a single image is much more efficient (and faster) than loading thousands, hundreds, or even just dozens are individual images.

When Not to Use CSS Sprites

The only time you shouldn't use CSS sprites is when you want particular images to be individual, stand alone, or viewable. Examples of these types of images are: logos, photos, avatars, product imagery, blog imagery, etc. You want to keep this imagery as it's own file because it deserves it's individual recognition by search engines.

When to & Why Use CSS Sprites

Why use CSS sprites? As mentioned before, it's faster. Over 80% of page-load is spent retrieving page assets such as images. Not only that, but by combining layout elements, it's a lot easier to manage a single .PSD file than 25.

Photoshop slicing is a technique taught to (and sadly used by) most users of Dreamweaver. Even with just a basic design, your image slicing will assuredly render at least 30 images and thus require over 30 additional HTTP-Requests. These same users most likely utilize Dreamweaver's poorly written (and unnecessary) javascript method of "image swapping" to create hover effects. This is just yet another example of why you can't build a "professional" website using applications and services like Dreamweaver. Luckily, with CSS sprites you can ditch both bad habits and create a faster loading website in the same process!

By combining all of your element and layout-based images into a single file, you'll cut down your page-load considerably and rid yourself of the need for some ugly javascript image-swapping in the process. 

How to Create a CSS Sprite

Creating a CSS Sprite is simple. What you'll first need to do is to combine your graphics into a single file (as seen below), and also space them out evenly. I always use intervals of 5px, making it easier to map out an organized sprite grid.

The File/PSD

How to Create a CSS Sprite

The CSS

Secondly, you'll need to integrate the associated CSS. Remember how the game developers would "map" the image grid and then "crop" the needed imagery? Well, we've already mapped the sprite, and our version of cropping is simply setting individual background-position styles of our individual elements.

  1. /* Social Media
  2. ---------------------------------*/
  3. #social_media{ float: none; clear: both; }
  4. #social_media a{ width: 40px; height: 40px; display:block; background:url("/images/site/sprite.jpg") -9999px -9999px no-repeat; }
  5. #social_media a.facebook{ background-position:0px 0px; }
  6. #social_media a.twitter{ background-position:-40px 0px; }
Integrate Hover Effects

Remember those hover effects you most likely used with javascript (or the clunky Macromedia MM_swapImage #gross)? Let's kiss those goodbye with a simple CSS :hover selector.

  1. /* Social Media
  2. ---------------------------------*/
  3. #social_media{ float: none; clear: both; }
  4. #social_media a{ width: 40px; height: 40px; display:block; background:url("/images/site/sprite.jpg") -9999px -9999px no-repeat; }
  5. #social_media a.facebook{ background-position:0px 0px; }
  6. #social_media a.facebook:hover{ background-position:0px -40px }
  7. #social_media a.twitter{ background-position:-40px 0px; }
  8. #social_media a.twitter:hover{ background-position:-40px -40px; }

Easy enough, right? Utilize CSS Sprites throughout your entire websites and soon your page-loads will be snappy while your website visitors (robots, search-engine crawlers, and customers alike) will be grateful!

Tags

Add Comment

Leave a Comment or Reply
Fuel the conversation with your thoughts using the form below. Email is not made public.
× Processing...

Please Wait while your Comment is being Processed.

*
*
*

Comments 0 Total Responses