SpriteMe – Combine images and get fewer HTTP requests

Those of you that care about website performance have probably read about combining images, something that’s called “CSS sprites”. The idea is that by using the same (somewhat larger) image several times, you get fewer HTTP requests to your site, and therefore speed it up. Problem is, most of your images are CSS background images, that are positioned using clever background-positions and repeats.

Now, this makes to tricky to combine images. Something that repeats horizontally can’t be combined with something that repeats vertically (unless there’s transparency involved), and wide images can’t be combined with narrow ones. So combining is usually tedious, manual work, both to combine the images and then calculate the new background-positions required.

Lucky for us then, that there is a tool called SpriteMe, available as a bookmarklet (a bookmark containing javascript), and as an excellent online demo that walks you through how it works. SpriteMe does all the hard work for you, you just have to copy and paste both the combined images, and the new background rules, to your site.

Decreasing the number of HTTP requests have never been simpler. Well done Steve Souders!

9 responses to “SpriteMe – Combine images and get fewer HTTP requests

  1. make sure to use your sprite correctly aswell .sprite {background-image: url(sprite.png;} .sprite-foo { background-position:…;} .sprite-bar { background-position:…;}

    instead of .sprite-foo { background: url(sprite.png) …;} .sprite-bar { background: url(sprite.png) …;} because only safari is smart enough to request your sprite 1 time in the last case, even if you use expire headers.

  2. Wow this is a very easy and cool tool. It does a pretty decent job on pulling suggested sprites and creating them.

  3. Personaly I use SmartSprites ( csssprites.org ). You can use ant script to automate sprite genration while you deploy website.

  4. @Nicolas: I just looked breifly at smartsprites and it think it’s just too much work. Manually annotating your CSS file with things the computer can calculate for you? SpriteMe does all those calculations for you. Only thing I really want is a commandline version… Thanks for the tip though!

  5. You can and should get the best of both worlds, maintainability AND the fewer HTTP requests that result from combining the CSS files. How? Make the combining part of your site build process that you go through when releasing a new version of your site.

    Don’t have a site build process? Then you have bigger problems, or, it could be said, smaller problems, since your current scale probably means you don’t need to worry about boosting performance in this manner.

Comments are closed.