iBlognet

Home SEO

Boost Site Speed Using CSS Sprites

by Editor

You might already know, that Page Speed is now consider as one of the most important parameter to rank your website in search engines. So, its important that you should optimize your website. And one of the best way to do it, is to optimize on-site images.

There are many ways to optimize images like compressing, croping, or resizing. But that’s not all. You should also reduce the HTTP-request from server, which can be done using CSS Sprites! In this post I will show you how to reduce site load time using CSS Sprite generator.

As you can see I’m using CSS Sprites on my blog, at the top-right navbar with the social icons and in the subscription box. See the images below:


  • Without CSS Sprites


7 HTTP request. Size: 7.8 KB

  • With CSS Sprites


1 HTTP request. Size: 2.61KB


  • Without CSS Sprites


4 HTTP request. Size: 19.10KB

  • With CSS Sprites


1 HTTP request. Size: 7.61KB


You can see the difference above, after using CSS Sprites. Not only it reduces the HTTP-request, but also saves the server bandwidth and decreases load on the server.
You can do this on your site too, by just following the steps below:

1. First of all you need to go through your site source code and grab all those images which you want to sprite and save them in a folder on your desktop.

2. Arrange those images serially as per your need. Like 1.png, 2.png……

3. Zip those images in a file.

4. Now go to CSS Sprite Generator and upload the zip file. Change the settings as per your need and click on Sprite images.

5. Download the sprite image and copy the CSS code in notepad. Don’t edit the CSS code, if not required. And just link those images using class.

6. If you don’t know how to link those images, you can use image mapping. Go to Online Image Mapping Tool and link those images using rectangle or any other shapes.

VIDEO TUTORIAL:

Note: The above steps are useful, only if the images are close to each other. If you want to sprite different images on a page, install SpriteMe by dragging this link to your bookmark toolbar or right-click to add it to your favorites:

After dragging the link, go to the page you want to sprite and click on the SpriteMe link.
Check the FAQ section on spriteme.org

You might also like to check these articles:
Background Repeat and CSS Sprites
CSS Sprite: Photoshop Script Combines Two Images for CSS Hover
JavaScript Sprite Animation Using jQuery
How to Preload Images When You Can’t Use CSS Sprites

Article by »


Admin and Editor of iBlognet iBlognet has written 294 fantastic article(s) on iBlognet.


Author Connect »

1 Abrar Mohi Shafee

I first learned about the css sprites from GTMetrix which is a great page speed testing program. But unfortunately didn’t know how to make it happen. But after reading your writing on this, my problem is solved. So, thank you very much. I wish all of the bloggers to use css sprites to make their blog more faster than now.

Comments on this entry are closed.

Previous post:

Next post: