Just my notes about Silverlight, HTML and CSS, Interface Design and other Interactive Media stuff but feel free to browse

This is a quick guide to creating 8bit PNGs with full transparency and embedding resources in CSS using base64 encoding. If you want to know why you’d want to do this have a look at this and this.

Export full 24bit PNGs with transparency from Photoshop. Use PNGoo to create an 8bit PNG with full transparency (It’s just an GUI for PNGQuant. If you need Mac or command line check out their site) . PNGoo will also optimise the PNG.

Now you have your correctly compressed image we need it included in the CSS as base64. Two good tool for this. If it’s just the one file then Visual Studio Extension – Web Essentials allows you to right click on any url in your CSS file and convert it to base64. If you want to batch process any number of CSS files with any number of references you can use the Java application CSSEmbed. This will scan the CSS for any URL and convert it to base64.

If you want to optimise any PNG, 8bit or 24bit then PNGOptimizer is a good tool. Just drag and drop and it will strip out the unnecessary information like meta data.

PNG Base64 Toolkit, a bundle of the apps mentioned above