Visual Studio 2010 Image Optimizer Extension

One thing that caught my attention while watching the session that Mads Kristensen had in MIX11 was the Image Optimizer extension he is writing. This extension can be very valuable when you are trying to optimize your ASP.NET application (whether it is Web Forms or
MVC 3).

The Image Optimizer Extension

The extension adds the opportunity to use industry proven algorithms such as SmushIt and PunyPNG for optimizing the images in the solution. This is enabled by a new set of menu items that are being added when you use the right button click in the Solution Explorer. You can optimize a single image file or an entire images folder. The optimization won’t affect the quality of the images, so you don’t need to be afraid to use it. The currently supported image types for optimization are PNG, GIF and JPEG. In order to use the extension, go to the extension manager and search the Image Optimizer in the online gallery. Another way is to download the Image Optimizer extension and install it.

Let's look at a use case scenario:

As you can see in the figure above, I point to the images directory inside my ASP.NET MVC 3 project and then I use the Optimize images menu item to optimize the images. The optimization summary will be written in the Output Window:

Another feature that the extension is supporting, currently in beta, is the ability to convert images to base64 strings for stylesheet embedding. Embedding base64 strings instead of using the image Url can decrease the amount of HTTP requests that your application produces. This of course should be used with caution since creating base64 strings from images should be done on small images. In big images, the produced string can be very long and you will get a slower download rate for your web page.

Here is a use case scenario for base64 strings for stylesheet embedding:

In the stylesheet file, place the mouse on the image Url and use the Embed image in stylesheet menu item in order to replace the Url into a base64 string. The output of this operation:

div 
{
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ
   6AAAAXElEQVRo3u3OAQ0AAAgDIO3f5CW1hnOQgE4ydVgLCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCg
   oKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKfgkubNIrSDutzqcAAAAASUVORK5CYII=)
}

Summary

The Image Optimizer extension is a promising extension if you are looking to optimize your application. It can help to reduce the size of the images you use or to embed small images as a base64 string in the stylesheet. I encourage you to play with it and see whether it can help you in your current or next application.