Sprite Me - Speed Up Your Website

You use a lot of pictures on your  Website as logo, menu, background images for the header, etc. When users view a page on your site, each image corresponds to one request to web server.  Suppose you  have  50  separate images used on a post, you will send 50 requests to the server. Request more, the load speed of the post is slower. So, how do you reduce the number of requests?

Website Sprite Me provides a tool that solves the trouble  for  you.  Instead of using 50 separate  files, Spirte Me will scan  the  pictures and CSS code to determine what images can combine into one picture.

To use Sprite Me, you need to follow these steps: 

Step 1: 

1. Go to Website: spriteme.org

2. Drag the left mouse at "SpriteMe" link to your browser's bookmark  

Step 2: 

1. You go to the Web page that you want to use Sprite Me (For example: factsaboutbees.org) 

2. Click on the "SpriteMe" link on the bookmark.

Sprite Me will scan and display the results with the items: 

• Suggested Sprites: the images can be combined into one image

• Non-Sprited Images: the image can’t be combined. 

3. Click the "make sprite" button  to combine images into one. 

The result which you will gain:

4. Click on the link above to view the big image which was lumped. 

The  big  image’s  name  is  "spriteme1.png"  and  located  on  the  link:  "hxxp://www.jaredhirsch.com/coolrunning/public_Images/cd23d45517/spriteme1.png"

This big image combined from 3 photos: 

 Image  1  –  its  name  is  “rss_tag.png”  and  located  on  the  path http://factsaboutbees.org/wp-content/themes/colorbold/images/rss_tag.png

Image 2 – its name is "bk_mainmenu.png" and located on the path http://factsaboutbees.org/wp-content/themes/colorbold/images/blue/bk_mainmenu.png

Image 3 - – its name is "bk_list_right.png" and located on the path http://factsaboutbees.org/wp-content/themes/colorbold/images/blue/bk_list_right.png 

5. Continue, you need to replace the separate images (Image 1, Image 2, Image 3) by the big image "spriteme1.png".  Click  Export  CSS  and  Sprite  Me  will  give  you  detailed  instructions  how  to replace:

To replace Image 1, you need to find the style.css file located on the path “http:// ... / Themes /colorbold / style.css”,  then find the .rssTag  tag, replace  the  path containing  Image  1  as shown in the  picture  above.  And  instead  of  using  the  path  below.  Meanwhile,  the  CSS  code  has  been replaced as follows:

.rssTag {

background-image: url(hxxp://www.jaredhirsch.com/coolrunning/public_Images/cd23d45517/spriteme.png) //the path of the big image

background-position: -10px -10px;


You  saved  the  change.  So,  you  have  replaced  Image  1  successfully  by  the  big  image "spriteme1.png”. However, you need  only  to cut the  big  image  to take  Image 1  which set as RSS background, not fetch all of the big image which includes 3 background images. What would you do?

Background-position command line specified location  which  displays  Image 1  from the big image (Image 2 and Image 3 are hidden). So, in the  RSS background, just show  only  Image 1. 

Image 2 and Image 3 is similar to Image 1.


Because  the  image  path  after  lumping  is:  "hxxp://www.jaredhirsch.com/coolrunning/public_Images/cd23d45517/spriteme.png".  When  you  load the  page,  the  page  will  need  to  website www.  jaredhirsch.com  to  get  the  big  image "spriteme1.png". This will affect the speed of the site  and your website depends  on other websites. If the image "spriteme1.png"  is deleted at that site, the images  which are cut from the big image will be lost on your website.

Ideally, you should download the  big  image  from  Website  www. jaredhirsch.com and stored on your server (you can save the image to follow the link: http://factsaboutbees.org/wp- content/uploads/spriteme1.png). Then, you replace it to the tags above. For example the .rssTag, you can make the following changes:

.rssTag {

background-image: url(http://factsaboutbees.org/wp-content/uploads/spriteme1.png); // after changed

background-position: -10px -10px;



In this example, you understand how to use Sprite Me to combine images into one image, reduces  the requests quantity  to the server and speeds  up  Website. However, you need to notice:

• If you have 50 image files, but you can combine the 3  images to the big images,  Sprite Me cannot  be combined  47 residual  images. This only helps reduce the required number from 50 to 48 and you should not use this technique. 

• But if you have 50 image files, and Sprite Me helps you reduce to 25 image files by lump the image files, you can totally use this technique to improve the speed of your website.