Web Essentials – Sprite and CSS generation

Web Essentials
When developing a solution that contains multiple icons and images, it might be best to consider how many calls are being made to fetch each of these images. Web Essentials for Visual Studio contains a sprite generator which has proved to be exceptionally useful for managing images.

How do I create a sprite in Web Essentials?

  • Load the images you wish to use into your project
  • Highlight the images you would like to be wrapped up into a sprite
  • Right click > Web Essentials > Create Image sprite
  • Name file and save

Create image sprite

What assets are produced when creating a sprite?
Once the file has been saved, web essentials will produce the following assets:

  • MySprite.sprite
  • MySprite.png
  • MySprite.png.css
  • MySprite.png.map
  • MySprite.png.scss

Created assets

How can I use the generated CSS?
To add your sprite into your code, you have two clear options. The CSS produced by web essentials contains:

  • a custom class name
  • image coordinates

The first option would be to simply add the class name to your HTML. The second option would be to copy the coordinates and incorporate them into your own LESS / CSS file that contains your own CSS classes. However, the second option would mean referencing the image sprite URL yourself (location of the image in SharePoint), or creating an image variable in your LESS file (see further down on how to create a variable for your image).

What if I need to add more images as my project grows?
To add a new image to your sprite follow these steps:

  • Open SpriteName.sprite file
  • Add a new file reference
  • Be sure to add the reference to the bottom of the existing references
  • Adding a reference at the top, or between other references will shift the images and coordinates
  • Save
  • It’s worth noting that on occasions, Visual Studio will take up to several minutes to recognise that you’ve modified the file. You are usually promoted to accept the change. Additionally, you can check the sprite.png file to see if your newly added image is present at the bottom


Can I change the spacing between images?
Increasing the spacing between images provides a little more flexibility when modifying the coordinate placement to match your design. To modify the spacing between images, follow these steps:

  • Open SpriteName.sprite file
  • Locate the line <margin>1</margin>
  • Increase the value to 50 (for example)
  • Save the file
  • Open your sprite.png and notice that the images now have a larger distance between them


Creating an image variable with LESS
As previously mentioned, if you wish to add the coordinates to your own classes, you can also create a LESS variable for your image. The below shows a variable titled imageSprite which is then used by a custom class.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s