CSS Image Spriting

Please note: This feature is still experimental.

The Cassette.Spriting plug-in reduces the number of image requests made by a stylesheet. PNG images are sprited together and the CSS is rewritten to reference the sprite image.

To add spriting to your web application, which is already using Cassette:

  1. Update to the latest pre-release version of Cassette:
    Update-Package -Pre Cassette.Aspnet
  2. Install the spriting package (also pre-release):
    Install-Package -pre Cassette.Spriting
  3. Modify your CassetteConfiguration class to sprite bundles:
    using Cassette.Spriting;
    public void Configure(BundleCollection bundles)
        bundles.Add<StylesheetBundle>("Content", bundle => bundle.SpriteImages();

Note that spriting is only applied when the application is not in debug mode.

CSS Limitations

Any CSS rules with background-image to be sprited must have:

  • Local PNG image file path
  • background-repeat: no-repeat
    (repeated images cannot be sprited)
  • width: {somevalue}
    (the sprite will be padded when the image is smaller than the element)

For example:

.widget {
    background-image: url(widget.png);
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;

Automatic spriting is hard! Cassette is using code from Request Reduce, so please read the discussion about spriting there: Optimizing Spriting