Skip to content

24 ways to impress your friends

Minification: A Christmas Diet

8 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Erik

Thanks for pointing these out. For CSS and JavaScript minification, I’ve been very happy with YUI Compressor:

http://developer.yahoo.com/yui/compressor/

Also, I find the Java version of Tidy is less of a hassle to use:

http://jtidy.sourceforge.net/

Cheers!

Simon Pascal Klein

OptiPNG by default runs through only about ten compression methods. To go through the full lot (it’s in the high hundreds) to find the best IDAT compression method use:
optipng -zc1-9 -zm1-9 -zs0-3 -f0-5 file.png

Note this can take some time if you are working with medium to large PNG files but can bite off a few more bytes off your file without loosing data. I’ve found it most useful when working with web applications that feature a heavy icon set and with so many tiny images it was definitely worth it. We ran into one issue whereby OptiPNG would change the colour type of the image to achieve a better compression (this is on by default) but the output would render strangely in IE and Firefox under Windows. Add the -nc flag to disable colour type reduction.

Thanks for the article.

Manuel

Just tested as suggested in the comments here, and PngOut beats OptiPNG in all my sample images (PNGs coming out of Photoshop’s Save for web). Anyway, for most of the images, the compression gain was trivial (6% with PngOut and 3% with OptiPNG).

Pim Vernooij

Nice article, but what i’m really interested in, is minify/compress scripts on-the-fly, a.k.a. in a production environment.
I did this combined with combining css and javascript files. The compressed versions are cached server side, and only regenerated if a requested file has been changed server side. This is a big advantage, because the development version keeps it’s markup and comments, only if requested through the website, a new compressed/minified copy will be made and stored in a cache file.

For javascript i’m using a php port of JSMin, and for CSS a custom regex script. I’ve looked into CSSTidy (php port also), but couldn’t get it to work properly.. The only output i got was the html’ed output to the browser.

Is there such thing for compressing png’s?

Impress us

Be friendly / use Textile