Hello readers, Today in my blog I will discuss about a new topic related to images i.e Sprite images.

As in a web page it includes number of images whether small or even it could be icons or the buttons which basically takes a long time to load and generate requests form the multiple servers.

So , now basically to reduce for improving the loading time of a web page and which therefore effects the over the performance of a website.

Define Sprite what it is ?

Sprite are basically two-dimensional images which are made by combining multiple small images into one larger image with a defined X and Y coordinates.

Advantage Of Using Sprite Images :-

By using Sprite images , the hover image gets displayed immediately whenever we place the mouse pointer over it , since all images are combined within a single image that basically results into a smooth hover effect while if we will place the mouse pointer over a non-sprite image , it would take some time to display the hover images because firstly it would take time to load as requested from the server .

Creating Sprite Images :-

We can create Sprite Images Using various CSS Sprite Generator which are available online easily and are easy to use .

These CSS Sprite Generators allow us to upload multiple files and therefore generates a Sprite Image from them.

Other than this , the Online Generator also provide us with the CSS code basically the background – position value , height and width with the X and Y coordinates for each image which anyone targets.

Displaying a part of image from a Sprite Image :-

With the help of CSS property we can also display a part from the whole Sprite Image whichever we need.

With the help of background-position property it makes our work easy for positioning the required image at the right place whenever we need.

The Background-Position property basically sets the starting position of a background-image .

By default , the background-image is placed at the top-left corner of an element but we can change the its value as required .

We can adjust its value vertically and horizontally including the top, bottom,left and right directions as required.

Conclusion :-

Hence, We can easily use and understand the use of Sprite Images in our Web page.

Note :- Sprite Images will be displayed on all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.

Below is a list of various url of Sprite Images Generator these are as follows :-

1.  CSS-Sprit.es

2.  Website Performace CSS Sprite Generator

3. Drupal CSS Sprites Generator Module

4. CSS Sprite Generator

5. Sprite Creator 1.0

6. SpritePad