Css Sprites for Website Performance

In this tutorial you will learn about css sprites.
Sprite means one big image. You may seen css techniques where developer use css sprites.
When you hove on a button or image it will changed the background. But if you see thee css
then you will see that there they use one image rather than use two images.

By combining different image we make image sprites.

I haven’t used CSS Sprites in the past time. As i am developed and not expert on photo shop so i just used separate image.
After reading yahoo’s Best Practices for Speeding Up Your Web Site. I think that we have to use
css sprites. So i used css sprites for our this product. smart-social-network-count-wordpress-plugin

Here is the template image
css-sprites-smart-social-count-wodpress-plugin-template
Before use css sprite used 7 images which size is 9.56 KB (9,791 bytes)
Afer uses css sprite : 9.52 KB (9,749 bytes)

So you think what is the benefit of css sprites

The benefits of css sprites

1. Css sprites are easier to slicing up and dealing with multiple images is time consuming.
2. Decrease server request time.
3. Fast load. and more.

Notes : It decrease our server request . Where before css sprite it call server 7 requests after css sprites it call 1 request.

How to create a css sprites

Here is the image inside
Inside photoshop css sprites image screen shot

This is our final image

css sprite image smart social share count

Now i will show you how to code this to to css.

[smProductImageAdd src="http://learneveryday.net/codecanyon/adverticement/add_codecnayon_smart-social-network-count-wordpress.png" alt= "Social network count wordpress plugin - CodeCanyon Item for Sale" href="http://codecanyon.net/item/smart-social-network-count-wordpress-plugin/206469" title="Smart Social Network Count WordPress Plugin" description="Smart Social share is a wordpress plugin . Which helps you show all your social network status in one place with statics." ref="marifdu"]

Css Sprite Tutorial

Here is our html code


 <div class="sidebarContainer" id="sidebarSubscribe">
    	<a target="_blank" href="http://feeds.feedburner.com/Tutorialzine" class="subscribeSidebarBox" id="sidebarFaceBook">
            	<span class="icon"></span>
                <span class="title">Fans On Facebook</span>
                <span class="count">12,822+</span>
            </a>
        	<a target="_blank" href="http://feeds.feedburner.com/Tutorialzine" class="subscribeSidebarBox" id="followTwitter">
            	<span class="icon"></span>
                <span class="title">Twitter Followers</span>
                <span class="count">12,822+</span>
            </a>
        
            <a target="_blank" href="http://twitter.com/Tutorialzine" class="subscribeSidebarBox" id="subscriberRSS">
            	<span class="icon"></span>
                <span class="title">Rss Subscribers</span>
                <span class="count">7,588+</span>
            </a>
            
                  <a target="_blank" href="http://twitter.com/Tutorialzine" class="subscribeSidebarBox" id="flickerPhoto">
            	<span class="icon"></span>
                <span class="title">Rss Subscribers</span>
                <span class="count">7,588+</span>
            </a>
                      <a target="_blank" href="http://twitter.com/Tutorialzine" class="subscribeSidebarBox" id="youtubeSubscribers">
            	<span class="icon"></span>
                <span class="title">Youtube  Subscribers</span>
                <span class="count">7,588+</span>
            </a>
            
                          <a target="_blank" href="http://twitter.com/Tutorialzine" class="subscribeSidebarBox" id="vimoVideos">
            	<span class="icon"></span>
                <span class="title">Vimo Total Videos Upload</span>
                <span class="count">7,588+</span>
            </a>
            
            <a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=Tutorialzine&amp;loc=en_US" class="subscribeSidebarBox" id="subscribeEmail">
            	<span class="icon"></span>
                <span class="title">Subscribe for updates via</span>
                <span class="count">Email</span>
            </a>
  </div>
    
        <div class="clear"></div>
    
    </div>

Bellow is our css code :

#smart-social-compact-one-column{
	width:230px;
	 
	border:5px solid #E2E2E2;
}

#smart-social-compact-one-column h3 {
    background: none repeat scroll 0 0 #DBDBDB;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
	  border-bottom: 1px solid #CCCCCC;
    color: #666666;
    font-weight: normal;
    line-height: 1.8em;
    margin: 0 auto;
   /* padding: 0 0 0 7px;*/
	text-align:center;
}
 



#smart-social-compact-one-column  #sidebarSubscribe {
    padding: 10px 10px 10px;
}
}
a.subscribeSidebarBox {
    background-color: #FAFAFA;
    border-radius: 10px 10px 10px 10px;
}

a.subscribeSidebarBox {
    border: medium none;
    cursor: pointer;
    display: block;
    height: 50px;
    margin-bottom: 2px;
    position: relative;
    width: 210px;
}
 
#sidebarSubscribe .icon {
    background: url("images/social_icon_column_1.png") no-repeat scroll 0 0 transparent;
     height: 55px;
    
    width: 50px; 
 
}

#sidebarSubscribe span {
    color: #6E6E6E;
    display: block;
    padding: 3px;
    position: absolute;
    text-shadow: 1px 1px 0 white;
}
#sidebarSubscribe .title {
    font-size: 12px;
    left: 70px;
    top: 8px;
}
#sidebarSubscribe .count {
    font-size: 20px;
    font-weight: bold;
    left: 70px;
    top: 23px;
}
a.subscribeSidebarBox {
    background-color: #FAFAFA;
    border-radius: 10px 10px 10px 10px;
}
 
 
#subscriberRSS .icon {
    background-position: -300px 0px;
}
#sidebarFaceBook .icon {
    background-position: 0px 0px;
}
#followTwitter .icon {
       background-position: -250px 0;
}
#flickerPhoto .icon {
       background-position: -50px 0;
}
#youtubeSubscribers .icon {
       background-position: -100px 0;
}
#vimoVideos .icon {
       background-position: -150px 0;
}
#subscribeEmail .icon {
       background-position: -200px 0;
}


.clear
{
	clear:both;
}

Explanation :
Our image width is 460 and height is 52. So all our icon in the horizontal direction.
Each image width is 50px after 50px we give a right white border. So our first image start from top 0 left 0.

If we go from left to right then the x – position will be negative ( – )

So you can see that our icon image x-position increase with negative value.

You can download the full source code or view demo.

You can see this article for more details :
Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests

Related Tropics : you can read Chris Coyier article on css-sprites which will help you visit .

 

I am Muhammod Arifur Rahman, CEO and founder of Learneveryday.net I worked on asp.net mainly. My second skill language is php and wordpress. I am also work on jquery. I love to work with new problem and feel happy when solve. www.smartdatasoft.com is my own company.

5 Comments on "Css Sprites for Website Performance"

  1. shimesaba says:

    CSS Sprites is good for SEO?

  2. yes, because google new rules of seo is the site need to load fast . and using css sprites your site performance will increase huge.

  3. adam bourg says:

    You can just use a CSS sprite generator

    I like: http://csssprites.com/, there are many choices though. But it’ll generate 1 image, with all the positions of your images.

  4. Sujith says:

    If you use ASP.NET, you could just have your sprites done on the fly with this:
    http://www.codeproject.com/KB/aspnet/cssspritegenerator.aspx

    That way, if you have new or changed images, you don’t have to make new sprites. It also writes the CSS for you.

  5. dahlla says:

    Thank you the tutorial..very usefull and interesting.

Got something to say? Go for it!

*

 
More in CSS, CSS Tips (3 of 6 articles)