Being a webmaster, a site owner and a blogger, you might be aware of how important the loading speed of the blog is. It is not only good for on-site seo, but it also helps to decrease the bounce rate.

You might be thinking here that I’m going to tell you about a cache plugin, but lemme tell you that its something else!

Share post to read further:

Also check: Speedup Loading Time of WordPress Blog Using Cache Plugin

You can increase the speed of your blog by optimizing its CSS file & the best method to do that is to make use of “CSS sprites”.

CSS Sprites:

It means to store lots of images under one file. Now, lets take a quick look on the purpose of making use of Sprites.

Check out this below shown image to get an idea regarding the purpose of CSS Sprites:

How To Use CSS Sprites to Boost your Site Performance

 

If you are gonna add more images on your site, there will be an increased number of (HTTP Requests). Therefore, to solve this issue, you need to combine all the small pictures together to make it single image. What this will do is that it will reduce the image size to load your page super quick. isn’t that amazing?

The only shortfall/disadvantage of using Sprites is that it cannot be used for the purpose of repetition of images.

How can you use (CSS-Sprites-technique) ?

I won’t say that its extremely easy to code by making use of this technique because firstly, you need to have a clear understanding about how all this actually works. In the very beginning, collect all the images with in your site and with the help of photoshop, combine them in a single pic. There should be a distance of “3 to 5px” between every image. After doing all that, (Goto–>File–>Save for Web & Devices) choose PNG {8-with-128-colors}. Keep the name of your file as “share-sprite.png”

How To Use CSS Sprites to Boost your Site Performance

. Now, create new file with the size of 1*1 px & save it in (.gif) format. Normally, its named as {transparent.gif}.

How To Use CSS Sprites to Boost your Site Performance

Upload (share-sprite.png) file on the directory of your site by making use of FTP Client or a File Manager. Check out the example of how I used “Sprites” for social sharing buttons. Simply, open your (CSS-file) and paste the below mentioned code.

.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;

After completing the (CSS-part), open up PHP/HTML page and include the code mentioned below. Do keep in mind that we are using 2 class names over here. Class name (sprite) is for the purpose of calling sprite image by making use of “background-CSS-property” and the (2nd-class-name) that is Facebook, twitter, etc for the adjustment of the position of background.

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

To download all these codes click here

To get the latest updates in your email, Subscribe us Via Email

About The Author

I am a full time blogger and a content writer as well. I try to help my readers and solve their problems related to SEO, web hosting, freelancing and other related stuff.

2 Responses

Leave a Reply

Your email address will not be published.

CAPTCHA

*