Want to keep the TNW Conference vibe going?? Tickets for TNW2022 are available now >>

The heart of tech

This article was published on April 20, 2011

    CSS Sprite Generator handles the sprite legwork for you

    CSS Sprite Generator handles the sprite legwork for you
    Joel Falconer
    Story by

    Joel Falconer

    Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found g Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found gaming or consulting. Follow Joel on Twitter.

    Sprites are an excellent way to get pages loading quicker, and if you’re not using them, you should be — and now you have help. And I’m not talking about the elf-like sprites of Harvest Moon.

    CSS Sprite Generator is a handy tool that takes the pain out of making sprites for your designs.

    The number of HTTP requests invoked by a site does more to slow down load times than fewer, larger files do, and sprites reduce HTTP requests by combining images into a single file and using CSS to treat different areas of the file like individual images.

    Unfortunately, mapping out your sprites can be a bit of a pain, but with CSS Sprite Generator you can bypass all the legwork and get back to designing.

    The tool has you upload a zip file containing the images you want to make sprites out of and configure some settings. You’ll then get the sprite image, along with CSS code that references the location on the larger image of each of the individual images.

    If you’re not using sprites because they’re just too much of a pain to implement, this tool is for you.