CSS Sprites

Every web developer of this era know performance is key parameter to success of any online product. Reducing http requests is one way of improving performance of given webpage. CSS-Sprites is major initiative in this regard. Instead of using different small images for each and every graphical element in page, we use single big image (sprite) as background image and adjust visible area using “background-position” CSS attribute. You can see this method being used in all major websites including Yahoo!, Facebook etc.

But creating this CSS sprite and CSS code for this sprite is tedious task. You have to put all images in-to one single image, and write down x,y,width and height of each image, and carefully use those details in CSS code. It’s very time taking and exhaustive task. But in future we front-endies don’t have to worry on such things. SpriteMe is for our rescue.

SpriteMe gives you a bookmark-let which you can book mark in your browser. While doing HTML and CSS mock-up folow the same procedures that your follow for non-sprited websites, make sure you don’t use html tags, use css background-image for all images that needs to be included in sprite. finally when you are done, open your website in browser which has SpriteMe bookmark-let which you created earlier. you should have your website online, so that SpriteMe can download images from your website. and click on that bookmark-let. A JS popup window opens, and depending on your CSS code and implementation SpriteMe suggest you creating 1-3 sprites. click on create sprite, you will have your sprite downloadable. and click on Export CSS to export CSS code for created sprites, This will also let you know where all you need to make change etc. With 2 simple steps you are done with creating sprites and CSS code for them.

Considering the complexity of creating sprites, running behind visual designers to create it, and writing CSS code for sprite this is a great tool. Only drawback I see that it’s doesn’t allow you to create Sprites from sites which are offline. I am planning to write offline version of it. Will update you all once I am done.