- Category: Website Development
- Published: 13 July 2014
- Hits: 1967
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:
1. Go to Website: spriteme.org
2. Drag the left mouse at "SpriteMe" link to your browser's bookmark
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:
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:
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.