ShoutMeLoud – Shouters Who Inspire

≡ Menu

How To Use CSS Sprites to Boost your Site Performance

How To Use CSS Sprites to Boost your Site Performance

Hello Shouters,

I remember that, I had told Harsh long ago that, when I start Guest Posting, ShoutMeLoud will be my first Destination. Let’s come to the main topic. As Bloggers, Webmaster’s & Site owners we know how important it is to get our sites or blogs to load faster. It not only makes our Readers happy but also plays a vital role in our On-Site SEO. Optimizing your site’s CSS File will result in better load time. And one of the most important techniques of Optimizing CSS is to Use CSS Sprites.

CSS Sprites in simple terms mean : Storing many Images in a Single File. Let’s quickly take a look at the purpose of using Sprites.

Purpose of Using CSS Sprites

CSS Sprites

CSS Sprites Decreases your Site’s Load Time

Every image you use in your site, counts to an HTTP Request. So more the images you use, the higher is the No. of HTTP Requests. And for Decreasing your Load Time you need to reduce your HTTP Requests. Also, Combining many small images into a Single Big Image will help in reducing the size of that image. Checkout the above image to get a clearer idea. The only disadvantage/shortfall of Sprites is that, we cannot use it for repeating images.

HowTo Use the CSS Sprites Technique

I wouldn’t say it’s the easiest to code using this technique. Because you need to first understand how everything works. Start with collecting all your site’s images & combine them into one using Photoshop. Make sure that you maintain a proper distance (3-5 px) between each image. Once you are done with that, Goto File > Save for Web & Devices. Select PNG – 8 with 128 Colors. Name it as share-sprite.png. {Example} Now Create a new file having 1×1 px size and Save it in the .gif format. Commonly it is named as transparent.gif.

Share Sprite

Share Sprite Buttons

Upload share-sprite.png to your site’s directory using a File Manager or an FTP Client. I will be showing an Example of using Sprites for Share buttons. Open up your CSS File & paste the below code in it.

.sprite {
background: url("share-sprite.png") no-repeat;
.twitter {
background-position: 0 0;
.facebook {
background-position: -32px 0;
.stumbleupon {
background-position: -64px 0;
.digg {
background-position: -96px 0;
.reddit {
background-position: -128px 0;
.delicious {
background-position: -160px 0;
.rss {
background-position: -192px 0;
.email {
background-position: -224px 0;

We’re done with the CSS part. Now Open your HTML/PHP page & add the following code. Note that here we are using two class names. The Class name ‘sprite’ is for calling the sprite image using the background CSS property & the second class name i.e. twitter, facebook, etc. are used for adjusting the background-position.

<a href="#"><img class="sprite twitter" src="transparent.gif" alt="Twitter" width="32" height="32" /></a>
<a href="#"><img class="sprite facebook" src="transparent.gif" alt="Facebook" width="32" height="32" /></a>
<a href="#"><img class="sprite stumbleupon" src="transparent.gif" alt="StumbleUpon" width="32" height="32" /></a>
<a href="#"><img class="sprite digg" src="transparent.gif" alt="Digg" width="32" height="32" /></a>
<a href="#"><img class="sprite reddit" src="transparent.gif" alt="Reddit" width="32" height="32" /></a>
<a href="#"><img class="sprite delicious" src="transparent.gif" alt="Delicious" width="32" height="32" /></a>
<a href="#"><img class="sprite rss" src="transparent.gif" alt="RSS" width="32" height="32" /></a>
<a href="#"><img class="sprite email" src="transparent.gif" alt="Email" width="32" height="32" /></a>

That’s it from my side. Hope you got a fair idea on HowTo use CSS Sprites.

Have you used CSS Sprites on your site’s or blog’s ??

Print Friendly
  • Author Bio

  • Latest Post

Article by Mani Viswanathan

Mani has written 1 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

    { 19 comments… add one }

    • Robert

      Great post! The bacground-position increases in 32px increments. Should they increase in 35px increments to account for 3px space between the images?

    • Christian Fei

      First of all thanks!
      I have a little advice for you: the reason of using sprite images is to lower the number of request and the file-size.
      But you’re using a file (which has to be requested) instead of a simple base64-encoded transparent gif:


    • laura

      What about sprites with images that are in two rows and two columns?

    • Mani Viswanathan @ DailyBlogging

      @Sreejesh Using a transparent image in the src tag is a good practice. That’s the reason I’ve included that.

    • Sreejesh@techgyo

      I somehow missed this article and happen to see it now. Mani, you don’t need to include the “src” tag when you already have declared the Sprite class. You should try yourself in this HTML Editor where you can see picture placeholders.

    • Nihar

      I read about this in the past.

      It is great and reduces the size of the image thus increases the site speed (in terms of loading)

      But have to admit creating css sprite is a difficult task (for instance: whole layout of a blog)

    • Jeff

      Most of the time the total disk space isn’t the “boost factor” so much a the reduced number of calls to the server, which is really where performance will be improved the most.

      • Mani Viswanathan @ DailyBlogging

        Well, Reducing your HTTP Requests will not only make your blog load faster for your visitors, but it will also improve your on-site SEO.

    • Swamykant

      Hi Mani

      Thanks for sharing this tip. This will be very useful for me :)

      • Mani Viswanathan @ DailyBlogging

        Glad this tutorial would help you to Optimize your Site. Thanks for Stopping by Swamykant.

    • aswin

      I really like the example you took
      Good one

      • Mani Viswanathan @ DailyBlogging

        Thanks for Stopping by aswin :)

    • Dinesh @ DailyBlogMoney

      Thanks for the post.
      I also suggest to visit which works better on any website with sprite suggestion.

      Its very easy to use and implement.

      Have a look.

      • Mani Viswanathan @ DailyBlogging

        Spriteme is a good option. It provides us with a bookmarklet which identifies the bg images pretty easily.

    • Namit Gupta

      Seems interesting. Will try it out.

    • Shailu @ New Trends

      I knew that lot of images to site makes it to load slower but never get any resolution except to reduce the no. of images. But this is great post and solve the problem of slow page load.

      • Mani Viswanathan @ DailyBlogging

        Shailu, You can also try and optimize the image (as I’ve mentioned in the post) by saving it in png-8 format.

    • aatif

      Thanks for the tip , i will try to use this to decrease my site load time .

      • Mani Viswanathan @ DailyBlogging

        Aatif, you Should try and use Sprites wherever possible.


    Leave a Comment