Hi there, I've decided to move my technical blog over to Cognitive Coding. Also, hoping to keep it more active compared to this one... so watch out!
CSS sprites is a technique used to minimize the number of external image downloads required for a web page to load completely. If you aren't already aware of the technique, refer to this excellent article by Dave Shea.
Now when you get excited by this technique and desire your web-pages to benefit from it, the first blocker you'll face on the road is to figure out an image processing tool to pack the images and also create the corresponding CSS. This is also a very cumbersome job and would drive you nuts whenever you need to change or add images to your web page. So, how good it'll be if you have a tool that takes in the images, packs them and generates the CSS automatically? Well, you have it.
With this post i'm attaching the visual studio project I developed for this purpose. Just build it and you'll have the tool for you to play with. The tool will generate comprehensive usage information that'll help you get started. I'm also attaching a sample web project that uses the tool to display images onto a demo page.
The tool accepts images of type GIF and PNG and converts them to a single image of type GIF or PNG-8. PNG-8 images have the advantage of being smaller compared to GIF images and hence I would strongly recommend that you generate PNG-8 out of the tool. Also, all browsers display PNG-8 images without any problem, so you needn't think twice. To generate PNG-8, the image packer tool internally makes use of a GIF to PNG conversation/optimization tool called PNGOUT. You can download it here.
I should thank Morgan Skinner for his excellent MSDN article with source code on color quantization. I made use of the Octree Quantization code in my image packer tool.
You can use the image packer source code or tool wherever and however you like. You can also make modifications to the tool and use it for any purpose.
One final word, while I've been using this tool for quite some time now and it has been working without glitches, there might be some hidden bugs. I request you to report the bugs and I'll be more than happy to fix them.
Notes:
- The PNGOUT tool has problems dealing with paths with spaces. Make sure that the image output path doesn't have any spaces (in the absolute path).
Share this post:
Attachment(s): ToolWithDemo.zip
Now, if you have by any chance worked on page load optimizations, you would know how costly each resource download is. The more the number of external resources that you refer to, the more the time it takes for the page load to complete.
Typically, web pages refer to many external CSS and JS files and hence incur many resource downloads. The advice from the PLT (page load time) gurus is to combine all the CSS files into one and all the JS files into one so as to reduce the number of resource downloads to just two. This, without any doubt, would help boost your PLT.
If you feel that two downloads still isn't the best, I concur. In this post, we'll look at a technique to combine CSS with JS and get the resource download count to one! I discovered this technique while desperately trying to improve the page load time for the pages in Microsoft Office Live. Read on...
The technique relies on how CSS and JS parser behaves in IE and Firefox.
- When the CSS parser encounters a HTML comment token (<!--) in CSS content, the token gets ignored.
- When the JS parser encounters a HTML comment token (<!--) in JS content, the token is treated similar to the line comment (//) and hence the rest of the line following the HTML comment token gets ignored
Look at the below JS+CSS code snippet...
<!-- /*
function t(){}
<!-- */
<!-- body { background-color: Aqua; }
When the CSS parser parses the above content, the HTML comment tokens would be dropped and the snippet would become equivalent to the one below...
/*
function t(){}
*/
body { background-color: Aqua; }
As you can see above, the CSS parser will get to see only the CSS code and the script code would appear to be within the comments (/* ... */).
In similar lines, when the JS parser parses the content, the HTML comment tokens would be treated as line comments (//) and hence the code snippet would become equivalent to the one below...
// /*
function t(){}
// */
// body { background-color: Aqua; }
As you can see above, the JS parser will get to see only the script code and the rest of the contents would look like comments.
You can refer to the above content in both the SCRIPT and LINK tags in your HTML page. For e.g.,
<link type="text/css" rel="stylesheet" href="test.jscss" />
<script type="text/javascript" language="javascript" src="test.jscss"></script>
Note above that both the tags refer to the same source and hence it would be downloaded once and used as appropriate (as CSS and SCRIPT).
To round it off, there is just one more thing that you need to take care of - the response content type - it needs to be set to */* in order to affirm to Firefox that the contents can be treated as anything as appropriate.
I've attached a sample project (created with VS 2005 SP1) that demonstrates this technique. Enjoy!
Update: (put in place due to popular misconception) In the actual implementation you will have the JS and CSS files separately on disk. At runtime, you'll have to combine them by adding the HTML comments appropriately and serve with the correct content type and cache headers. You should also remember the dynamically built content so that you don't need to rebuild them for each request. Please check out the attached sample app. This will ensure that you don't compromise on the readability, maintainability etc. while at the same time taking advantage of the reduced number of network calls.
Note(s):
- If the JS contains any multi line comments it should be removed before combining with the CSS using this technique.
- This technique has been tested positive on IE6, IE7 and Firefox 2.0. It may work on other browsers off the shelf or may need minor tweaks.
Share this post:
email it! |
bookmark it! |
digg it! |
reddit! |
kick it! |
live it!
Attachment(s): JsCssUpdated.zip
Welcome to my blog! My name is Shiva and I work for the Microsoft Office Live team. My focus areas include C#, Asp.Net, JavaScript, Ajax and page load performance optimizations.
In this blog space, I plan to share my learnings being gained as part of my work in Microsoft Office Live. Hope you find it useful...
