How to Create and Combine Images for CSS Sprite

We are hard-pressed to make performance optimization our priority whether we are web developer or mobile developer. We need to code HTML and CSS carefully measuring every step of coding by its ensue. Web performance optimization experts are always cling to reduce the interactions between client-server at any cost.

If you dig their data you will find that apart from initial HTML page requests, the most of HTTP requests are made for image/content loading and UI elements loading. Here we can’t eliminate individual and unique images from HTTP requests, but we can think about the small images as frequently and regularly occurring UI elements as well as those images, which are appearing on all pages as theme might be included as our targets to reduce the HTTP request hence improve the page loading performance.

This is in fact, not a big rocket science. If we can combine all small images/UI elements or theme elements in one single large image and optimize them using latest Photoshop techniques, we can do great job to eliminate all HTTP request against this single one. Another benefit is that we can reduce the overall KBs for all images downloading if we go for only one. This technique is calling CSS Sprite in web development community.

However, we can’t implement CSS sprite technique for all sort of images, but icons and button images which are need to change frequently in order to show interactions and dynamism on the web page i.e., on-off status. For instance you want to show one button that is in “On” position before the visitor click it and in “Off” position if visitor has accomplished the clicking action.

single_button
single_button.png

In such conditions, we have almost identical images of these two status so if we place these two images either in vertically or horizontally aligned and make one combine image, we have to shoot only one HTTP request instead two. Well now, question is that how we can make two different calls for two different images with a single image.

Good question, here CSS properties of X, Y positions help us to determine that which image will show when and we can accomplish this by creating two separate functions for both individual image display. In simple words if we want to show “On” status we have to create a div class “On” and another div class “Off”. See below.

<div class=”On”> </div>

<div class=”Off”> </div>

Now, let’s define the functions for these classes such a way that they display our single combine image in two different X, or Y positions in terms of pixels here. But before that you have to do some graphics work in Photoshop or alike tool and set two status of the same button measuring their pixels/spaces.

For instance, if we have both status of button in same size, say 100px we have to create a combine image of 200px and call it single_button.png. Either in horizontal direction (X)or in vertical direction (Y). here we have taken horizontal direction.

Our next step would be code/define two separate functions for two different status. Therefore, the first function would be On function for On class in following ways.

.On {width:100px; height:100px;

Background:url (images/single_button.png) 0 0px; }

This function simply returns the image positioned on the starting point at top and the starting point at the left.

.On {width:100px; height:100px;

Background:url (images/single_button.png) -100 0px; }

This function simply returns the image positioned on the starting point at top and the 100px away in right side direction.

Isn’t it easy?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s