Easily Sprite Images On Your Website Using SpriteMe

Written by Pramodh KP

May 25th, 2011 at 3:21 pm

Posted in Tools & Tutorials

Spriting is a CSS technique in which you combine multiple small images (usually background images) into one single image. CSS Spriting technique has many advantages. It reduces the load on the server, and also loads the webpages at a faster rate.

The idea of the Spriting technique is, when you load multiple small images, every time a image has to be loaded, a HTTP request has to be sent to the server. So, when you have large number of small images, the load on the server increases and in turn the webpage slows down. When you sprite small images into one single image, even though the size of the image increases, the request is sent only once. Hence, the load on the server decreases and the speed increases.

For more information on CSS Spriting, you can visit w3schools.com or css-tricks.com

Generally spriting is done by adding chunks of CSS code into the stylesheet. But, here is a tool that reduces your work while spriting images on your website. Enter SpriteMe.

Features:

  • finds background images
  • groups images into sprites
  • generates the sprite
  • recomputes CSS background-positions
  • injects the sprite into the current page

Using SpriteMe

SpriteMe is simple to use. First of all, you need to bookmark this link: SpriteMe. (If you are using Internet Explorer, then right-click and add it to “Favorites”. If you are using Firefox or other browsers, then drag and drop the link on the bookmarks toolbar).

spriteme_1

Next, go to the website/page of which you want to sprite images. Click on the SpriteMe bookmark. A small window opens up, showing the suggestions for spriting images. As you can see in the pic below, it shows the URLs of the images that can be sprited. Also, hovering on those URLs displays images so that you can easily identify them.

spriteme_2

Third step is to make sprites. To make sprites, just click on the button saying “Make Sprite”. It automatically combines combines those images into a single one and temporarily hosts it temporarily.So, first you have to download the images into your local computer and upload it in your own host.

spriteme_3

The last step, is to get the code. After spriting all the images that you want, click on the button “Export CSS” button to get the code. A new tab opens in which the URL/s to the sprited images are provided along with the changes that are to be made to the existing CSS code. Change your CSS code according to that and your images are easily sprited without writing even a single line of code.

spriteme_4

 

Blog Widget by LinkWithin

Tags: , ,

Extension Factory Builder