Posted by : Deepak Vasudevan Saturday, November 25, 2006

Web Page Optimization

Even though broadband is getting a quick hype with marketing promos by every individual ISP in each and every country, nevertheless, having a webpage that provides instant response is always a welcome step. Previously, we had the eight second step. Now the users expect the pages to just land in thier desktop at the wink of thier eye.

To start with we would discuss about loading heavy images. A picture is worth thousand words but if we have a thousand MB picture which is going to take three hours to download, the web surfer is going to prefer File -> Close of the web browser and then launch a fresh browser session for your competitor website.

There are a few simple tricks that we can use to make images fast loading to provide a seamless user experience.

  1. Use Interlaced GIF compared to normal images. This way, the user gets a chance to preview the image as it downloads rather than waiting for the entire image to download.
  2. In case of heavy images, you can opt for having the images splitted and load the split images.
  3. For visual image toggling like 'ON' and 'OFF', you can have the alternative images cached on window.onLoad and hence the page delay at the time when the image is required would be avoided.
  4. Always specify WIDTH and HEIGHT for the images so that the web browser knows how much space has to be allocated on the webpage for the images. This avoids jump or flickers in the webpage.
  5. Always specify ALT tags. This way, in case the image is  broken, the user would know of the purpose of the image. Also image challenged text browsers like Lynx and users who have opted to disable images would get benefitted by knowing the purpose of the images.
  6. A Few Free Tools:
    1. It is not difficult to edit and fine tune the image. You can have simpler tools like Irfanview to edit the images and export them to a variety of formats and the publish them to your webpage.
    2. For splitting too, there is an online webservice from  Chami.com which you can make use of. Check out Online Image Splitter from Chami.com.

Popular Post

Blogger templates

Labels

Blog Archive

Followers

Blog Archive

Powered by Blogger.

- Copyright © Lavanya Deepak -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -