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

Caching On BlackBerry Browsers


Hello Mobile Web Developers,

As we all know BB mobile devices are one of the most popular and widely used by Mobile Users all over the world. So, this is obvious for any mobile web developer to build the Application to run on BB browsers. While testing on BB devices or emulators you’ll see mostly rendering issues. But I am not going to explain about those issues. Here I’ll share something “Good to Know” concept very specific to BB browsers caching.

BlackBerry browser has built in caching mechanism. In general caching mechanism is used to increase the UI experience and reduce reloading the content again and again. So, for this reason BB has done a good thing by introducing this default caching.

But think about the dynamic content on your application and needs to load based upon user selections or inputs. In these cases the caching will cause issue by not refreshing on page refresh. No matter what, the page will get the old data on each refresh. This is not GOOD!!!!! Right…

So, what’s the solution to this????

We need to tell the browser that the particular page in not asking for caching…Means we need to modify the particular page request header with no-caching elements.

This can be done by adding the <META> tag or through code-behind also.

**************************************************************************************************

<meta http-equiv=”CACHE-CONTROL” content=”NO-CACHE” />

<meta http-equiv=”EXPIRES” content=”0″ />

**************************************************************************************************

 

But this could not be the solution for all BB models. So its better to include the below lines of code into your MasterPage or BasePage, if you want it for entire site. Else do it for particular pages.

 

**************************************************************************************************

HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(false);

 HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);    

HttpContext.Current.Response.Cache.SetNoStore();   

Response.Cache.SetExpires(DateTime.Now.AddSeconds(0));

**************************************************************************************************

 

Cheers!!!!!

Swagat

 

JQuery Mobile (jQuery Mobile 1.0 Beta 3 Released!)


Hello Mobile Web Developers,

After reading lots of article, posts and trying out few samples in JQuery Mobile, I found it would be a great technology and idea to share with.

JQuery Mobile is a new generation scripting language framework specifically built for Smart Phone devices. This framework aims at building dynamic touch based User Interface, which can very much compete with the Smart Phone Apps.

JQuery Mobile framework has considered the below points to deal with

  • Seriously cross-platform & cross-device
  • Touch-optimized layouts & UI widgets
  • Theamable designs: Bigger and better

You must be worried about the device support….No worries !! Just CLICK HERE and see the list of device support this Framework.

Here I would like to share few cool posts/articles about JQuery fundamentals and design guides…Let go through the below links and try out some cool stuffs on your own..

1) http://jquerymobile.com/

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design

2) http://www.ibm.com/developerworks/web/library/wa-jqmobile/index.html

jQuery Mobile is a touch-friendly web UI development framework that lets you develop mobile web applications that work across smartphones and tablets.  The jQuery Mobile framework builds on top of jQuery core and provides a number of facilities, including HTML and XML document object model (DOM) traversing and manipulation, handling events, performing server communication using Ajax, as well as animation and image effects for web pages. The mobile framework itself is a separate, additional download of around 12KB (minified and gzipped) from jQuery core, which is around 25KB when minified/gzipped. As with the rest of the jQuery framework, jQuery Mobile is a free, dual-licensed (MIT and GPL) library.

Cheers!!!!!!!!!

Swagat

How do you recognize Mobile Browser??


Hello Developers,

You all might have noticed when you browse any popular sites from any mobile device, your browser gives you a mobile compatible version of the same sites not the site you see on the desktop or laptop..Right!!!!

HOW DO THEY DO THAT…

Answer is very simple…They recognize the “User Agent” and do the tweaking.

User Agent holds the description about the browser, operting system, browser version, OS version etc. We can easily get this from the request header.

For example:

Mozilla/5.0 (Linux; U; Android 2.2.1; de-de; X2 Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

This example shows the request has come from an Android device. Similarly there are different USER AGENTS for different devices. You can easily get this by using Javascript or Code Behind.

Javascript:  Using Navigator object. As

navigator.userAgent

ASP.NET CODE BEHIND: Using Request object

Request.ServerVariables[“http_user_agent”];

Now you can write a static helper method to recognize the requested device as below

public static bool IsMobileDevice(string userAgent)   {

userAgent = userAgent.ToLower();

return userAgent.Contains(“iphone”) |

userAgent.Contains(“android”) |

userAgent.Contains(“blackberry”) |

userAgent.Contains(“palm”);

}

Similarly you can have a Dictionary or List of devices and get the peroper device through these objects.

Thanks for reading this article.

With Personal Regards

Swagat

Emulators or Simulators Download


Hello Developers,

For Mobile Web development this is very important to know about the simulators and emulators. These are basically act as virtual mobile devices with the help of which testing can be done. But this could not give you the 100% testing result as on real mobile device. Still these are very useful to test with.

Here I am sharing different Mobile OS simulator/emulator download details.

1) iPhone & iPad Simulator – (Download)

2) iOS Simulator – (Download)

3) Android Emulator – (Download)

4) HP webOS Emulator for Palm Pre, Palm Pixi, Palm Pixi Plus – (Download)

5)  BlackBerry Simulators for 35 different models including series Bold, Curve, Pearl, Storm, Storm2, Style, Torch & Tour – (Download)

6)  Windows Phone 7 Simulator – (Download)

7)  Opera Mobile Emulator – (Download)

8)  Opera Mini Simulator – (Download)

9) PhoneGap Simulator for Apple iPhone, Generic Android, and others – (Download)

10)  Bada Simulator for Maemo (such as Nokia N900), Symbian Touch (such as Nokia N8) and Symbian non-touch (such as Nokie E71) – (Download)

11)  Garnet Emulator for Old Palm OS devices – (Download)

There are lots of other simulators and emulators are available like  Motorola-Xoom Add-on, Nokia Symbian, Samsung Galaxy Tab Add-On etc. But here I have listed the imortant ones to test with.

With Personal Regards

Swagat

 

 

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