Sprite Me - Speed up your Website

You use a lot of background in  your  Website: logo, menu, background images for  the header, ... When the download page, the background image corresponding to an image download request to that  host.  Suppose  you  have  50  separate  background  images  used  on  the  site,  will  have  50 requests to the server. Many  requests, slow page load speed. So, how do you reduce that  requests quantity?

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.

Choose a language


Subscribe YouTube


Hải sản Vân Đồn

Chào mừng bạn đến với chuyên mục giới thiệu và cung cấp các mặt hàng hải sản của Vân Đồn. Hải sản Vân Đồn - Quảng Ninh | Tươi ngon, bổ dưỡng và đảm bảo với giá cả phải chăng. Xem trang....