Create Automatic CSS Sprites Of Any Image For Fast Loading Page
How to create css sprite of any image to make fast loading page. What you do when you see an beautiful image and want to use it as a background don't panic we got an solution.
|Create Automatic CSS Sprites Of Any Image For Fast Loading Page|
Why you should not use the custom old method.Increases the size of code.
Slow loading speed of the page.
Big chunk of code with more HTTP requests.
How to increase loading speed of page
We came out to a solution through which you will be able to create css sprite of any image through this online tool named as spritebox. so lets see how it works and how it can be more beneficial for you.
➨ First copy the URL of any image that you see on the internet.
➨ Copy the Image URL in this box as shown in the below image.
|Copy the Image URL in this box as shown in the below image.|
➨ Now hit create css button as shown in the image below. through this you will get the css code of that image.
|create css button as shown in the image below|
➨ As you can see what happened after hiting the create css button . Now it has produced new css code of that image . Now simply select the part of that image that you want to use as a background of your webpage or for any use.
|select the part of that image that you want to use as a background|
you can see we have selected a small part of that image see in orange color.
➨ Now you can also see the preview of the image how it will look take a look below.
|preview of the image|
➨ Now in next step again hit the create css button.now you can see we have two css code of that image first is the css code of the image URL and second one is the css sprite of that selected image.
|code of the image URL and second one is the css sprite|
➨ Now copy both of the code first is the css code of that image url that you pasted over there and the second one is the sprite image of that css code.
➨ Now click on the # button if you want to use it as a div and now see the code.