Trend: Using Sprites to Optimize CSS Code

When I was in my 6th grade computer literacy class (yes, computers existed back then) I first heard the word “sprite” (no… not the drink or the preternatural legendary fairy creature) while learning this ancient educational program called Logo. Logo basically revolved around giving a turtle (not a real one) some neato commands to draw an image on the computer screen, REPEAT 4 [FD 100 LEFT 90] – I just blew your mind right there by drawing a square. You weren’t ready for that. Boom!

Thanks. That’s the end of my post. Goodnight folks! No really, what I wanted to write about is the development trend of using CSS sprites, which sounds pretty fancy but in reality is just a way of writing optimized CSS that utilizes one central image composed of numerous other images positioned differently across multiple CSS declarations. Translation: Loading an image once, then moving the image around to only show the specific portion you want to see instead of using a bunch of separately sliced up images in your CSS.

Why should you care? Mainly because using CSS sprites:

  1. - Requires less CSS code, which means smaller file size
  2. - Requires less HTTP server requests loading different images, which means quicker load time
  3. - No wacky JavaScript preloaders to ensure all images load
  4. - No annoying white flickering due to load time when hovering over button

And drum roll please… all of the above adds up a better overall user experience for your website visitors and a shiny gold star for you for being the best you can possibly be with your awesome CSS skills.

Learn More Here:

In a blind taste test 9 out of 10 sprites chose Sprite!

In a blind taste test 9 out of 10 sprites chose Sprite!