Visual Studio – image optimization

January 14, 2011 Celina Minor

Images are currently one of the key elements of any web page.  Unfortunately, very often – apart from making our website more beautiful – images increase the page loading time.  This is obviously because of their weight. Fortunately, there are many applications, more or less complex, which allow image optimization.

One of them is the Image Optimizer, new Visual Studio 2010 plugin.

This plugin can be installed via the new (in Visual Studio 2010) Extensions Manager (Tools -> Extension Manager …):

or by downloading the installer from the website: http://visualstudiogallery.msdn.microsoft.com/en-us/a56eddd3-d79b-48ac-8c8f-2db06ade77c3.

Image Optimizer adds new items in the context menu in Solution Explorer:

1. By clicking on the folder and selecting ‘Optimize images’ you optimize all images in this folder:

2. or by clicking on a particular image file and selecting ‘Optimize image’ you optimize this image only.

Image Optimizer uses ones of the most popular image optimization sites:

It is very important, as you will not be able to use this add-on while you are offline. Optimization algorithms used on these sites are designed to reduce image size without changing the quality in a noticeable manner.  In addition, if you optimize an image once, it will be recognized by those services and it won’t be optimized again.

Image Optimizer can optimize three most common image file formats:

  • GIF (including animated)
  • PNG
  • JPG

Optimization Report is always displayed in the Output window:

Another interesting Image Optimizer feature is the ability to convert images to base64 string and embed them directly in the CSS files or HTML.  Stay tuned to find out more about this in my upcoming post.

Last posts