Wedge

Public area => The Pub => Features => Topic started by: [Unknown] on June 20th, 2011, 03:35 AM

Title: Optimize release images
Post by: [Unknown] on June 20th, 2011, 03:35 AM
Running optipng on most images can really improve things.  At a cursory glance, it appears that many pngs, avatars, etc. can all be optimized with some amount of savings.

I suggest adding it to a release script, so it's never forgotten, something like this:

find Themes avatars media -name "*.png" -print0 | xargs -0 --no-run-if-empty other/tools/optipng -o4

Or even better, run it more often (e.g. when checking in png changes) and then it only has to process the changed files, which is much quicker.

For example, the avatars directory could currently save 40 KB if it were losslessly compressed (about 12%.)  This affects both distribution bandwidth and obviously admin's bandwidth.  Losslessly optimizing jpegs is a good idea too.

-[Unknown]
Title: Re: Optimize release images
Post by: Nao on June 20th, 2011, 08:47 AM
I believe I've already run everything through pngquant. I do it systematically for new files and keep a 32 bit copy in the other/images folder as well. ^_^
Posted: June 20th, 2011, 08:46 AM

I dont automate it because png8 sometimes has awful results in ie6 btw.
Title: Re: Optimize release images
Post by: [Unknown] on June 20th, 2011, 09:11 AM
Quote from Nao/Gilles on June 20th, 2011, 08:47 AM
I believe I've already run everything through pngquant. I do it systematically for new files and keep a 32 bit copy in the other/images folder as well. ^_^
Just to clarify, I ran a quick optipng before posting this, and was able to shrink most every png to a smaller size.  And as mentioned, all of the pngs in avatars seem to be compressible (most of them by making them grayscale, which results in pretty good savings.)  I'm not suggesting compressing the gifs or jpegs to png, as they would likely be larger.
Quote from Nao/Gilles on June 20th, 2011, 08:47 AM
I dont automate it because png8 sometimes has awful results in ie6 btw.
How do you mean?  Aside from not supporting alpha transparency (in 8 bit or or 24-bit PNGs), I'm not aware of any awful results in IE6.  I must not be aware of it - what problems are there?

-[Unknown]
Title: Re: Optimize release images
Post by: Arantor on June 20th, 2011, 09:19 AM
The avatars folder, yes, they weren't optimised much when I put the xkcd pack together originally, but the rest of the images should be optimised.
Title: Re: Optimize release images
Post by: [Unknown] on June 20th, 2011, 09:39 AM
Quote from Arantor on June 20th, 2011, 09:19 AM
The avatars folder, yes, they weren't optimised much when I put the xkcd pack together originally, but the rest of the images should be optimised.
cd Themes/default/images

svn ls -R | xargs wc -c
 170768 total

find . -name "*.png" -print0 | xargs -0 optipng -o7
find . -name "*.png" -print0 | xargs -0 -n1 pngout

svn ls -R | xargs wc -c
 165021 total

cd avatars/xkcd

svn ls -R | xargs wc -c
 304040 total

find . -name "*.png" -print0 | xargs -0 optipng -o7
find . -name "*.png" -print0 | xargs -0 -n1 pngout

svn ls -R | xargs wc -c
 265055 total

cd media/icons

svn ls -R | xargs wc -c
  59003 total

find . -name "*.png" -print0 | xargs -0 optipng -o7
find . -name "*.png" -print0 | xargs -0 -n1 pngout

svn ls -R | xargs wc -c
  53070 total

That is, of course, counting all images, not just pngs.  Not an immense savings, but a savings.

-[Unknown]
Title: Re: Optimize release images
Post by: groundup on June 21st, 2011, 04:27 AM
Why does it matter that they don't work right in IE6 if you don't support IE6?
Title: Re: Optimize release images
Post by: Nao on June 21st, 2011, 09:41 PM
We support it, we just don't care if it looks bad in it...

Unknown, PNG8 works by setting a 1-bit alpha for IE6. If the shadow/alpha effect is subtle, it'll give good results in IE6. However, if the shadow is quite large and has a wide spectrum of alpha values, no optimization process will be able to determine the best threshold value for the alpha bit. It's even worse if the icon itself has a slight transparency effect: you may end up with a half-visible icon. It happened on the big 'no new posts' icon on the board index, for instance.

Hey, I just realized Firefox 4 has that resizable textarea feature from Chrome... Cool!
Title: Re: Optimize release images
Post by: live627 on June 22nd, 2011, 02:01 AM
Quote
Hey, I just realized Firefox 4 has that resizable textarea feature from Chrome... Cool!
I think Safari had it first :P
Title: Re: Optimize release images
Post by: groundup on June 22nd, 2011, 02:34 AM
So, if you don't care that it looks bad, why do you care about the images?
Title: Re: Optimize release images
Post by: [Unknown] on June 22nd, 2011, 03:09 AM
Quote from Nao/Gilles on June 21st, 2011, 09:41 PM
Unknown, PNG8 works by setting a 1-bit alpha for IE6... no optimization process will be able to determine the best threshold value for the alpha bit.
Fair enough.  Again, partial transparency is not supported by IE6 without using filter hacks.  PNG itself is capable of partial and full transparency, whether 8-bit or 24-bit.

I'm only suggesting using lossless optimizations.

A lossless optimization performed upon a PNG will not change whether it uses partial transparency or full transparency.  It might change its bit depth to PNG-8 from a PNG-24, but maintain the partial transparency.  Or it might compress the data with a more efficient algorithm than zlib as standard.  But it does so without affecting IE6 compatibility.

I'm only talking about free optimizations: the best kind.  All one has to do is partake of them.

By the way, the avatars could also be optimized losslessly (read: no additional artifacts, no pixel changes) as well, but it would only save 5KB.

-[Unknown]