Question

I use an HttpHandler to dynamically serve images in a ASP.Net web application. I am having a performance issue (Firfox/Firebug/YSlow reports there are too many HttpRequests)

I have between 50-100 images per page in some instances.. 3 treeviews (business units/categories/objects) with each node having its own image 😉

Each item’s image url is set dynamically like so…

SomeImage.ImageUrl = ‘/image.axd?ImageId={0}’;

Note: I only know at runtime which images will be required.

Additional: Images are located on the server file system, in a resource file and also in the database – users can upload their own images to associate with my system objects and the ImageHandler will determine each image location dynamically)

In the web.config the httphandler is configured and works as expected… add verb=’GET’ path=’image.axd’ type=’Vision.OnsightManager.ImageHandler’

In the HttpHandler the raw image bytes are returned in response to each image request. So in the WriteResponse() method of the image handler the image bytes are returned, like so…

context.Response.BinaryWrite(bytes);

All images display correctly, but the app has performance problems as expected where many images are displayed…

Question:

What approach do you recommend, apart from reducing image count ;), for minimizing all the HttpRequests generated for each image? Maybe combining into a single Http request?

I have read articles on combining multiple css requests into a single request, using image mapping (single combined image with offsets) etc, but none seem to suit my particular scenario?

Much obliged!

Answer 1

One way to reduce the preasure on the server on repeated requests is to use the page cacheability.

Add this before Response.Write in the HttpHandler:

// Set for how long you want the image to be cached. context.Response.Cache.SetExpires(DateTime.Now.AddDays(1));  context.Response.Cache.SetCacheability(HttpCacheability.Public); context.Response.Cache.SetValidUntilExpires(true); context.Response.Cache.VaryByParams['ImageId'] = true; 

This will make the server to cache the result (depending on the ImageId param) but this will of course only help on repeated requests for the same image, not the first one, so it depends on where the actually problem is.

Without knowing very much about your application it sounds like you have to change several things to find a better solution…