Photo by pitrisek at deviantART
I debated about writing on this topic here, because I am trying to keep the tech topics on the more basic side of things to the extent it is possible, and I’m not sure that CSS Sprites are something that most beginning users of CSS and (even) html are going to be delving into in the near future. Basically, CSS Sprites are not a required skill for web design by any stretch of the imagination, and even though I have seen them mentioned a bazillion times on all of the various websites I read, I didn’t really know how to use them until I read this great post (by Chris Coyier at CSS Tricks) and was able to understand what they were and why to use them. And then, after I read the post, and tried out the techniques on my site, I decided that everybody should know about CSS Sprites, even if they’re not going to use them today, because as you progress in your web design experimentation, you will WANT to use them, because they are so damn cool. If you have an image-heavy design already, you should consider using the techniques outlined in the post above immediately. If not, read these tips just so you know what they are when you next run across them.
- CSS Sprites are a way of consolidating images on your website. If you have an image-heavy design, like my design on the main blog of ABDPBT is becoming as I redesign it, this can slow down your site’s load time. Every time you load an image, you have to send another request to the server, and this slows everything down. CSS Sprites are a means of consolidating a bunch of images in one, so that your page only has to make one request, or fewer requests, than it would otherwise.
- CSS Sprites use CSS to direct your browser to the correct image. Whereas without CSS sprites, your images are loaded directly to the spot where you’ve coded them, with CSS Sprites, you load one background image, and each area just positions it differently. So you can have a background image that is used a bunch of places on the site that is being directed from just that one instance on the CSS Sprite.
- CSS Sprites would be a lot of work, if it weren’t for Sprite Me, which does everything for you! Now that people have been using CSS Sprites for a while, there are all kinds of nifty tools to use to make them easier. For example, Sprite Me, which will read your page, make suggestions for images that can be consolidated into a sprite image and then creates both the image AND tells you what CSS to change, and where! BOOYAH! With Sprite Me, you can use CSS Sprites even when you’re kind of a novice, like me.
TWEET THIS
