Skip to main content

Faster webpages fewer Images with CSS Sprites

In a previous post, I have made a point how to improve performance by reduce HTTP connections by stitching together content of css and js fragments. At that time I also mentioned a way to do it further is to reduce the number of images on a page. Because images are also loaded on HTTP connections. Again the same Cache-Control headers on the client can be used to reduce much of this traffic. But to reduce the Number of HTTP connections, You can employ a technique called CSS Sprites.

I have to confess, I don't know about this technique until I was researching on GWT's ImageBundle interface. Had I known this trick, my SarathOnline2.0 site would not have been lame - text only!

Simply the technique is to stitch all images together into one big image. This big image is called a Sprite. The images used on my site are sprite-d as shown on the left. How do we display them seperately? Using css backgrounds. To achieve this We will send a blank 1px gif. Then insert an img tag with src=blank.gif, and height and width set to the image that was orginally intended to be there (kick this, go Firebug > Inspect Element :) ). Then, using css background: url(path/to/sprite.png) no-repeat top left; background-position: 0 -5px; You can clip the background to show the exact image. As shown below.

This technique is so well discussed in detail all over the web. But you dont have to get intimidated about doing this whole stiching, and calculating the co-ordinates et al. This online css sprite genereator is simply awesome. Supply it with a zip file containing all the small gifs or pngs, and it will spit out a sprite and a piece of code for your css. If you are like me, have that css in a separate file and keep that deploy that image on to your site. And boom, you got your site running faster. If you need to add one more icon, dont worry, add it to your list images, zip them, generate this sprite again. Just keep the names of the images same. The class names generated will be the same, so you dont have to worry about modifying existing pages.

Awsome? Ain't it?

Popular posts from this blog

One page Stock

Alright.. That was a long absence. The whole last week I dint blog. I dint go away. I was "occupied". I was learning stock trading. Its very fascinating. I have a good weeeked blog for you all. Here is my experience. I can literally hyper-link every word from the following paragraphs, but I am writing it as simple as I can so you can look up the italicised words in wikipedia . I got a paper trading account from a brokerage firm . You need one brokerage account first. Then it can be an Equity account where all your money is yours or a Margin account , where some of the money is lent by the brokerage firm. Then I get Buying power , which is the dollor value of how much stocks you can buy. I can make profit by simple rules. Buy when Price is low. Sell when price is high. There is another more intersting way of earning money. Selling short . Thats when price is not high, per say, but when are confident that the price WILL go down. then buy back when its lowest. This is what

Powered By

As it goes, We ought to give thanks to people who power us. This page will be updated, like the version page , to show all the tools, and people this site is Powered By! Ubuntu GIMP Firebug Blogger Google [AppEngine, Ajax and other Apis] AddtoAny Project Fondue jQuery

classpath*: making your Modular Spring Resources

Spring gives multiple options to load XML resources for building contexts. the reference documentation does explain this feature quite well. However, I am taking my shot at explaining the different practical scenarios ( by order of growing modularisation) For Example, A simplest Spring based web Context Loader can be configured with resources like this <context-param> <param-name>contextConfigLocation</param-name> <param-value>applicationContext.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> You just need to put applicationContext.xml in WEB-INF/ folder of your webapp. However, Typically an application is n-tiered. You can also have multiple files setup and in relative paths. like <param-value> context-files/applicationContext.xml context-files/dao.xml context-files/service.xml </param-value>