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.
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 :-