Welcome Guest! (App Version 3.1)

websitnero logo name

Image Sprites

Optimization using Image Sprites

Image sprites are helpful in reducing the number of calls made to a server for required images on a web page. Therefore, it is helpful in reducing load on a web server thereby enriching user experience.

If a web page has 5 different images, then while the page loads, it will make 5 different hits to the server (once for each image). This will lead to increased overload on the server. It is a well known fact that whenever we code, we always try to minimize server hits, so why not try to reduce these 5 hits to 1? Is it possible?

Yes, definitely. Image Spite is the answer to this problem. It refers to the method of combining multiple images into one single bigger image composing of all the required smaller images. When required to show an image somewhere, the process is to show a portion of this bigger image that produces the illusion of a smaller image. So, as a result, the end user gets the mirage or impression that one smaller image is being shown.

So, by showing only a portion of one bigger image, we can achieve our task of showing many smaller images wherever required. And, by this way we can reduce the server hit for image retrieval to only 1 instead of 5.

Look at the following example to understand the process:

Example

<style>
.usa{
  width:200px;
  height:100px;
  background:url('flags.png') -0px -0px;
}
.uk{
  width:200px;
  height:100px;
  background:url('.flags.png') -0px -100px;
}
.germany{
  width:200px;
  height:100px;
  background:url('flags.png') -0px -200px;
}
</style>
</head>

<body>
  <img class="usa"/>
  <img class="uk"/>
  <img class="germany"/>
</body> 

Here, you can see that we have one big image consisting of flags of 3 Nations -- United States, United Kingdom and Germany. But, in the example, we presented all the three flags separately, while the original image is one single bigger image consisting of 3 images collapsed into 1.

Further Reading

1. Implementing Image Sprites

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.