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

How to Make a Local (Offline) Repository in Ubuntu / Debian

If you are in a place where you dont have internet (or have a bad one) You want to download .deb packages and install them offline. Each deb file is packaged as a seperate unit but may contain dependencies (recursively). apt-get automagically solves all the dependencies and installs all that are necessary. Manually install deb files one by one resolving each dependency would be tedious. A better approach is to make your own local repository. Before you actually make a repo, You need *all* deb files. You dont practically have to mirror all of the packages from the internet, but enough to resolve all dependencies. Also, You have to make sure, you are getting debs of the correct architecture of your system (i386 etc) # 1. make a dir accessible (atleast by root) sudo mkdir /var/my-local-repo # 2. copy all the deb files to this directory. # 3. make the directory as a sudo dpkg-scanpackages /var/my-local-repo /dev/null > \ /var/my-local-repo/Packages # 4. add the local repo to sour

Using Equinox CommandProvider to make OSGi console interactive.

After fiddling with the First Bundles that "Hello World"-ed upon Activation, You want to see more interactivity in OSGi. Although Using OSGi for an interactive Command Line Application would be like this one would be, well, a callable over-kill, I am going to start with an example and Expand it in later posts. So, please Welcome CommandProvider. CommandProvider is an EQUINOX specific API for extending the Console. This basic Example illustrates how to get a command from console and do something in java and also gets your feet wet on Service Registry package com.so.examples.commandconsole; import org. eclipse .osgi.framework.console .CommandInterpreter; import org.eclipse.osgi.framework.console.CommandProvider; public class DisplayMessageCommand implements CommandProvider { public void _say(CommandInterpreter ci) { ci.print("You said:" + ci.nextArgument()); } @Override public String getHelp() { return "\tsay - repeats what you say\n"; } }

javascript maxlength for textarea with \r\n breaks in java (esp Firefox)

Textareas allow new lines to enter. These are represented by \n (1) or \r\n (2) characters. But when you save to DB you have a limit to certain length of chars. There is no maxlength attribute in HTML that will stop you from entering data. This is generally acomplished by Javascript. You do a onkeyup hook and stop event or trim after textarea.value.length > maxlength. There are many other solutions out there.. But.. Here is the problem that most of those solutions overlook, How do you deal with the count on \n and \r\n representations. Lets first see how it matters. If the text entered has new lines, the length is calculated differently in Firefox and IE. When you enter a Text like 01234 567890 You expect the textarea.value.length to be 11. (10 chars + new line).On the backend, however, java would recieve it as 12 chars (10 chars + \r\n) (this is irrespective of FF or IE). So you are effectively saving 12 chars to DB. Worse yet, IE seems to figure textarea.value.length as 12 (