An Image Sprites is a single image which is merged with multiple images. The reason why Image Sprites are needed instead of inserting multiple images into a page is to SAVE network bandwidth as well as reduce the number of server requests. Since inserting many images into a page will take longer time to load the pages, merging images into a single will help reduce loading time. For these reasons, I would recommend to use “CSS Image Sprites” function instead of inserting multiple images. Unfortunately, most of designers/developers not support this function as default, but through this tutorial, you would be able to merge multiple images into a single image as well as manipulating CSS.
“Image Sprites” is strongly recommended for Web, because Web themes have many graphics as default. Therefore, reducing the number of images is necessary to let people as well as search engines visit your sites faster than before. Some times ago, I have already posted an example of a cartoon type animation with help of Image Sprites.
Let me give you an example for easier understandings. Here is lots of avatars I have to put into a page. Without Image Sprites, I have to insert 24 individual avatars into a page. It will generate 24 requests of your web server so that it will take a long time to load.
Just 1 image file to load / 1 request
With using “Image Sprites”, Only one request and one loading time will be generated. Which one do you think better?
In addition, with the help of “Image Sprites”, you can make use of hover effect more easily. In this tutorial, I will describe how to use Image Sprites with hover effects (View Demo).
To get started (Preparation)
- You may need to prepare more than two same size images to be inserted into a page like the avatar image file above.
- For this tutorial, I will use these 6 images below as an example. All six buttons’ sizes are equal as 33×33.
3 left images will be used for normal links, and the rest of images will be used for hover effects.
This single image below will be used for “Image Sprites”.
Instruction
- Download .zip file or View Demo.
- Extract the compressed file onto your hard drive.
- Open “imagesprites.html” file using any TextEditor (Notepad/Dreamweaver).
- I will let you know some parts you need to replace so that you better modify some codes using text editor.
- This code is for this example so that your code will be different. You can refer to this code about how it works.
- Take a look at this part of the source code below:
.prev-button {
width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') 0 0
}
a:hover .prev-button {
width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') 0px -33px
}
.play-button {
width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') -33px 0
}
a:hover .play-button {
width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') -33px -33px
}
.next-button {
width: 33px; height: 33px; border: 0px; background:url('/images/controllers.png') -66px 0
}
a:hover .next-button {
width: 33px; height: 33px; border: 0px; background: url('/images/controllers.png') -66px -33px
}
- If you have set all, the next is to insert HTML codes for each image class like below:
<body style="background: transparent; margin: 0pt; "> <div> <a href="URL" target="_top"><img class="prev-button" src="/images/spacer.gif" /></a> </div> <div> <a href="URL" target="_top"><img class="play-button" src="/images/spacer.gif" /></a> </div> <div> <a href="URL" target="_top"><img class="next-button" src="/images/spacer.gif" /></a> </div> </body>
- If you don’t want an image to be linked, remove href= “URL” target= “_top” tag.
- Replace class names such as “prev-button”, “play-button”, and “next-button” to yours.
- Make sure the classes doesn’t have “.” at the very front.
- Modifying codes is done. You can apply this technique to other merged images.
- Make sure “spacer.gif” as well as your merged image file are also uploaded to the right place such as “/images/”.
- You are ready to check how “Image Sprites” works correctly. You will reduce the number of server requests as well as save network bandwidth with this CSS technique.
Posted by: Dhiraj kumar
HTML5, CSS3, JQuery Tips & Tricks 
thanks for sharing, very useful
you are welcome, Mr. Juneja.
Hello my friend! I want to say that this article is amazing, nice written and come with almost all
vital infos. I’d like to look more posts like this .
Despite the very title, you forgot to show here how to split/extract CSS sprites. Are there ways, aside from Fireworks, to do that?
My relatives every time say that I am wasting my time here at net,
but I know I am getting know-how every day by reading thes fastidious articles or reviews.
Howdy, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot of spam responses?
If so how do you reduce it, any plugin or anything you can suggest?
I get so much lately it’s driving me mad so any help is very much appreciated.
Hello colleagues, pleasant paragraph and good arguments commented at this place, I am actually enjoying by these.
My partner and I stumbled over here coming from a different web page and thought I might check
things out. I like what I see so now i’m following you.
Look forward to exploring your web page yet again.
Remarkable! Its truly amazing article, I have got much clear idea about from this paragraph.
Wow that was odd. I just wrote an extremely long comment but after I clicked submit my comment didn’t show up.
Grrrr… well I’m not writing all that over again.
Regardless, just wanted to say fantastic blog!
Hello, I log on to your blog on a regular basis. Your story-telling style is witty, keep
it up!
Pretty! This has been a really wonderful article. Many thanks for providing
these details.
Saved as a favorite, I loove your blog!
Аppreciate the recommendation. Let me try it out.