• X

    How To Use CSS Sprites to Boost your Site Performance

    By in Design

    Bluehost hosting

    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 How To Use CSS Sprites to Boost your Site Performance

    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 How To Use CSS Sprites to Boost your Site Performance

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

    Get Free Blogging updates in your Email

    Article by

    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.

    { 20 comments… read them below or add one }

    aatif

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

    Reply

    Mani Viswanathan @ DailyBlogging

    Aatif, you Should try and use Sprites wherever possible.

    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

    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.

    Reply

    Namit Gupta

    Seems interesting. Will try it out.

    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

    Mani Viswanathan @ DailyBlogging

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

    Reply

    aswin

    I really like the example you took
    Good one

    Reply

    Mani Viswanathan @ DailyBlogging

    Thanks for Stopping by aswin :)

    Reply

    Swamykant

    Hi Mani

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

    Reply

    Mani Viswanathan @ DailyBlogging

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

    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

    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.

    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

    Mohit

    Great Info my site loads very slow,I will try your techniques

    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

    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

    laura

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

    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

    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

    Leave a Comment

    Previous post:

    Next post:

    `