Time Saving CSS Sprite Technique

[Ammy_769]

This is very nice technique to reduce http request on your site and bandwidth, it will also stop usage of your site contents like logos etc.
It is very time consuming technique if you do it through coding way, while here its shortest and fastest way. I recommend it to nearly all web developer to implement it if possible.
Step 1:
Go to this site:

Code:

http://spriteme.org/

Step 2:
Bookmark or favourite this link in your browser:

Quote:j(function(){var%20spritemejs=document.createElement('SCRIPT');spritemejs.type='text/javascript';spritemejs.src='http://spriteme.org/spriteme.js';document.getElementsByTagName('head')[0].appendChild(spritemejs);})();

Step 3:
Open the site on which you want to do CSS Sprite trick. Like YuvaPix.com and then click on bookmark, one dialog box will appear after a sometime. Like in this picture below:

Step 4:
Now hit picture below shown buttons, after hitting, they will make sprites, in this case two sprites will make, reducing 5 http request and 14 KB bandwidth.

After hitting Make Sprites button:

Step 5:
Now download both sprite image pictures and upload to your site FTP account or any picture sharing site to use.
and Now main part starts.
Hit Export CSS button, like in the picture:

Step 6:
Wait for a minute, one new tab will appear in your browser, it will give you all detail and codes, how to implement it in CSS with reference to CSS as well (if multiple CSS you have).
You have to remove cut line from your CSS code and add Bold line in your CSS code, don`t forget to change reference of sprites image links.

Now just do your homework and bang..For information, go through this article.
Source

[sukanjan.k]

The Sprint technics is best for them who wanna make a great optimized, fast website and how you explained it Ammy, is best. I have read many articles about CSS Sprite technics and this is by far the best and the most easy to understand. With the help of the Spriteme site lots of coding time can be saved, thanks for the tutorial.

But ammy in chrome when I am clicking the bookmark the site opening, the pop up window not appearing.

[Ammy_769]

(05-17-2011 01:27 AM)sukanjan.k Wrote:  The Sprint technics is best for them who wanna make a great optimized, fast website and how you explained it Ammy, is best. I have read many articles about CSS Sprite technics and this is by far the best and the most easy to understand. With the help of the Spriteme site lots of coding time can be saved, thanks for the tutorial.

But ammy in chrome when I am clicking the bookmark the site opening, the pop up window not appearing.

Thanks for reply. Try Mozilla Firefox.

[sukanjan.k]

(05-17-2011 04:07 PM)Ammy_769 Wrote:  

(05-17-2011 01:27 AM)sukanjan.k Wrote:  The Sprint technics is best for them who wanna make a great optimized, fast website and how you explained it Ammy, is best. I have read many articles about CSS Sprite technics and this is by far the best and the most easy to understand. With the help of the Spriteme site lots of coding time can be saved, thanks for the tutorial.

But ammy in chrome when I am clicking the bookmark the site opening, the pop up window not appearing.

Thanks for reply. Try Mozilla Firefox.

Worked in firefox.

[Ammy_769]

(05-20-2011 12:46 AM)sukanjan.k Wrote:  

(05-17-2011 04:07 PM)Ammy_769 Wrote:  

(05-17-2011 01:27 AM)sukanjan.k Wrote:  The Sprint technics is best for them who wanna make a great optimized, fast website and how you explained it Ammy, is best. I have read many articles about CSS Sprite technics and this is by far the best and the most easy to understand. With the help of the Spriteme site lots of coding time can be saved, thanks for the tutorial.

But ammy in chrome when I am clicking the bookmark the site opening, the pop up window not appearing.

Thanks for reply. Try Mozilla Firefox.

Worked in firefox.

Did you introduced it to this site? I think it is pretty easy and straight forward method to quickly get enhanced performance.

[sukanjan.k]

(05-21-2011 06:21 PM)Ammy_769 Wrote:  

(05-20-2011 12:46 AM)sukanjan.k Wrote:  

(05-17-2011 04:07 PM)Ammy_769 Wrote:  

(05-17-2011 01:27 AM)sukanjan.k Wrote:  The Sprint technics is best for them who wanna make a great optimized, fast website and how you explained it Ammy, is best. I have read many articles about CSS Sprite technics and this is by far the best and the most easy to understand. With the help of the Spriteme site lots of coding time can be saved, thanks for the tutorial.

But ammy in chrome when I am clicking the bookmark the site opening, the pop up window not appearing.

Thanks for reply. Try Mozilla Firefox.

Worked in firefox.

Did you introduced it to this site? I think it is pretty easy and straight forward method to quickly get enhanced performance.

Testing this technic on my localhost, once I am sure it will work with MyBB and will have no bug then I'll implement it asap in main forum.

[Ammy_769]

(05-21-2011 09:41 PM)sukanjan.k Wrote:  

(05-21-2011 06:21 PM)Ammy_769 Wrote:  

(05-20-2011 12:46 AM)sukanjan.k Wrote:  

(05-17-2011 04:07 PM)Ammy_769 Wrote:  

(05-17-2011 01:27 AM)sukanjan.k Wrote:  The Sprint technics is best for them who wanna make a great optimized, fast website and how you explained it Ammy, is best. I have read many articles about CSS Sprite technics and this is by far the best and the most easy to understand. With the help of the Spriteme site lots of coding time can be saved, thanks for the tutorial.

But ammy in chrome when I am clicking the bookmark the site opening, the pop up window not appearing.

Thanks for reply. Try Mozilla Firefox.

Worked in firefox.

Did you introduced it to this site? I think it is pretty easy and straight forward method to quickly get enhanced performance.

Testing this technic on my localhost, once I am sure it will work with MyBB and will have no bug then I'll implement it asap in main forum.

OK, waiting to see, is it really worth a try and also enhance speed or not.

[Ammy_769]

^any progress with this in main site?

[sukanjan.k]

(06-19-2011 02:50 AM)Ammy_769 Wrote:  ^any progress with this in main site?

I haven't got much time to implement this, but I'll surely do it.

[ambrizal]

I will try to use the code