Image Sprites

Download this extension from the VS Gallery or get the CI build.

---

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

This extension makes it easier than ever to create, maintain and use image sprites in any web project.

See the changelog for changes and roadmap.

Features

• Easy to create and update image sprites
• Supports png, jpg and gif images
• Configure vertical or horizontal sprite layouts
• Produce LESS, Sass, Stylus, or CSS file with sprite image locations
• Image Optimizer integration
• Configurable DPI for high resolution images
• Works with both Web Compiler and Bundler & Minifier
• Drag 'n drop of image files supported

Create image sprite

Select the images in Solution Explorer and click Create image Sprite from the context menu.

This will generate a .sprite manifest file as well as the resulting image file and a .css file.

The .sprite file

The .sprite file is where information about the image sprite is stored. It looks something like this:

{
  "images": {
    "pic1": "a.png",
    "pic2": "b.png"
  },
  "orientation": "vertical",
  "optimize": "lossless",
  "padding": 10,
  "output": "png",
  "dpi": 384,
  "stylesheet": "css",
  "pathprefix": "/images/",
  "customstyles": {
    "display": "inline-block"
  }
}

images is an array of relative file paths to the image files that make up the resulting sprite file. The order of the images are maintained in the generated sprite image. The name of the image will be persisted in the generated stylesheet as class names.

orientation determines if the images are layed out either horizontally or vertically.

padding is the distance of whitespace inserted around each individual image in the sprite. The value is in pixels.

dpi sets the resolution of the image. 96 is the default value.

optimize controls how the generated image sprite should be optimized. Choose from lossless, lossy or none. This feature requires the Images Optimizer to be installed.

stylesheet outputs LESS, Sass, Stylus, or plain CSS files to make it easy to use the image sprite in any web project.

pathprefix adds a prefix string to the image path in the url(path) value in the stylesheet.

customstyles allows you to inject any css declarations into the generated stylesheets.

Update image sprite

Every time the .sprite file is modified and saved, the image sprite and optional stylesheets are updated.

A button is also located on the context-menu of .sprite files to make it even easier.

You can update all image sprites by right-clicking on either the project or solution and select Update All Image Sprites.

Consume the sprite

You can use the sprite from CSS, LESS or Sass.

CSS

Make sure to configure the .sprite to produce a .css file. Here's how to do that:

"stylesheets": "css"

That will produce a file called something like mysprite.sprite.css nested under the mysprite.sprite file.

All you have to do is to include the .css file in your HTML like so:

<link href="mysprite.sprite.css" rel="stylesheet" />

You can then add HTML markup with 2 class names. The first class name is the name of the .sprite file. In this case mysprite. The other class name is the name of the individual image in the sprite you wish to inject.

<div class="mysprite pic1"></div>

LESS and Sass

Make sure to configure the .sprite to produce a .less or a .scss file. Here's how to do that:

"stylesheets": "less|sass"

Then import the generated .less file into the .less files that will consume the mixins generated by this extension.

LESS

@import "mysprite.sprite.less";

.myclass {
    .mysprite-pic1();
}

Sass

@import "mysprite.sprite.scss";

.myclass {
    @include mysprite-pic1();
}

That will produce the following CSS:

.myclass {
  width: 16px;
  height: 16px;
  display: block;
  background: url('mysprite.sprite.png') -36px -10px no-repeat;
}

To use the generated CSS on your page, see the above section on CSS.

Contribute

Check out the contribution guidelines if you want to contribute to this project.

For cloning and building this project yourself, make sure to install the Extensibility Tools 2015 extension for Visual Studio which enables some features used by this project.

License

Apache 2.0