Image Optimization technique to increase your Web Site performance!!!


Hello Web Developers,

This might be a very interesting topic to debate with. For all web developers Web Site performance is only one area, where we get struck by looking into different aspect to deal with. Some of are like Code Refactoring, DB Transactions, Server Performance etc.

But, I should say the major performance gaining area would be the amount of content we display. The less we display, the better is the performance…Is not it???

Generally, there are two kinds of content we display

1) Internal Resources

2) External Resources

Internal Resources are like the text we display on a Web Page. And the external resources, which are getting called from out of the Web Page, like Images, CSS, JS files.

So, most of the Web Sites have their 90% of content as External Resources. These resources cannot be ignored. How about we decrease 90%  to 10-15% or even 1% with considering all resources?

Sounds cool!!!  Now think about, how would it affect your performance????

In this article, I’ll concentrate upon one resource optimization i;e Image Optimization.

Image plays the major part to give richness to the Web Sites. We can not ignore this either. However we can optimize the images. For this we can use different Image Optimization techniques like CSS Sprite, Inline Base-64 Encoding Image Optimization.

We already have a ready to go framework in-hand to implement with, developed by Microsoft.NET. Its ASP.NET Sprite Image Optimization Framework.

The objective of this image optimization technique is to minimize the HTTP request for the HTML page to load. So, ultimately this framework gives us the way to reduce the external resources (images).

Microsoft.NET has built this framework using below technologies

1)      Sprite Image Optimization

2)      Inline Base-64 Encoding Image Optimization

This framework is built in order to automate some of the process, which normally consumes development time and providing the optimized image (sprite or inline) based upon browser detection.  CSS Image Sprite is the core concept to achieve through this framework. This can also be achieved without using this Framework. How? : Using only CSS. Below link can give you the basic idea upon CSS Image Sprite. But in this case we need to do manually, which is automated in this framework as below

  • Generating Sprite Image
  • Positioning

CSS Image Sprite: http://www.w3schools.com/css/css_image_sprites.asp

Here I’ll give a brief note on both the techniques..For more details you always can refer the links mentioned at the end of this article.

Sprite Image Optimization:

This approach will reduce the number of requests to the server. And oppose the traditional way of requesting server each time the external resources (Image) loads.

So, the performance of the web application would definitely be better than the traditional approach.

You can find the difference between Sprite and traditional way of loading images in the below examples. In-case of SPRITE, there are only 2 HTTP GET Requests which can be easily compared with the screen with multiple images loading with multiple GET Requests.

Some of the advantages are like

  1. Image is loaded without any quality loss. Image compression level can be configured with the help of optimization settings.
  2. Multi browser support.
  3. Better performance for low-end Mobile Browsers.
  4. Rich User Interface can be achieved, as the images always add richness to the application.
  5. Sprite framework automatically generates the CSS and markups for displaying the image and can determine which of the two approaches to use based on the user’s browser.

Primary Challenges

  1. While combining the various images into a single sprite isn’t rocket science, it can be a challenging and time-consuming task for a developer who lacks the image editing tools or experience to create a sprite, and
  2. Correctly displaying a particular image in the sprite requires knowing the image’s dimensions and offset within the sprite, as well as knowing the appropriate CSS rules to display just that portion of the sprite.

Inline Base64 Encoding Image Optimization

This technique allows us to embed the image into the Web Page, so that there will not be any external resource and web page will treat Images as internal elements. Using this we can reduce the number of HTTP requests to null.

But this technique is not much reliable to the lower version of browsers. This works for latest WebKit and Mozilla. So, in case of Mobile application, it would be the biggest limitation as maximum devices would not have these browsers support. And images are ignored by web crawlers.

For more detail with example you can refer to the below links:

1) http://www.4guysfromrolla.com/articles/101310-1.aspx 

2) http://dotnetslackers.com/articles/aspnet/CSS-Sprites-and-the-ASP-NET-Sprite-and-Image-Optimization-Library.aspx#s5-displaying-images-using-css-sprites

Cheers!!!!

Swagat

Advertisements

2 thoughts on “Image Optimization technique to increase your Web Site performance!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s