How To Make CSS Sprites Images And Use Them To Speed Up Your Site?

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 generate 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 wants to be fast and needs everything to be fast so this concept was first generated for games that have detailed graphics means too many images but when you 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 placed on one image and that image will be loaded at the start while you are seeing “Game loading…”.

Soon after this, this concept turned into designing industry where it required the most due to slow internet connection and everyone wanted to make its site fast. When you upload single single image then it means that there are too many URLs on your 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 meaning that one HTTP request and the rest can be done via CSS positioning that will not make any request. It’s just a CSS. Now you have to use this too in your webpage to make your blog/site loading time fast. So below we materialized the whole phenomenon that you can learn easily. Google it if you want to know more.

Features:

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 Disturbing 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 the images that you used in your template in one place then open all of them in one page/image and place every image after the previous image from left to right and top to bottom then save it. Confused then here we are sharing Facebook Sprites Images from which, you can easily understand what to do with all your images.

How To Use A Sprite Image?

First, you have to make your 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 a black box in a DIV background of your web template So How To Do This?

For this purpose, you have to write the below code in your desired DIV CSS…

#DIV {
width: XXpx;
height: YYpx;
background-color: transparent;
background-image: url(YOUR-IMAGE-URL);
background-repeat: no-repeat;
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 has a 100px width. After this set the height: YYpx; with your desired image height our black box height is 100px. Now if you have a transparent background image then leave background-color: transparent; otherwise add any color so that if will not load then this color will be shown. 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 a 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 the upper Black Box in the image, we edited the code and now the code looks like below…

#DIV {
width: 100px;
height: 100px;
background-color: transparent;
background-image: url(https://www.exeideas.com/wp-content/uploads/2014/06/CSS-Sprites-Image.png);
background-repeat: no-repeat;
background-position: -300px -100px;
}

As you can see the live DEMO below is where we are picking black boxes out of upper colored boxes images.

There are many other CSS3 codes available for background properties like the below that you can know from w3schools briefly.

background-size: XXpx YYpx;
background-attachment: fixed;
background-clip: content-box;
background-origin: content-box;

7 Free CSS Sprites Images Online Generator:

These online tools just collect all your small images and place them in a new image perfectly by saving space last, giving you style code means background-position of each added image to use it anywhere. If you know image editing then you can do it offline too.

1. css.spritegen.com
2. www.spritecow.com
3. www.instantsprite.com
4. timc.idv.tw/canvas-css-sprites/en
5. spritegen.website-performance.org
6. www.web2generators.com/graphism/css_sprite_creator
7. https://www.toptal.com/developers/css/sprite-generator/

Last Words:

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 if you have any query related to this code, You can contact us freely and we will reply to you as fast as we can. Stay with us because we have something more for you in our next post. Have a nice life!