According to w3schools, An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth…
What Are CSS Sprites?
As in the new era, everyone want to be fast and need everything to be fast so this concept was first generated for games that have detailed graphics mean too many images but when you will run the game then it will take a huge load time to pick every image when you will need it one by one. But after this concept, this was over because all required images are now places on one image and that image will be load at start while you are seeing “Game loading…”.
Soon after this, this concept turn into designing industry where it required the most due to slow internet connection and everyone want to make its site fast. When you will upload single single image then it mean that there are too many URLs in your one webpage that make every HTTP request and your visitor will see a loading icon on his browser.
Through this, you will create only one image mean that one HTTP request and rest can be done via CSS positioning that will not make any request. Its just a CSS. Now you have to use this too in your webpage to make your blog/site loading time fast. So below we tutorialized the whole phenomena that you can learn easily. Google it if you want to know more.
1.) Extremely Low Loading Time Of Your Web.
2.) Easy To Upload And Add Images On Your Web.
3.) No Need To Keep A Folder Full Of Images.
4.) You Have To Compress Only One Image.
5.) Can Add More Images Without Distrubing Previous One.
5.) Pure CSS2.0 Code To Use.
How To Make A Sprite Image?
There is nothing special to make a Sprite Image. You just have to collect all your image that you used in your template in one place then open all of them in one page/image and place every image after previous image from left to right and top to bottom then save it. Confused then here we are sharing Facebook Sprites Image from which, you can easily understand what to do with all your images.
How To Use A Sprite Image?
First you have to make you CSS sprites image as described above. After doing that, You have to come to add CSS that will do the main part of this. For this purpose, we are using a new CSS Sprites image as shown below to learn and get.
Now for DEMO, these all color boxes are your different images added on one image. Now you want to use only black box in a DIV background of your web template So How To Do This?
For this purpose, you have to write below code in your desired DIV CSS…
background-position: -XXpx -YYpx;
Now start editing the above CSS code as per your Data. First set the width: XXpx; with your desired image width like our black box have 100px width. After this set the height: YYpx; with your desired image height like our black box height is 100px. Now if you have transparent background image then leave background-color: transparent; otherwise add any color so that if will not load then this color will be show. Now add your whole Sprites Image URL at background-image: url(YOUR-IMAGE-URL); After this, if you don’t want to repeat your desired image as black box then leave background-repeat: no-repeat; as it is otherwise change it with your repeating direction or delete it to repeat in both direction. In last the main this is here. Your Image Position. edit background-position: -XXpx -YYpx; with first adding the distance from sprites image left side to your desired image like our black box in upper image left side in pixel but in minus at XXpx as shown in the above code and do the same for YYpx by adding the distance from Sprites Image top to desired image top like our black box in upper image in pixel and also in minus too.
Now for upper Black Box in image, we edited the code and now the code looks like below…
background-position: -300px -100px;
As you can see the live DEMO below where we are picking black box out of upper coloured boxes images.
There are may other CSS3 codes available for background property like below that you can know from w3schools briefly.
- background-size: XXpx YYpx;
- background-attachment: fixed;
- background-clip: content-box;
- background-origin: content-box;
13 Free CSS Sprites Images Online Generator:
These online tools just collect all you small images and place them in a new image perfectly by saving space and in last, give you style code mean background-position of you each added image to use it anywhere. If you know image editing then you can do it offline too.
This is what we have and as per our rule, we shared it with you. Now if you liked this then share it with your friends and leave your feedback and if you have any query related to this code, You can contact us freely and we will reply you as fast as we can. Stay with us because we have something more for you in our next post. Have a nice life!