Clever PNG Optimization Techniques | Hacker News Reader

Clever PNG Optimization Techniques

smashingmagazine.com

63 pointsswombat13 comments

Great article, it is rather photoshop centric though.

PNG is a really neat format to produce from code when you're trying to visualize datastructures as well, and some of these optimization tricks can be used with the GD library as well when you select the image type.

If you produce a lot of those images the bandwidth savings can be quite considerable.

They're good tips but unless you're addressing a large audience on 28k or less of bw then you're just as well to use pngcrush and be done as this will give you nearly all the optimisation with barely any time spent.

I like optipng better, it's based on pngcrush, but with some extra features and better defaults.

Just did a single test - 6MB file for an advert I did yesterday. 10K bigger with optiPNG than with pngcrush (using defaults) and took longer to process with optiPNG. I'm not bothered enough to test further ...

Also the optiPNG website doesn't say it's based on pngcrush, it does appear to have started by using the same methods though.

Yet. I usually opt for producing some graphviz format, though. Produces nice looking graphs.

Extremely useful if you are a photoshop guy and you need to slim down a website. People aren't paying as much attention to shaving kilobytes off of the size of a webpage anymore, but given the number of mobile devices with data access, it is still a very big deal.

If your site design relies so heavily on graphics, you are probably not doing all you could to optimize it. And if your site content is so heavily image-centric, then the burden is on your users to get equiped for the experience.

If we're already talking about website optimization lets mention the obvious.

http://developer.yahoo.com/performance/rules.html

Here’s a neat app for optimizing PNGs after saving:

http://news.ycombinator.com/item?id=676973

Why not use JPEG unless you really need transparency?

Because JPEG is a horrendous format for these types of pictures.

Using it is a mark of an inexperienced graphic designer.

Use JPEG if you photographed a real life object with a camera. ALL other images (for the web) should be PNG.

Oh, and the reason it's horrendous is that it makes the images blurry - and larger! And you can no longer realistically edit the image once JPEG touched it. (For example change a color: use a color picking tool, can't do it once jpeg touched it.)

I disagree. There are enough cases where a JPG image looks the same but has a smaller file size. There is no reason to not use JPEG in that case. You are overexaggerating with the "blurry and larger" part. Using PNG just because is a mark of an inexperienced graphic designer to me. Know your options and choose the right one.

Just keep the original work file (which surely is not a PNG either) and change that if you have to.

Obviously you should use jpeg for a photo.

For a non photo the only time jpeg would be smaller is if it's a dithered image. And since you shouldn't use a dithered image anyway, I maintain what I said.

Reply on news.ycombinator.com