Base64, optimised, 8bit with full alpha PNG workflow

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

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: