NuGet Package of the Week #1 - ASP.NET Sprite and Image Optimization

I was thinking since the NuGet .NET package management site is starting to fill up that I should start looking for gems (no pun intended) in there. You know, really useful stuff that folks might otherwise not find. I'll look for mostly open source projects, ones I think are really useful. I'll look at how they built their NuGet packages, if there's anything interesting about the way the designed the out of the box experience (and anything they could do to make it better) as well as what the package itself does.

Sprite and Image Optimization Preview 3

First, I noticed that the ASP.NET Sprite and Image Optimization preview has been updated to Preview 3. These is an example of something that Microsoft might ship with a future version of ASP.NET, but that you can use today. It's even easier because it's in NuGet.

They've structured this nicely. There are three packages, in fact, with the "leaf" packages depending on the Core.

• AspNetSprites-Core
• AspNetSprites-WebFormsControl
• AspNetSprites-MvcAndRazorHelper

This is an API for ASP.NET to automatically generating CSS sprites and inline images. It works in ASP.NET WebForms, MVC as well as Web Pages. Nice example if you're writing a library of your own and you want it to work for all three ASP.NET techniques (remember it's all ASP.NET). All the source is up there.

The idea behind sprites is that if you've got a page with dozens or even hundreds of small images, perhaps icons on the page, you'll be paying for all those HTTP requests. Instead, why not retrieve a single image with the little ones oriented in a grid, then let the browser break them up at runtime with CSS as "sprites." However, the actual creation of those original grid-like images are often a hassle.

Not only do you have to make the original images, you'll also need to create a CSS file with the relative positions of the image you want in the source image.

You can also do "inline" images in some new browsers by base-64 encoding small images and putting them inside the img tag on the page itself.

ASP.NET Sprites in WebForms

They include a helpful readme.txt (this is a best practice) in the App_Sprites folder that is created when you install the package. Here's the readme. It's nice because it really tells you everything you need to know AND includes pointers to docs. You'd be surprised how few packages do even this. Remember that your NuGet user is likely either IN Visual Studio or NEAR Visual Studio, and since NuGet exists to prevent us from hunting for stuff, don't make your user hunt for things.

For detailed information on ASP.NET Sprites and the Image Optimization Framework, go to http://aspnet.codeplex.com/releases/view/61896

QUICK START:

1) Add your images to the "App_Sprites" directory.
2) Depending on your application type:

****************************
*** ASP.NET Web Forms 4 ****
****************************

<asp:ImageSprite ID="Sprite1" runat="server" ImageUrl="~/App_Sprites/YOUR_IMAGE.jpg" />

**********************************
*** ASP.NET MVC 3 (ASPX Views) ***
**********************************

<%: Sprite.ImportStylesheet("~/App_Sprites/") %>
<%: Sprite.Image("~/App_Sprites/YOUR_IMAGE.jpg") %>

********************************************************
*** ASP.NET MVC 3 (Razor Views) or ASP.NET Web Pages ***
********************************************************

@Sprite.ImportStylesheet("~/App_Sprites/")
@Sprite.Image("~/App_Sprites/YOUR_IMAGE.jpg")

I fire up Visual Studio and make a new ASP.NET WebForms project. Remember I can use NuGet from the command line, from within VS with a dialog, or from within VS using PowerShell.

I right-click on the References folder in the Solution Explorer, and search for "Sprite" online. I'll install the AspNetSprites-WebFormsControl.

Now, I just add some images to the App_Sprites folder. Here's my images in Explorer:

Next, I just run the application once. Look at the same folder now. Note the sprite0.png? (Of course there are settings you can override.) See how the new sprite file is a merge of all the little images?

There's also new .CSS files as well with new CSS classes to access each one. Very cool.

.camera-png
{
width:48px;
height:48px;
background-image:url(sprite0.png);
background-position:-0px -0px;
}

However, with WebForms I never have to worry about this stuff. Remember that WebForms is about controls. I can add this control and WebForms will handle the IMG tag and the CSS tag.

<asp:ImageSprite ID="Sprite1" runat="server" 
ImageUrl="~/App_Sprites/video.png" />

And the image is output like this for maximum compatibility.

<img id="MainContent_Sprite1" class="video-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

Pretty cool.

ASP.NET Sprites in ASP.NET MVC (as a Razor Helper)

Now, if I do the same thing, except install-package AspNetSprites-MvcAndRazorHelper in an ASP.NET MVC project.

For an ASP.NET MVC project, I add the CSS manually in the <head> of my _Layout.cshtml:

@Sprite.ImportStylesheet("~/App_Sprites/")

And then I use the Sprite helper wherever I want see an image:

@Sprite.Image("~/App_Sprites/video.png")

Works exactly the same as the WebForms one, except the usage feels more like MVC. Again, this package is a nice example of how one library can be made available for WebForms, WebPages and MVC.

Feel free to recommend cool NuGet libraries in the comments and I'll add them to what I expect will be a very large queue!

Related Links

• Updating and Publishing a NuGet Package - Plus making NuGet packages smarter and avoiding source edits with WebActivator
• Creating a NuGet Package in 7 easy steps - Plus using NuGet to integrate ASP.NET MVC 3 into existing Web Forms applications
• ASP.NET MVC3, WebMatrix, NuGet, IIS Express and Orchard released - The Microsoft January Web Release in Context
• VIDEO: PDC10: Building a Blog with Microsoft "Unnamed Package of Web Love"
• http://stats.nuget.org