Create a picture Sprite using Visual Studio (image sprites)--web Essential

Original: Creating Image Sprite in Visual studio-web Essential

Note: For information on picture sprites, see http://baike.baidu.com/view/2173476.htm.

With this article, you can learn how to use Visual Studio's Web essential extension to create a picture sprite. If you have a Web site that uses a large number of images, and each image is loaded by a separate request, the number of requests increases and the site slows down. And this needs to be optimized to speed up the site.

Image Sprite is a sort of technology that makes multiple images fit into a large image, so that the site simply needs to load a file instead of multiple files, which speeds up the site.

Let's take a look at what web essential is, and then see how to create a picture sprite in the visual Studio IDE.

Web Essential

Web Essentials extends some of the new features for Visual Studio, but has been forgotten by web developers for many years.

If you're writing CSS, HTML, JavaScript, TypeScript, Coffeescript, or less, you'll find that there are many useful features that will make life easier for you as a developer.

This extension is primarily intended for all Web developers who use Visual Studio. It was first presented by Mads Kristensen in August 2012.


Visual Studio 2013-based Web Essentials 1.7 now makes image processing a lot easier than ever.

If you haven't installed the extension into your favorite visual Studio IDE, you'll miss out on a lot of features that you can download from here quickly.

Now, let's explore how to create an image sprite.

Paste an image from the pasteboard into the Visual Studio editor

Although there are many different ways to create a picture sprite before the Web essential contains this feature, using the visual Studio Web essential extension can make the work easier than the previous method. Below, follow the steps below to do it.

First step : Select the picture and right-click on the selected picture >web essentials>create image Sprite ...

When you click Create Image Sprite, it will let you enter the name of the wizard, enter a name and click the Save button. By default, new sprites are added to the images directory.

2nd Step : Expand the wizard tree (for example) and immediately see the. png file under the wizard tree. These. png files are actually the small images that are contained in a single image that we select when creating sprites. Such as.

3rd Step: to expand the Mysprite.png file, you will find the. css,. Less,. Map, and. scss files, which are of little use and are only sprites, but it is important to leave them in the project.

If you open the MySprite.png.css file, you will see some CSS code that can be copied into the original style file (SITE.CSS). The following is the screen for the MySprite.png.css file.

In the you can see the definition of each small picture, these small pictures are based on their position in the large picture to display.

Copy these styles to the Site.css file or to a different style file.

4th Step : Now, in order to be able to use these CSS, which is the new picture Sprite, you need to use the following markup in the DOM:

<div class= "orderedList0" ></div><div class= "OrderedList1" ></div><div class= " OrderedList2 "></div><div class=" OrderedList3 "></div><div class=" OrderedList4 "></ Div>

As you can see, the class selector is used here to map CSS files to styles.

I recorded a Hindi video for this. If you don't know Hindi, you can see the steps above.

Translator Note: To see the video please visit the source address.

Abhimanyu Kumar Vatsa, Microsoft MVP in Asp.net/iis | Author | IT Faculty | Student of M.Tech. IT, works as an Assistant lecturer in Coxtan College, Bokaro.  Know more