Comments on: Image Optimization Part 2: Selecting the Right File Format

By: Paul Burney

Paul Burney — Wed, 15 Apr 2009 19:56:38 +0000

Guerric’s comment about optipng is great. I have Photoshop and Fireworks, but it is much easier for me to drop to the commandline after generating the 24bit PNGs in Photoshop Save for Web.

Here’s an example using the default settings:

http://www.burney.ws/example/png8/test.htm

Check it out in IE6.

It’s a great solution for simple edges. Doesn’t work with drop shadow types though.

By: dexbol

dexbol — Thu, 25 Dec 2008 04:18:59 +0000

Nice article ! i use png-8 from last year, but i know that it support semi-transparent after read this, thank you!

By: Marin

Marin — Tue, 09 Dec 2008 18:06:37 +0000

Great series of articles!

On this one few remarks: PNG supports animation (with the unofficial aPNG http://en.wikipedia.org/wiki/APNG) which works in FF3 and Opera 9.6

I’ve noticed that small images (ie webbugs) are smaller as gif than png
1×1 transparent pixel:
43 bytes as gif 2 colors adaptive
100 bytes as png8 2 colors crunched
73 bytes as png24 crunched

Anyway for those bugs I tend to use base64 inline images (so it spares me an http_request)

By: Mark Johnson

Mark Johnson — Thu, 20 Nov 2008 15:54:13 +0000

Stefan, if you’re going to write a followup (as you said) explaining why not to use AlphaImageLoader, I have another reason for you to include. I’ve tried to use it on a large government website, and had to take it out, because it crashes some versions of IE using Citrix terminal server. We got more than one complaint about it. Apparently some versions of the terminal server have a DirectX bug that blows up IE6 when you put the transparency filter in the CSS. But we haven’t tried PNG8–thanks for the tip.

By: kovshenin

kovshenin — Mon, 10 Nov 2008 17:32:58 +0000

Thank you! Will there be part three?

By: SneakyWho_am_i

SneakyWho_am_i — Sun, 09 Nov 2008 08:18:52 +0000

When a web browser implements PNG gamma is it a bug? This is a serious question. Web pages are documents with no mechanism or vocabulary for gamma, so why would the PNG images within those documents be treated any differently??

Great article!! I think that a web page should still be interesting and attractive if you somehow disable all the images. However I was surprised to learn that the top ten sites have less than 50% image weight. It feels like a lot more! (Maybe 80%?)
I think it is a testament to their having chosen appropriate image optimization techniques. Google for example utilizes CSS sprites for many images. I don’t know how that affects filesize, but I think it does show an awareness of download optimization.

By: Yogesh

Yogesh — Sat, 08 Nov 2008 09:41:10 +0000

Hi Stoyan,
Great time to get this series out as this is a problem im trying to tackle.
I obsereved a thing in firefox 2&3 when you do a about:cache for images being downloaded it shows 2 entries for the same image one in memory and the other in Desk.
For eg. this is the details while you try to access the default homepage in FF2
Disk Details:
Key: http://www.google.co.in/images/firefox/sprite.png
Data size: 9664 bytes
Fetch count: 5
Last modified: 2008-11-08 14:58:24
Expires: 2038-01-18 00:37:43

Memory:
Key: http://www.google.co.in/images/firefox/sprite.png
Data size: 266304 bytes
Fetch count: 6
Last modified: 2008-11-08 14:58:24
Expires: 2038-01-18 00:37:43

If you notice the same image has different footprint.

I started noticing this problem on my site then when i investigated it on other sites it has the same problem. Bcoz of this problem when a sprite which use (size 163kb) is downloaded the memory space shoots upto 72mb as in the above case and this stops other things from being cached.

Any pointers to solve this problem will be very helpful.

By: LC

LC — Fri, 07 Nov 2008 09:27:05 +0000

When I was working on Photoshop CS1 I had this gamma correction problem. I used PngOptimizer which is a drag&drop window. I think it’s equivalent to PngCrush.

I reckon CS3 produces clean png doesn’t it ?

Great series of articles !

By: Guerric

Guerric — Wed, 05 Nov 2008 21:52:52 +0000

In order to create the degrading png-8’s, you need to use fireworks. However, I found that if you create a png-8 with photoshop and then crush the image with optipng, the degrading alpha layer effect is achieved. You can find optipng on sourceforge.

By: Robert

Robert — Wed, 05 Nov 2008 16:15:19 +0000

very cool article thanks!