http://danielsadventure.info

InstantSprite: An Easy Tool For Working With CSS Sprites, July 8, 2013

I first became familiar with the use of CSS sprites several years ago. For those of you not familiar with CSS sprites, the idea is that you combine the commonly recurring images on your web site into one large image and then display each image as a fragment of the large image. The advantage is that visitors to your web site will no longer incur the overhead of multiple HTTP requests to fetch all those images. This is particularly handy on pages that contain large numbers of “icon” images.

The disadvantage is that it takes some work to set up the appropriate “sprite” image file and corresponding CSS to make it work. However, there are tools available that will do most of the work for you.

The tool I know best, a free tool that is dead simple to use, is Instant Sprite. I am not affiliated with the project in any way; I just really like it!

Here’s how it works:

  1. I recommend that you first copy the image files you want to use in your CSS sprite to a separate image directory. Even though you won’t need to publish them to your web site, keep them in your source control because you will need them again if you add images later.
  2. Navigate your HTML 5 browser to instantsprite.com.
  3. Drag and drop the image files from your computer onto the browser window. At this point, Instant Sprite will do almost all the work for you. It will generate (a) the CSS, (b) the HTML that will render the images on your page, and (c) the sprite image itself.
  4. Copy the sprite image to your web site.
  5. Add the CSS to your web site. Please note that if you are using a static web page, you can simply put the CSS into a normal .css file. However, if you’re using a framework that uses relative paths, such as ASP.net MVC, you’ll need to make sure that the framework uses the correct relative path to the image each time. In ASP.net MVC 4, you can use the Url.Content method, for example.
  6. Finally, you can make the images appear on your web page by copying and pasting the example <div> elements onto your page.