Optimize Images using CSS Sprites.

Optimize Images using CSS Sprites.

What is CSS sprite actually?

“Image sprite is nothing but the collection of images put in to a single image.”

Let’s take an example to understand the definition. Suppose you have icons all on your website which are similar to each other in dimensions and actions. Let’s count there are 30 images of 100 KB each. So total it’s 3 MB size and thus a big load on website to download. It will take long time to download the page.

Now Let’s understand how CCS Sprite is useful. These 30 images is put around in one image and the size of the main image remains around 150-170 KB. CSS sprites help the browser to find the right cache and often opened page or images so when next time you download that page. It takes you out the page in cache so your bandwidth is saved.

If your mind is clear about CSS Sprite or if you need more help regarding CSS Sprite CONTACT US for better service on website maintenance.


Let’s understand the use of CSS sprite for hover effect by taking a practical example. In the image bellow when you move your mouse over it the color changes or the effect is visible. This is actually nothing but two images that rolls over when you move and take your mouse off.

Now each image is separately fixed on website having different names. So total here 12 images of at least 12 kb each. Total size of the images will be approximately 150 Kb. We cannot afford that load on website to just download the hover effect. The user gets irritated on your website and its far to contact you for work he won’t even stay on your website. Therefore, no matter your contents are awesome but they need to be represented awesome way. Hmm well in this order, the image is needed to be downloaded fast. And that is why the “CSS Sprites” are used.
Check in the image below the 12 images has been sorted out in one image and that image is of almost 20 Kb. CSS sprites just do not help out on loading faster but they are better with cache so when user downloads the page on second time, the cache appears related so the bandwidth of internet of user is saved.

If you have got CSS related any inquiries. feel free to contact our experts anytime and you will be answered.


  1. Grate Blog :)

    Using CSS Sprites is really Improve Web Page Loading Time. But I’ve Question Can we use Sprites for Banners or Big Size Images? Is CSS Sprites helpful for Banners?

    • Well, Actually background images do not need it.. when they are banners, they do not need sprites. remember using extra sprites even weaken the webpage. The CSS increases load on page speed.

      Adding extra for you advise that I would prefer color more then resetting images on my webpage. I am going to do next on my web pages. yes I am going to take images off and going for less colors and best match.

      Hope you got the answer of your question !!

  2. Great comments and site.

  3. Hey There. I found your blog using msn. This is a very well written article. I will be sure to bookmark it and return to read more of your useful info. Thanks for the post. I’ll certainly return.

Submit a Comment