ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

How To Use CSS Sprites to Boost your Site Performance

bluehost
How To Use CSS Sprites to Boost your Site Performance

This  is a guest post by Mani who blogs at Dailyblogging. If you would like to write for ShoutMeLoud, check our guest posting guidelines.

Hello SML Readers. 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, Webmasters & 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 ??

  • 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?

      Reply
    • 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:

      src: http://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

      Reply
    • laura

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

      Reply
    • Mani Viswanathan @ DailyBlogging

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

      Reply
    • 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.

      Reply
    • 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)

      Reply
    • 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.

      Reply
    • Swamykant

      Hi Mani

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

      Reply
    • aswin

      I really like the example you took
      Good one

      Reply
    • Dinesh @ DailyBlogMoney

      Thanks for the post.
      I also suggest to visit http://spriteme.org/ which works better on any website with sprite suggestion.

      Its very easy to use and implement.

      Have a look.

      Reply
    • Namit Gupta

      Seems interesting. Will try it out.

      Reply
    • 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.

      Reply
    • aatif

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

      Reply

    Leave a Comment