In this tutorial, we will discuss how to use SpriteMe tool to simplify the creation of CSS Sprites for your website with an example. This post can be seen as an extension for the explanation on creating CSS Sprites for blogger. However, this is generic and not specific to any blogging platform. I would assume that you know some basics of CSS and HTML which are important towards this example.
SpriteMe greatly simplifies the creation of CSS Sprites. But, this tool can really make you wondering if you don't get to the root of using it properly. We will provide a step by step guide that will take you to the basics of using Sprite Me. Get to the official SpriteMe website,and drag the link to your toolbar to install SpriteMe. Now, you can launch SpriteMe by clicking it on the toolbar against the test page, which we will be showing shortly. When you click on SpriteMe in the toolbar, you will (should) get a window as shown below;
 |
| Using SpriteMe |
<html>
<head>
<style type="text/css">
img.a6
{
width:82px;
height:55px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GD1niCl2GJa7Fyo0dXYfTdBlhBOaZdj1mkA4PVieh-uPYmP5877LuIcs04VmoA9ZVM5_DndHqO1fBbtyBPNe2R7Uwvdzl8DhKBRW5JtXD7OabtTuqdc7Ze773fMRmEC3i7miK-I6VZMV/s1600/Image1.png) 0px 0px;
background-repeat:no-repeat;
}
img.a7
{
width:82px;
height:55px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZCi7zXpI1qMq1Jwfemf_wDyCTINIYAkBk2TaUjScqZHwbTJMBvVpZ6HOeKcJSnnK0rtlnCwutHFJpvfrEZ8STLAtqR3me2zTAf3MSwVOrN-YZ2ynM7AoniwARf5U2e6ld_ViX2qSAQik/s1600/Image2.png) 0px 0px;
background-repeat:no-repeat;
}
img.a8
{
width:82px;
height:55px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdKrLGK9Wl_gOAAaxqH6nbBRQS9hhOKTPzp4SnJD3YIJTQnQPjuPrZMbWgq3_XzGDRnuz6mwaoTChIfYUoqDrp1ZwX4KtmBDb92_cVDoGiHy_kKB_q816PipBVn5MGg7O4NSB3ZSw9KCZ/s1600/Image3.png) 0px 0px;
background-repeat:no-repeat;
}
img.a9
{
width:82px;
height:55px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjncUTVU-2pIu90vvKmxRWzt_Qy977CiwGHyqskalmMaBVEbF5bwPyRRcTz80F-ghrMYdvPSLME4-hVXgBNs-8Aq_al9L4VqZuo2Cvn1v-PsGebsRt66s5CFJv0lV3ezxq_VxZUNKFE5sPl/s1600/Image4.png) 0px 0px;
background-repeat:no-repeat;
}
img.a10
{
width:82px;
height:55px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4GAJW7MXbpIIDfra-2k9lQRYyFVHzYTafNHNvfbw4-Ga9_gO6qA6-zDaIIbx7v6M8pcondLgfr0zFsUUbXvnCrUFLXsm1sdE_AvXdBfOSp1SCVVFx_Q7g3YRYyZICSpdyDJMhUMx6-fLg/s1600/Image5.png) 0px 0px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<br />
<img class="a6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GD1niCl2GJa7Fyo0dXYfTdBlhBOaZdj1mkA4PVieh-uPYmP5877LuIcs04VmoA9ZVM5_DndHqO1fBbtyBPNe2R7Uwvdzl8DhKBRW5JtXD7OabtTuqdc7Ze773fMRmEC3i7miK-I6VZMV/s1600/Image1.png">
<img class="a7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZCi7zXpI1qMq1Jwfemf_wDyCTINIYAkBk2TaUjScqZHwbTJMBvVpZ6HOeKcJSnnK0rtlnCwutHFJpvfrEZ8STLAtqR3me2zTAf3MSwVOrN-YZ2ynM7AoniwARf5U2e6ld_ViX2qSAQik/s1600/Image2.png">
<img class="a8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdKrLGK9Wl_gOAAaxqH6nbBRQS9hhOKTPzp4SnJD3YIJTQnQPjuPrZMbWgq3_XzGDRnuz6mwaoTChIfYUoqDrp1ZwX4KtmBDb92_cVDoGiHy_kKB_q816PipBVn5MGg7O4NSB3ZSw9KCZ/s1600/Image3.png">
<img class="a9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjncUTVU-2pIu90vvKmxRWzt_Qy977CiwGHyqskalmMaBVEbF5bwPyRRcTz80F-ghrMYdvPSLME4-hVXgBNs-8Aq_al9L4VqZuo2Cvn1v-PsGebsRt66s5CFJv0lV3ezxq_VxZUNKFE5sPl/s1600/Image4.png">
<img class="a10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4GAJW7MXbpIIDfra-2k9lQRYyFVHzYTafNHNvfbw4-Ga9_gO6qA6-zDaIIbx7v6M8pcondLgfr0zFsUUbXvnCrUFLXsm1sdE_AvXdBfOSp1SCVVFx_Q7g3YRYyZICSpdyDJMhUMx6-fLg/s1600/Image5.png">
</body>
</html>
When you open this HTML page, you get five images on the page as shown in the diagram below;
 |
