How To Use CSS Sprites to Boost your Site Performance

IN Design

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

Click to activate Offer & visit site Discount added automatically

Ultimate Blogging Strategies

Sign Up Today For Free

join our site and get free content delivered automatically each time we publish

100% privacy. we will never spam you

No related entires
No related entires
  • 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.


    Testimonials
    Send Us Inquiry

    Comments

    1. Robert says

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

    2. Mani Viswanathan @ DailyBlogging says

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

    3. Sreejesh@techgyo says

      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.

    4. Nihar says

      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)

    5. Jeff says

      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 says

        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.

      • Mani Viswanathan @ DailyBlogging says

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

      • Mani Viswanathan @ DailyBlogging says

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

    6. Shailu @ New Trends says

      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 says

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>