Tuesday, July 24, 2012
Image sprite is a technique in which one single image which generally consists of smaller images, can be used part by part in a website, instead of multiple different images.
The technique is to use a bigger image made up of all the small images and use it elsewhere on your website, whereby displaying only a particular part of the bigger image. For example, this blog uses this sprite. For beginners, W3Schools has a more detailed example of CSS Sprites.
The problem associated with image sprites is that the background position of a smaller image is very difficult to determine and requires a lot of trial and error method to get it working correctly. Earlier, I used to use Firefox, loaded with Firebug add-on, but then stumbled upon this time-saving website, Sprite Cow, which makes it ridiculously easy to create image sprites for your website.
As soon as you enter the website, all you have to do is to upload the sprite to the website. After your image is loaded, all you need to do is to click on any part of the image of your sprite and the selection triangle will automatically detect and position itself. You also have the option to manually click and drag the selection triangle to focus on any part of your sprite.
As soon as you focus on your sprite, a small CSS code is generated in the website, where you can replace the background URL to the desired URL of the image, along with the accurate position of the smaller image, along with width and height. The position of the image can also be made to appear in percentages.
This website is actually invaluable to hardcore web designers, and if you are sure the feel devastated if this website is taken down (which may or may not – I don’t know), then if I were you, I’d download a copy of the website, hosted on GitHub and host it on my own server.