| Un Sprited Individual Image Files |
To apply CSS Sprite, you have to generate a single image for all these individual images and refer them appropriately. This can be a tiresome exercise, which is greatly simplified by SpriteMe. To do this, open the HTML in a webbrowser and click on SpriteMe on your toolbar. For this example, you will get a screen as shown below; (with recommendations)
 |
| SpriteMe Suggestions |
SpriteMe recommends that there are five individual images and they can be combined into one as a long Sprite to improve the performance. Click on "Make Sprite" and then click on "exportCSS" as shown above. SpriteMe provides one single image file of size 1Kb for our example as shown below;
We got a sprited image! but, what about CSS changes? When you clicked on export CSS, Sprite Me comes with CSS suggestions. In my case, I got the following changes to the CSS I presented earlier;
So, what is required now to improve the performance of the page using the CSS Sprite method is to change the CSS definitions based on the suggestions given by SpriteMe. Also, the background URL needs to be changed to the local image we have saved. The Modified HTML code with CSS Sprite implemented is provided below
 |
| Single Sprited Image |
img.a6 {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GD1niCl2GJa7Fyo0dXYfTdBlhBOaZdj1mkA4PVieh-uPYmP5877LuIcs04VmoA9ZVM5_DndHqO1fBbtyBPNe2R7Uwvdzl8DhKBRW5JtXD7OabtTuqdc7Ze773fMRmEC3i7miK-I6VZMV/s1600/Image1.png");
background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/5fd2f7b8f6/spriteme1.png");
background-position: -10px -10px;
}img.a7 {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZCi7zXpI1qMq1Jwfemf_wDyCTINIYAkBk2TaUjScqZHwbTJMBvVpZ6HOeKcJSnnK0rtlnCwutHFJpvfrEZ8STLAtqR3me2zTAf3MSwVOrN-YZ2ynM7AoniwARf5U2e6ld_ViX2qSAQik/s1600/Image2.png");
background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/5fd2f7b8f6/spriteme1.png");
background-position: -10px -85px;
}img.a8 {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdKrLGK9Wl_gOAAaxqH6nbBRQS9hhOKTPzp4SnJD3YIJTQnQPjuPrZMbWgq3_XzGDRnuz6mwaoTChIfYUoqDrp1ZwX4KtmBDb92_cVDoGiHy_kKB_q816PipBVn5MGg7O4NSB3ZSw9KCZ/s1600/Image3.png");
background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/5fd2f7b8f6/spriteme1.png");
background-position: -10px -160px;
}img.a9 {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjncUTVU-2pIu90vvKmxRWzt_Qy977CiwGHyqskalmMaBVEbF5bwPyRRcTz80F-ghrMYdvPSLME4-hVXgBNs-8Aq_al9L4VqZuo2Cvn1v-PsGebsRt66s5CFJv0lV3ezxq_VxZUNKFE5sPl/s1600/Image4.png");
background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/5fd2f7b8f6/spriteme1.png");
background-position: -10px -235px;
}img.a10 {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4GAJW7MXbpIIDfra-2k9lQRYyFVHzYTafNHNvfbw4-Ga9_gO6qA6-zDaIIbx7v6M8pcondLgfr0zFsUUbXvnCrUFLXsm1sdE_AvXdBfOSp1SCVVFx_Q7g3YRYyZICSpdyDJMhUMx6-fLg/s1600/Image5.png");
background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/5fd2f7b8f6/spriteme1.png");
background-position: -10px -310px;
}<html>
<head>
<style type="text/css">
.a6
{
width:82px;
height:55px;
background-image: url("spriteme1_singleimage.png");
background-position: -10px -10px;
}
.a7
{
width:82px;
height:55px;
background-image: url("spriteme1_singleimage.png");
background-position: -10px -85px;
}
.a8
{
width:82px;
height:55px;
background-image: url("spriteme1_singleimage.png");
background-position: -10px -160px;
}
.a9
{
width:82px;
height:55px;
background-image: url("spriteme1_singleimage.png");
background-position: -10px -235px;
}
.a10
{
width:82px;
height:55px;
background-image: url("spriteme1_singleimage.png");
background-position: -10px -310px;
}
</style>
</head>
<body>
<br />
<div class="a6"></div>
<div class="a7"></div>
<div class="a8"></div>
<div class="a9"></div>
<div class="a10"></div>
</body>
</html>
SpriteMe greatly simplifies the amount of work we have to put in getting the right image positions. It also gives a single good image file for us to use instead of the individual image files. Next time you want to generate CSS Sprites, think of this tutorial and SpriteMe. Now, SpriteMe requires your images to be available online. It cannot generate recommendations if you have the images locally. It will identify images that can be combined. But, when you click on "make sprite" you will get the following error "An error occured trying to create the sprite image". Hope you liked this help tutorial..
Hello, I'm new to all of this. I have gone as far as saving two sprites to my computer from one of my Wordpress pages.
ReplyDeletehttp://www.jaredhirsch.com/coolrunnings/public_images/d1176d0feb/spriteme1.png
http://www.jaredhirsch.com/coolrunnings/public_images/088140e54c/spriteme2.png
I'm somewhat confused with the next step...
"Make sure to download these sprite images to your own server. These URLs are temporary and will eventually be removed! Replace these URLs with the URLs where you host the images."
For "Merge these changes into the CSS rules in inline CSS rules:," spriteme gave me this...
CROSSED OUT...
#optincrusher .calltoactionimg {
background-image: url("http://internettvdotcom.com/wp-content/plugins/optincrusher/images/thumbnail-free-report.png");
REPLACEMENT...
background-image: url("http://www.jaredhirsch.com/coolrunnings/public_images/d1176d0feb/spriteme1.png");
background-position: -10px -132px;
... and there others but I'm using this one as an example.
Could you tell me exactly how to replace the backgrounds. When going to my server at Hostgator, I went to..
http://internettvdotcom.com/wp-content/plugins/optincrusher/images/
...that has all my plugin images.
So I like to know how do I replace the current background images there with spriteme1.png and spriteme2.png?
Do I upload both sprites...
http://www.jaredhirsch.com/coolrunnings/public_images/d1176d0feb/spriteme1.png
http://www.jaredhirsch.com/coolrunnings/public_images/088140e54c/spriteme2.png)
...to my plugin images folder and delete the backgrounds according to the crossed out backgrounds above? Or, am I to do something else altogether?
Any help will be greatly appreciated.
Thanks!
p.s. My email is pbsumpter@yahoo.com
@Sumpter, when you use SpriteMe, it automatically provides you a single sprited image. This image needs to be downloaded and uploaded back to your website, where you host your images. Then, you can replace the CSS code to point to the new uploaded image. While doing this, you should also update your CSS with Sprite me's background position specific suggestions. You can either replace your current background image (make sure you have a backup) or modify your CSS to point to a new background image. Hope this helps. Let us know if something is still unclear.
ReplyDelete