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 |
Have you seen any beautiful image on the net and you want to use some part of that image in your navigation menu bar and more smaller part of that image as a border then what you do cut that portion of that image and write your css code by repeating that image and increasing the size of your webpage that leads to more page size and slow loading of page.if this the case that you do then we have a better solution using css sprite images through which you will be able to make css sprites of any image.
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.
#Untitled {width:32px;height:21px;background-position:-252px -30px;background-repeat:no-repeat;}
#Untitled {background-image:url(http://2.bp.blogspot.com/-4_4duaReIQ4/UgIYsx3hlmI/AAAAAAAAAn4/nwq1gXR8zNc/s320/FESS+your+CSS+5.png);}
#Untitled {background-image:url(http://2.bp.blogspot.com/-4_4duaReIQ4/UgIYsx3hlmI/AAAAAAAAAn4/nwq1gXR8zNc/s320/FESS+your+CSS+5.png);}
TOOL USED:-SPRITEBOX.NET
Now you are done .put the second code in your css style-sheet and use the first one anywhere you want this way the browser does not have to wait for the image to be downloaded because the sprite image will be loaded after the first one and the first one which is original will be loaded first when your style-sheet loads and hence this way this lowers the HTTP requests and make your loading page more faster.
0 comments :