Page Speed plays a very important role in better ranking and generating organic traffic from search engines. CSS sprites are the best way to reduce the number of HTTP requests. The web page has many images, particularly many small images, such as icons, buttons, etc. can take a long time to load and generates multiple HTTP requests.
Just suppose you have 10 image on your page, browser has to download each image individually and make extra roundtrip and HTTP request to download each image. If you have 1 image only, this reduces the HTTP requests and load your site faster. The Browser downloads 1 image and shows in different places of the web page.
How to use CSS Sprite Technique:
To Understand use of CSS Sprite, first we learn how it works by following example about social buttons by Css Sprite.
Collect all images of your web page and combine into one with the help of Photoshop. If you lack knowledge of Photoshop you can do it with the online sprite tools. like this.
After combining upload it to your site root directory or your media folder in WordPress. You can use the above image for your social button for WordPress. here we explain the CSS and code of the above image Now open your CSS stylesheet file and add the below code
.sprite { background: url('sprite.png') no-repeat; margin-right: 15px; width: 48px; height: 48px; }
.sprite.rss { background-position: 0 0; }
.sprite.facebook { background-position: -58px 0; }
.sprite.twitter { background-position: -116px 0; }
.sprite.google_plus { background-position: -174px 0; }
.sprite.linkedin { background-position: -232px 0; }
.sprite.youtube { background-position: -290px 0; }
In the above code, you can change the parameter:
URL = full URL in case of uploading WordPress media directory.
margin-right = spacing between images if use in a row.
width and height = In case creating your own image.
Now where you want show the image add following Html/Php code
<a href="" target="_blank"><div class='sprite rss'></div></a> <a href="" target="_blank"><div class='sprite facebook'></div></a> <a href="" target="_blank"><div class='sprite twitter'></div></a> <a href="" target="_blank"><div class='sprite google_plus'></div></a> <a href="" target="_blank"><div class='sprite linkedin'></div></a> <a href="" target="_blank"><div class='sprite youtube'></div></a>
Note : using div‘s inside a’s is semantically correct in HTML5
So start optimization of your site and uses sprites instead of too many small images and icons.