Click here to Skip to main content
15,867,704 members
Articles / Image

Visual Studio 2010 Image Optimizer Extension

Rate me:
Please Sign up or sign in to vote.
4.20/5 (2 votes)
16 May 2011CPOL2 min read 17.2K   2  
The Image Optimizer extension is a promising extension if you are looking to optimize your application.

One thing that caught my attention while vs2010 logo_thumb[1]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:

Optimize Images Menu Item_thumb[3]

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:

Optimization in Output Window_thumb[3]

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:

Base64 Embedding_thumb[4]

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:

CSS
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead sparXys
Israel Israel
Gil Fink is a web development expert and ASP.Net/IIS Microsoft MVP. He is the founder and owner of sparXys. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of "Pro Single Page Application Development" book (Apress) and the founder of Front-End.IL Meetup. You can read his publications at his website: http://www.gilfink.net

Comments and Discussions

 
-- There are no messages in this forum --