Clever PNG Optimization Techniques

[James_Littler]

Have a read of this

http://www.smashingmagazine.com/2009/07/...echniques/

A very interesting and useful article that many may benefit from reading.

[RegDCP]

Excellent article.
Thank you James.

[deathshadow]

Very good article, though more talk about using palletized instead of 24/32 bit would be nice (though if there's going to be a part 2). Some talk about the fact that in a lot of layouts alpha is still non-deployable (thanks IE6) or requires fat bloated scripted nonsense to work, and that most any layout relying on them can usually be done without it might have been nice too...

But then I'm against using 24 or 32 bit .png for the majority of website images as a general rule, except in those rare instances where things like the scanline reduction mentioned in the article makes the file smaller than palletized. (which usually only occurs with really small files)

Some mention about IE and Gamma issues might not be a bad idea either. (which one of the commenters already did mention and link to.)

[innovati]

I have a hard enough time telling my graphic design friend *what* PNG is, and why JPG shouldn't be used for editing. *facepalm*

I'm a big PNG Slut (although I suppose I'm a PNG whore now that I'm paid to use them, instead of just using them because I loved to) and I also love that the guy who wrote the PNG spec had a hand in writing the SVG spec too!

It just breaks my heart to hear phrases like:

Wikipedia, the oracle of our times Wrote:All major modern web browsers except Microsoft Internet Explorer support and render SVG markup directly.

I am happy that designers are finally dropping IE6 support so we can start to use hackless PNG's in design with confidence that they will show up well - gosh PNG alpha has been in IE development since Summer 2005 and only now are people using Microsoft browsers more recent than that.

I've loved PNG for a long long time - another trick is showing anybody who uses GIF for static images that they can re-saved the palettized GIF as a PNG and save even more space. That blows a lot of minds....

[Ryan]

That's a very good article. But what about those 252k banners you've made and the best reasonable qualiy you can get them to is 60k!

[deathshadow]

(Jul-19-2009 12:31 PM)Ryan Wrote:  That's a very good article. But what about those 252k banners you've made and the best reasonable qualiy you can get them to is 60k!

Then they weren't drawn with internet deployment in mind in the first place.

---

(Jul-17-2009 07:52 AM)innovati Wrote:  I have a hard enough time telling my graphic design friend *what* PNG is, and why JPG shouldn't be used for editing. *facepalm*

He probaby cannot see the artifacting... One of the reasons lossy is used (and dithering for that matter) is the artifacting is not visible to the majority of the population unless you plan on zooming the image in 4x or more, or have your nose pressed right up against the display.

(Jul-17-2009 07:52 AM)innovati Wrote:  I am happy that designers are finally dropping IE6 support so we can start to use hackless PNG's in design with confidence that they will show up well

Mixed blessing though, given how fat alpha .png can be. I hate seeing websites using alpha transparency .png that end up ten times larger than need be, blowing up into being more practical to measure in megabytes instead of tens of K.

(Jul-17-2009 07:52 AM)innovati Wrote:  another trick is showing anybody who uses GIF for static images that they can re-saved the palettized GIF as a PNG and save even more space. That blows a lot of minds....

Unless that .gif can be color optimized to 16 colors and is less than 32K pixels, then .gif still wins on filesize in most cases.

Just recently showed someone who was looking at 2.1k of .png as the best optimization compared to a 6k .gif how to take the same image and make it a 1.3k transparent .gif - It was a simple black and white line-art - 16 colors is more than enough to provide anti-aliasing to a monochrome element. (especially if it's going to be blue/black, given the eye's low sensitivity to blue)

[kriss.ov]

very good article