AutoSpriter

A quick and easy way to improve page load times on ASP.NET websites using automatic image spriting.

AutoSpriter simplifies the task of speeding up page load times by automatically spriting <img> tags. It's an HttpModule that intercepts pages before they are sent to the client, finds <img> tags in the HTML, generates a sprite image containing those images, and finally alters the <img> tags in the response HTML to point to the sprite image.

I wrote this because on my website I sometimes add or remove features, or make tweaks to a piece of content that maybe adds or changes an image. It's a pain to have to edit sprite images all the time, but it's nice to have the PLT benefits of spriting.

How to use

First, add a reference from your website project to AutoSpriter.dll.

Play icon Download AutoSpriter.dll

Next, in your site's web.config, add the following configSection:

    <configSections>
        <section name="autoSpriter" type="AutoSpriter.ConfigSection, AutoSpriter" />
    </configSections>

Then configure the AutoSpriter by adding this element under <configuration>:

    <autoSpriter 
        spriteImageFolder="/AutoSprites"
        cssClassToSprite="autosprite" 
        spriteImageFilenamePattern="autosprite{0}.png" 
    />

Finally add the httpModule to the <modules> element in web.config:

    <modules runAllManagedModulesForAllRequests="true">
        <add name="AutoSpriterHttpModule" type="AutoSpriter.AutoSpriterHttpModule,AutoSpriter" />
    </modules>

Configuration Settings

The configuration settings outlined above are all optional. They work as follows:

spriteImageFolder

If set, specifies the folder on the server where the auto-generated sprite images will be saved. This should be set to a site-relative path, to a directory that exists on the server. The account that the website runs under must have read and write permissions for this directory. If not set, the default is "/AutoSprites".

cssClassToSprite

If set, this specifies that only <img> tags with the specified CSS class should be auto-sprited. If not set, all <img> tags will be auto-sprited.

spriteImageFilenamePattern

If set, this is a string pattern that specifies how the auto-sprite image files should be named. The '{0}' will be replaced with a string of digits that uniquely identifies the combination of images on a particular page. Sprite images are saved as PNG files, so the pattern should end with ".png". If not set, the default is "autosprite{0}.png", which means you'll get filenames like "autosprite1074530711.png".


How it Works

The HttpModule automatically updates each <img> tag to point to the sprite image. So if the original tag looked like this:

    <img class="autosprite" src="/Statics/images/note-small.png" alt="Music" />

then the replacement will look something like this:

    <img 
        class="autosprite"
        style="background-image: url(/AutoSprites/autosprite3360456444.png);
               width: 20px;
               height: 20px;"
        src="data:image/png;base64,iVBO...AAA"
    />

where the src attribute contains some Base64 data containing a 1x1 transparent image. So the image is now transparent, but has a CSS background-image that points to the auto-generated sprite. Keeping it as an <img> tag rather than replacing it with a <span> or <div> tag ensures that the layout is not broken, since <img> tags have their own unique properties, as they are sort of block level yet sort of inline.

The reason it embeds the 1x1 transparent image data as Base64 data in the source tag, rather than just pointing the <img> tag to an image file is that by embedding it we can avoid the extra HTTP request for the transparent image file - otherwise we lose some of the benefit of spriting the images in the first place.

However, embedding the image data in the src attribute like this doesn't work in IE6 and 7, so when the module starts up it also creates a transparent 1x1 image file and saves it in the same file as the sprite images. In these browsers the module will point the <img> tag's src attribute to the actual file.

The code gets the width and height of the image to add to the sprite based on the width="" and height="" attributes on the <src> tag. If these aren't present it relies on the image file itself for the dimensions. If the width/height attributes on the original <img> tag are different from the image file's dimensions, the AutoSpriter resizes the image before adding it to the sprite.

The code then generates a hash that uniquely identifies the image files used on the page, and the dimensions specified in the HTML. It then saves the generated sprite image with a filename that includes this hash.

On subsequent views of the same page, the sprite file already generated will be used, rather than a new one being generated.


Limitations

There are a few things to be aware of when using this:

Play icon Download AutoSpriter.dll

Play icon Download AutoSpriter Source Code


More Info