Our Services
MyBB Custom Theme
Web Design
Web Hosting
Logo and Branding
Psd to Template
Forum Management
# Contact UsWe are here for you.
+91-83340-25252 +91-83348-25252
# Request free QuoteWe'll come back with a price fast!
Please register and login BEFORE purchasing any products to avoid any type of purchase relates issues.
Time Saving CSS Sprite Technique
Posted by   Ammy_769   on 05-17-2011 at 12:51 AM (This post was last modified: 05-17-2011 12:57 AM by Ammy_769.)
Post: #1
Time Saving CSS Sprite Technique
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='t​ext/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:
[Image: rDlPo.png]

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.
[Image: 3RDiW.png]
After hitting Make Sprites button:
[Image: WyKz7.png]

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:
[Image: YT6yf.png]

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.
[Image: hxekR.png]

Now just do your homework and bang..For information, go through this article.
Source
Reply
Posted by   Anurag M   on 05-17-2011 at 01:27 AM (This post was last modified: 05-17-2011 01:32 AM by Anurag M.)
Post: #2
RE: Time Saving CSS Sprite Technique
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. Smile

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

[Image: userbar-for-yuva-pix.png]
Support PMs will be Ignored!
Reply
Posted by   Ammy_769   on 05-17-2011 at 04:07 PM
Post: #3
RE: Time Saving CSS Sprite Technique
(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. Smile

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.
Reply
Posted by   Anurag M   on 05-20-2011 at 12:46 AM
Post: #4
RE: Time Saving CSS Sprite Technique
(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. Smile

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. Smile

[Image: userbar-for-yuva-pix.png]
Support PMs will be Ignored!
Reply
Posted by   Ammy_769   on 05-21-2011 at 06:21 PM
Post: #5
RE: Time Saving CSS Sprite Technique
(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. Smile

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. Smile

Did you introduced it to this site? I think it is pretty easy and straight forward method to quickly get enhanced performance.
Reply
Posted by   Anurag M   on 05-21-2011 at 09:41 PM
Post: #6
RE: Time Saving CSS Sprite Technique
(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. Smile

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. Smile

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.

[Image: userbar-for-yuva-pix.png]
Support PMs will be Ignored!
Reply
Posted by   Ammy_769   on 05-21-2011 at 10:01 PM
Post: #7
RE: Time Saving CSS Sprite Technique
(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. Smile

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. Smile

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.
Reply
Posted by   Ammy_769   on 06-19-2011 at 02:50 AM
Post: #8
RE: Time Saving CSS Sprite Technique
^any progress with this in main site?
Reply
Posted by   Anurag M   on 07-06-2011 at 02:40 PM
Post: #9
RE: Time Saving CSS Sprite Technique
(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.

[Image: userbar-for-yuva-pix.png]
Support PMs will be Ignored!
Reply
Posted by   ambrizal   on 09-20-2011 at 04:41 PM
Post: #10
RE: Time Saving CSS Sprite Technique
I will try to use the code
Reply




User(s) browsing this thread: 1 Guest(s)