In the past few days, I was given a push to find a suitable method that allowed us to automate the much needed but painstaking of creating sprites for webpages to improve their performance.The problem was that going through the process of spriting images was a tedious process for a person not used to Photoshop tools and meticulous image adjustments in the corresponding Css.
After spending some time with Mr Google, I stumbled upon an application that allowed us to automate the process, leaving the task of spriting images and adjusting the corresponding css upto the application.
Lets take a look at it. I’m sure that even if you give it 1 shot, you are bound to appreciate the ease of spriting your images to give it another go.
Once you’ve got that done, all you’ve got to do is put in place holders to indicate that a particular image is to be included in the spriting process.
To do that indicate where you would like the sprite to be placed with something like this at the top of your css …
[css] /** sprite: myspriteVertical; sprite-image: url(‘../images/myspriteVertical.png’); sprite-layout: vertical */ [/css]
sprite: myspriteVertical – This is the reference for the final image to be used in the css
sprite-image: url(‘../images/myspriteVertical.png’) -This specifies the path of the final image.
sprite-layout: vertical – It specifies the layout of images in your sprite. It can be vertical, horizontal or repeating.
Next go to the place in the css where you have an image. For example, my Css had something like
[css].home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px; background:url("../images/header-top.png") no-repeat 0 0;}[/css]
Now for this to application to recognize candidate images the background image property needs a separate line of it’s own. Although the refactor doesn’t take time, it becomes easier if you start off with separate lines the next time you create a css.
So I split it into something like
[css].home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px;
background-image:url("../images/header-top.png");
background-repeat: no-repeat;
background-position:0 0; }[/css]
Note that this image specifies a positioning of top,left. We need to provide that for our image position in the final sprite.
Now simply add placeholders as shown below.
[css].home .searchWiget_widget_Header{font-size:18px;color:#fff;padding:14px 10px 2px 10px;
background-image:url("../images/header-top.png");/** sprite-ref: myspriteVertical; sprite-alignment: left */
background-repeat: no-repeat;}[/css]
sprite-ref: myspriteVertical – This is the reference to the final sprite where it will be included as one of the images.
sprite-alignment: left – This specifies that the image is to be aligned on the left in the final sprite. This corresponds to the background-position attribute. Other than left, it can be top, bottom or right.
Now that we have provided an alignment in the placeholder, we need to delete the ‘background-position’ attribute in the original implementation, so that it doesn’t override the new changes.
Now here we need to take care that images that are positioned to align on the left or right have to be arranged on a vertical layout.
Images aligned top or bottom are to be horizontally aligned.
This arrangement needs to be taken care of otherwise you might have images popping out in the webpage at unwanted places.
Now repeat the procedure or putting placeholders for all the images you want to be sprited. Make sure to keep left/right positioned images in a vertical layout and top/bottom images in a horizontal layout
Once that’s done, we simply need to issue a command to generate to sprite and adjust the css properties to accommodate the new image. It will contain the css you have modified as an argument.
[bash] ./smartsprites.sh ~/Desktop/Demo/web-app/css/demo.css [/bash]
It will create a new file with the same name appended with a default extension value. The original files in the CSS will remain unchanged. To switch your design to CSS sprites, link these CSS files instead of the original ones in your HTML.
A plethora of options has been provided on the home page along with helpful documentation. Go through them if you encounter any problems.
Thats it .!!!! Check out your sprites
Notes :
1) Make sure to check the output of the sprite command. You should watch out for Warn and Error messages. It might show why your output isn’t coming out as it should.
2) Try to keep separate sprites for horizontally aligned , vertically aligned and repeating images. Combining them will more often than not result in error-prone images.
3) Repeating images can be tricky. I had to redo a sprite since my image wasn’t repeating properly. Give it more than 1 shot and you’ll definitely get it right.
Hope this helps!!
Manoj Mohan
manoj(at)intelligrape(dot)com
