Dirty Transparency in PNG Optimization

Posted by conrad on Jul 15, 2009 • (11)

Smashing Magazine has a great article on PNG Optimization techniques. The dirty transparency technique is awesome, and I started running tests on our internal assets at Ask.com and Gracepoint Berkeley, and we’re seeing some significant savings. Just when I thought PNG compression was all there was to it, Sergey Chikuyonok (the author of the article), blows us away with some really innovative optimization techniques.

To make dirty transparency easier, I created a Photoshop Action that you can use to run on your PNGs. Make sure to run it on single-layer PNGs that have already been saved off via Photoshop’s Save for Web. Don’t try to run it on your multi-layer PSD file as the script is looking for a layer called “Layer 0″.

Download: Dirty Transparency Photoshop Action (1KB)

I also like his usage of posterization as a way of reducing colors. At Ask.com, I developed a similar technique except using Photoshop’s color-indexing algorithms (perceptual, adaptive, etc) which I think offers the compressibility of posterization but does a better job at maintaining smoother gradients/detail. Posterization’s diffusion characteristics are a little rough for my taste. One of these days, I’ll post a tutorial on how we do this technique, which isn’t terribly innovative imho, but I haven’t seen anyone talking about it so it’ll be worth writing up at some point.

Meanwhile, be sure to check out punypng, as simply the best way to optimize your PNGs on the net.

Be Sociable, Share!

punypng now supports Dirty Transparency

Tagged as optimization, photoshop, png + Categorized as Design

11 Comments

Marijuana Doctors in Orange County says:
June 2nd, 2011 at 12:18 pm

[...]just below, are a few cool websites[...]

Trackbacks & Pingbacks

Clever PNG Optimization Techniques | How-To | Smashing Magazine
July 15, 2009 at 2:04 pm

[...] is now 30 KB. By the way, all these steps can be easily recorded into Photoshop’s Action (download the Dirty Transparency Photoshop Action) and reused later with a single [...]
Clever PNG Optimization Techniques « Tech7.Net
July 15, 2009 at 5:30 pm

[...] is now 30 KB. By the way, all these steps can be easily recorded into Photoshop’s Action (download the Dirty Transparency Photoshop Action) and reused later with a single [...]
One Winter Night Studio » Blog Archive » Clever PNG Optimization TechniquesSmashing Magazine
July 16, 2009 at 2:20 am

[...] KB image is now 30 KB. By the way, all these steps can be easily recorded into Photoshop?s Action (download the Dirty Transparency Photoshop Action) and reused later with a single [...]
U.S. Art Studios Inc. » Blog Archive - Clever PNG Optimization Techniques - U.S. Art Studios Inc. . A full firm advertising agency firm specialized in motion picture, photography, graphic design, printing and web design.
July 16, 2009 at 4:03 pm

[...] is now 30 KB. By the way, all these steps can be easily recorded into Photoshop’s Action (download the Dirty Transparency Photoshop Action) and reused later with a single [...]
links for 2009-07-17 | Appunti di storie di web
July 17, 2009 at 4:11 pm

[...] Dirty Transparency in PNG Optimization | Gracepoint After Five A Photoshop Action that you can use to run on your PNGs. Make sure to run it on single-layer PNGs that have already been saved off via Photoshop’s Save for Web. Don’t try to run it on your multi-layer PSD file as the script is looking for a layer called “Layer 0?. (tags: photoshop png optimization action photoshop-actions) Questo articolo è stato pubblicato in Link. Aggiungi ai preferiti: link permanente. Scrivi un commento o lascia un trackback: Trackback URL. « links for 2009-07-14 [...]
Clever PNG Optimization Techniques | Design Visibility
July 17, 2009 at 6:02 pm

[...] is now 30 KB. By the way, all these steps can be easily recorded into Photoshop’s Action (download the Dirty Transparency Photoshop Action) and reused later with a single [...]
Clever PNG Optimization Techniques | Desinine
July 18, 2009 at 3:04 pm

[...] is now 30 KB. By the way, all these steps can be easily recorded into Photoshop’s Action (download the Dirty Transparency Photoshop Action) and reused later with a single [...]
Clever PNG Optimization Techniques | SEO & Web Design
July 21, 2009 at 12:39 am

[...] 30 KB. By the way, every these steps crapper be easily transcribed into Photoshop’s Action (download the Dirty Transparency Photoshop Action) and reused after with a azygos [...]
Optimiser vos images avec Photoshop — Performance web
July 23, 2009 at 9:58 am

[...] s’en occupent non plus, et c’est malheureux. Je vous propose donc de récupérer un filtre Photoshop pour faire ça automatiquement, ou plutôt le faire faire par votre [...]
Guía profesional para optimizar tus imágenes PNG - 1º parte - elWebmaster.com
August 14, 2009 at 6:54 am

[...] 30 KB. Ya que estamos, todos los pasos pueden ser grabados fácilmente en Photoshop’s Action (Haz clic aquí para descargar la extensión Dirty Transparency Photoshop Action) y reutilizados luego con un simple atajo de [...]

Gracepoint After Five