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

Mobile Web Development Basics


Hello Developers,

This article is to share few basic notes regarding Mobile Web Application development. I am sharing few of the external post those I found very useful for a mobile web developer.

1) http://www.utexas.edu/web/guidelines/mobile.html

A growing number of users have portable devices like cell phones or portable digital assistants (PDAs) that they use to access information on the Web. The University has developed a Web site for mobile users at www.utexas.mobi. The guidelines below are intended to assist Web developers in preparing mobile-friendly content and applications. The W3C Mobile Web Best Practices Draft also has valuable information on developing for mobile devices.

Developers might notice that mobile-friendly sites and accessible sites have many common features including useful ALT text, single column design, no frames, no pop-ups, no Javascript, and no dynamic menus………………….

2) http://www.w3.org/standards/webdesign/mobilweb

The widespread deployment of Web-enabled mobile devices (such as phones) make them a target of choice for content creators. Understanding their strengths and their limitations, and using technologies that fit these conditions are key to create success mobile-friendly Web content.

See also the Mobile Web Initiative pages…………….

You can read through the above posts and I’ll be posting very good articles in near futures.

With Personal Regards

Swagat

How to recognize javaScript is enabled or not in browser?


Hello Developers,

As we all know Javascript is the most popular scripting language for all Web developers. But always there is a question from other end(customers). Question is something like this

If browser does not support JavaScript then what will happen to the JS logic?

Simple answer to this……..the JS logic will never work..:P

But we can think of some alternative like, why not ask the end user to enable the Javascript for your web application. Sounds crazy right!!!

But we have to go in this way. how do you do that?

This solution is simple…just include a HTML tag with few message then you are done. You can see below for example

<noscript> javascript is not enabled on your browser!!!!!!!! </noscript>

This <noscript> tag will do the work for you. As soon as user browses your site with Javascript disabled, this tag will execute and show the particular message. Otherwise this tag will never execute.

You can also try some samples and test in multiple browsers. this should work for you.

Thanks for reading this article.

With Personal Regards

Swagat