Using Image Optimizer in ASP.NET

Introduction

In this article we will see the "Image Optimizer" techniques in ASP.NET using Visual Studio 2012.

Steps

First let's start with demo solution code.

Here we write a simple ASPX page with an "image" control and add a reference CSS file.



In that CSS file some simple code is written that loads the image.



The image will be loaded in as shown in the following:



In the result shown above notice that the "tick" image is be loaded in a separate HTTP request and it directly impacts overall page performance. One of the main rules in Web performance is to reduce the number of HTTP requests to the server.

We will see how to reduce the HTTP request using "Image Optimizer" in VS 2012. First we need to install the "image optimizer" Visual Studio add-in from the following link:

http://visualstudiogallery.msdn.microsoft.com/a56eddd3-d79b-48ac-8c8f-2db06ade77c3

Once we have installed the add-in, if we right-click any image in our solution then we will see the two additional options:

• Optimize Image
• Extract data URI to clipboard

Just click the "Extract data URI to clipboard" option and paste it in our CSS image reference.







We will see a base64 format as an encoded string of our image and now the same page will be loaded.



Now we see that the image loaded with fewer bytes than the previous version. Optimizer has reduced the number of HTTP requests. Let us check that in Fiddler.



In fiddler we are only able to see one HTTP request, one for the ASPX page and another for the CSS file. The image file was loaded as part of the CSS file.

We can increase the number of images. We will repeat the steps and analyze the results.



Even though there are 4 images loaded, there's only one HTTP request in our page.



Summary

Imagine we have a page with 30 images, for each image there will be HTTP requests. If we want to combine all the images in a single HTTP request then we can follow the preceding method. Even if we need to select every image and do the preceding steps, it will increase the performance instantly. There are also other ways to do image optimization.

Note: The "Image Optimizer" add-in is only available for VS2010 and VS2012.