4 ms·

What is the difference to using say optipng?

by aw3c2 16y ago

ck2 16y ago
optipng/pngout/pnggauntlet are "only" png optimizers this site gracefully degrades a png with 24bit alpha transparency to 8bit alpha so you don't have to settle for a gif. I suspect they are using pngnq http://pornel.net/pngnq http://pornel.net/pngnq and pngquant http://pornel.net/pngquant http://pornel.net/pngquant Some background here: http://blogs.sitepoint.com/png8-the-clear-winner/ http://blogs.sitepoint.com/png8-the-clear-winner/ http://www.ethanandjamie.com/blog/81-png8-transparency-without-fireworks http://www.ethanandjamie.com/blog/81-png8-transparency-witho... That site is great because it's so easy, they did some very impressive drag-and-drop code and it makes very high quality output that is as good as Fireworks.
- TillE 16y ago
  Yeah, most of the compression seems to come from converting from RGB to colormap with pngquant. I wonder if it's possible to do all this with an ImageMagick one-liner.
beej71 16y ago
Here's a real example, using a test image that has a lot of different alpha values in it, and a 24-bit alpha channel: Original: 87047 bytes optipng -o7: 82489 bytes this tool: 22585 bytes The main difference, other than size, is that optipng produced an exact copy of the the original, while this tool is lossy, and threw away a bunch of data from the alpha channel. The win is that for the majority of all web cases, 8 bits of alpha is plenty.
- ck2 16y ago
  Note that it's not perfect for all cases, but it's certainly acceptable for small icons. Here's a 32x32 icon I converted down to 8-bit alpha and then 1-bit, and then resized the whole group so they could be more closely examined: http://i.imgur.com/XTksy.png http://i.imgur.com/XTksy.png
  - pornel 16y ago
    I was able to convert it without noticeable degradation down to 7 bit: http://geekhood.net/bitcoin-32bit.png http://geekhood.net/bitcoin-32bit.png http://geekhood.net/bitcoin-7bit.png http://geekhood.net/bitcoin-7bit.png (using my pngquant)
    - ck2 16y ago
      Yah, after looking at the source I saw they are only using php's gd2 library on 8bitalpha.com which is definitely inferior to your work. The problem is lack of Windows binaries, this is the most modern I can find: http://sites.google.com/site/bitdepthtools/downloads http://sites.google.com/site/bitdepthtools/downloads BTW this is the original image I am resampling down to icon size, it seems very challenging because of the multi-layered round edges and many gradients internally: http://en.wikipedia.org/wiki/File:Bitcoin.png http://en.wikipedia.org/wiki/File:Bitcoin.png
      - pornel 16y ago
        For me OS X screenshots are the toughest — lots of shades in transparent shadow, smooth gray gradients (can't use posterization) AND three small gradients in close/minimize/zoom and couple of odd pixels for anti-alias of corners (can't use pick-most-popular algorithm).
- pornel 16y ago
  Actually, making good palette for PNG8+a is very difficult, because in PNG8 alpha is not an additional channel, but property of palette entries. Instead of 256 RGB colors in palette you have 265 RGBA colors, so e.g. red and semitransparent red are two distinct entries.

What is the difference to using say optipng?

by aw3c2 16y ago

What is the difference to using say optipng?

ck2 16y ago

optipng/pngout/pnggauntlet are "only" png optimizers this site gracefully degrades a png with 24bit alpha transparency to 8bit alpha so you don't have to settle for a gif. I suspect they are using pngnq http://pornel.net/pngnq http://pornel.net/pngnq and pngquant http://pornel.net/pngquant http://pornel.net/pngquant Some background here: http://blogs.sitepoint.com/png8-the-clear-winner/ http://blogs.sitepoint.com/png8-the-clear-winner/ http://www.ethanandjamie.com/blog/81-png8-transparency-without-fireworks http://www.ethanandjamie.com/blog/81-png8-transparency-witho... That site is great because it's so easy, they did some very impressive drag-and-drop code and it makes very high quality output that is as good as Fireworks.

TillE 16y ago
Yeah, most of the compression seems to come from converting from RGB to colormap with pngquant. I wonder if it's possible to do all this with an ImageMagick one-liner.

beej71 16y ago

Here's a real example, using a test image that has a lot of different alpha values in it, and a 24-bit alpha channel: Original: 87047 bytes optipng -o7: 82489 bytes this tool: 22585 bytes The main difference, other than size, is that optipng produced an exact copy of the the original, while this tool is lossy, and threw away a bunch of data from the alpha channel. The win is that for the majority of all web cases, 8 bits of alpha is plenty.

ck2 16y ago
Note that it's not perfect for all cases, but it's certainly acceptable for small icons. Here's a 32x32 icon I converted down to 8-bit alpha and then 1-bit, and then resized the whole group so they could be more closely examined: http://i.imgur.com/XTksy.png http://i.imgur.com/XTksy.png
- pornel 16y ago
  I was able to convert it without noticeable degradation down to 7 bit: http://geekhood.net/bitcoin-32bit.png http://geekhood.net/bitcoin-32bit.png http://geekhood.net/bitcoin-7bit.png http://geekhood.net/bitcoin-7bit.png (using my pngquant)
  - ck2 16y ago
    Yah, after looking at the source I saw they are only using php's gd2 library on 8bitalpha.com which is definitely inferior to your work. The problem is lack of Windows binaries, this is the most modern I can find: http://sites.google.com/site/bitdepthtools/downloads http://sites.google.com/site/bitdepthtools/downloads BTW this is the original image I am resampling down to icon size, it seems very challenging because of the multi-layered round edges and many gradients internally: http://en.wikipedia.org/wiki/File:Bitcoin.png http://en.wikipedia.org/wiki/File:Bitcoin.png
    - pornel 16y ago
      For me OS X screenshots are the toughest — lots of shades in transparent shadow, smooth gray gradients (can't use posterization) AND three small gradients in close/minimize/zoom and couple of odd pixels for anti-alias of corners (can't use pick-most-popular algorithm).
pornel 16y ago
Actually, making good palette for PNG8+a is very difficult, because in PNG8 alpha is not an additional channel, but property of palette entries. Instead of 256 RGB colors in palette you have 265 RGBA colors, so e.g. red and semitransparent red are two distinct entries.