I was recently working on wordpress theme designing. While working on speed optimization, I came across CSS Sprites. Initially I thought what a cool name it has got. Sprites!! it took me a short while before I understood it properly but still found too mystical when it comes to implementation.
CSS Sprites group all images into one composite image and display them using background-position property. There by limiting HTTP request to just 1 and avoiding repetitive HTTP calls made to individual images. It also reduces the size of the HTML document generated by DOM and hence increases speed and performance of your website.
I don’t wish to go into details of what, why and how of CSS Sprites. You can read more on them here, here and here.
Majority of the tutorials I used to get hold of Sprites, talked about rollover menus & list menus. If you want to implement it in some different layout/format, there’s a dearth of elaborated references. That is why, I am writing this tutorial which shall take you through initial steps of generating Sprite Image, CSS Class, & linking these classes within your page (It could be a php or an html page).
Implementation Requirement: To display four 125×125 images in a box of 300×300. You can relate 125×125 side bar ad banners with this requirement.
Note:Before you copy paste the code, I want to mention here that this code is working only in IE and not in Mozilla. I am working on the browser fix and would soon post an update on this.
Generate Sprite image and CSS class:
Go to CSS Sprite generatorand upload .zip file having all images from your website. You can leave all other options unchanged and click on Create sprite image and css.
Following is the sprite image:
Composite Sprite Image (Having four indivdual images)
The vertical offset between two images is of 50px. You can change this from the option available on the CSS Sprite generator page.
Though the css class generated by css sprite generator asks you to add following css class for list tag, It did not work in my case.
.container li{ background: url(/images/spriteimage.png) no-repeat;
}
Instead of adding a sprite image to parent class and referring it in the child classes, I directly referred the image in child classes as I was not going to use html lists tag/menu.
Upload the sprite image to /images directory of your website and past the following CSS code to your style sheet.
.sprite-advertise_here_one{background: url("/images/spriteimage.png");
background-position: -0px -0px; width: 125px; height: 125px; float: left;}
}
.sprite-advertise_here_two{
background: url("/images/spriteimage.png");background-position: -0px -175px; width: 125px; height: 125px; float: right;}
}
.sprite-advertise_here_three{background: url("/images/spriteimage.png");
background-position: -0px -350px; width: 125px; height: 125px; float: left;}
}
.sprite-advertise_here_four{background: url("/images/spriteimage.png");
background-position: -0px -525px; width: 125px; height: 125px; float: right;}
}
As you can see, background-position co-ordinates are changing with -175px vertically. That means, for displaying first image, including 50px offset, we tell CSS that our first image is located at 0px 0 px and second is located at 0px -175px position and so on.
Now, the most important part of this implementation. Using the CSS reference in your webpage, which in my case is a php file.
I struggled a lot with divisions <div> before I settled with <span>. Divisions did not give me desired result. Not at least in IE versions. That is why I tried to use <span> elements. However, I suggest you to try to implement sprites with <div> instead of <span>.
This should also have worked by assigning css “id” to anchor tags. But it did not work in my case. Still, I am posting the code here. Ideally speaking, this should be the way it is implemented.
I hope this at least would you some insight on CSS Sprites and how good are the for the speed & perfornamce of your website. I am planning to use sprites on ameyablog as well but after a while.
