A simple step I often forget when building image assets for web pages is to optimize the graphics files. There are a whole host of utilities that reduce the size of images. I tried a few and the best for PNG seems to be PNGout.exe, from Ken Silverman's retro-ugly utility page.

PNGout fiddles with a bunch of degrees of freedom in the PNG spec to find the smallest sequence of bytes that express the same pixel values. This morning it reduced one of my images to 61% of its size. Nice.

If you want to understand what's going on, OptiPNG has a page explaining the details of what parameters exist in PNG that can be twiddled to acheive better compression.

If you are willing to consider art-level changes to get the absolute smallest sizes, Sergey Chikuyonok's Clever PNG Optimization Techniques gets into the nitty-gritty of how to re-think your image to take advantage of PNG's characteristics. He also has a companion piece on Clever JPEG Optimization Techniques which gets even trickier.

tagged: , » 4 reactions

Comments

[gravatar]
Jonathan Hollin 7:49 AM on 31 Aug 2009

It's a step that I always forget too. I do keep an eye on file sizes when I'm developing for the web, but I don't do too much optimisation beyond Photoshop's, "Save for the Web and Devices..."

Which, I guess, is why my website is so bandwidth-heavy. Damn!

[gravatar]
masklinn 10:52 AM on 31 Aug 2009

I tried a few and the best for PNG seems to be PNGout.exe, from Ken Silverman's retro-ugly utility page.

It's good, but computationally expensive and actually not necessarily the best on its own.

On Windows, I usually suggest going with PNG Optimizer as a baseline: fast and simple to use, you always have the time for it even if it's just for sending a screenshot by mail (incidentally, you can take a screenshot and paste it in PNGO, it'll compress it and give you the screenshot as a PNG, very cool. It also trivially converts GIFs to PNGs). If you can spend more time on the optimisation, try applying PNGOptimizer then PNGOut, and the reverse. From time to time, one of those sequence will shave a few more % off the image than either of the compressors independently.

On OSX, I use PNGSquash which does pretty much the same thing but on its own: it makes the image go through 3 or 4 PNG compressors (PNGOut's license forbid its inclusion so PNGSquash works without it by default, can use it if you provide the binary separately) with a nice GUI frontend and returns the result. No reason not to use it.

(and PNGOut doesn't only fiddle with the PNG settings, it also uses a custom Deflate compressor with tradeoffs similar to 7-zip's except going even further in trading compression time for archive space)

Which, I guess, is why my website is so bandwidth-heavy. Damn!

Especially if you're using early (up to CS2 at least) versions of Photoshop: their PNG compressor stinks. I think CS3 and CS4 improved on it, but for CS and CS2 the compressors are garbage

PS: Ned, why don't you allow blockquote?

PPS: the preview behaves weirdly when markuping manually and putting line breaks between <p> tags: it doubles the line-breaking


like that

[gravatar]
Nolan 1:11 PM on 31 Aug 2009

Have you seen smush.it?

[gravatar]
ilan Dray 12:01 PM on 1 Aug 2013

Smush is cool but still png optimizer results are much more impressive (70 % vs 30 % )

Add a comment:

name
email
Ignore this:
not displayed and no spam.
Leave this empty:
www
not searched.
 
Name and either email or www are required.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.