Monday, August 17th, 2009

punypng: crushing your images even more

Category: Performance, Utility

<>p>Conrad Chu, Design Director at Ask.com, thought he needed an image compression tool better suited for designers and front-end developers (compared to smush.it) and scratched the itch with punypng.

punypng is serious about image compression — it handles 8-bit PNGs, 24-bit PNGs, JPEGs, GIFs and animated GIFs. It also leverages dirty transparency techniques to further optimize transparent images beyond what typical compressors like pngcrush can handle.

Features

  • Fully supports for PNG, .GIF, .JPG
  • Clear affordances for # of bytes saved (as well as being pretty bar graphs)
  • JPEG Compression — punypng doesn’t leave JPEGs out in the cold.  JPEGs are analyzed to see if a compressed PNG format is better (ex: JPEGs with heavy solid areas benefit from this).  But if not, don’t despair, punypng is backed with jpeg-tran and jpegoptim for further JPEG optimzation.
  • “Fire-and-forget” batch processing: You can upload up to 50 files in a single session.  Optimized versions are clearly labeled, and if no further optimization can be made to the uploaded file, you get the original back untouched.  After you upload a batch, you can go ahead and upload another batch without having to reload the page.
  • Download batch jobs as a single time-stamped ZIP.
  • See the changelog for future updates

More info

Ray Cromwell had an informative note (as per usual):

Also add AdvancedCOMP’s superior-than-zlib/gzip compression which they don’t appear to be using.

Related Content:

  • Get cracking crushing Conficker
    Conficker will activate its botnet on April 1st. Sophos, Symantec, Webroot, BitDefender and other vendors say you should remove it ASAP before the...
  • Mirror Image
    Mark Lillycrop advises readers to look at themselves in the mirror, and see themselves as users see...
  • Network access control market crushed by economy, but future is bright
    The network access control market has suffered a bloodbath through the global recession, but analysts predict the market will bounce back as...
  • Battling image spam
    The threat environment is changing once again as spammers investigate new technologies in an effort to stay one step ahead of spam filters. Their...
  • Battling image spam
    The threat environment is changing once again as spammers investigate new technologies in an effort to stay one step ahead of spam filters. Their...

Posted by Dion Almaer at 6:19 am
24 Comments

++++-
4.5 rating from 42 votes

24 Comments »

Comments feed TrackBack URI

Unless a remote service is vasty superior in compression it would not be worth it to me.

I can’t get the site to go past the upload stage, can someone compare to to PNGOUT and PngOptimizer: http://psydk.org/PngOptimizer.php

Comment by ck2 — August 17, 2009

the problem is that once you compress the images you cant see a preview in the browser which means you have to download, view to make sure if they are ok and then replace your original files.. kind of makes life hard.

Comment by kyriakos — August 17, 2009

I tried smush.it a few months back but I prefer this kind of service to be offline, so I’m not at the whims of my network connection. I’ve been using PNGMonster for the past couple of months, and it’s pretty awesome. It doesn’t support JPEGs, and I wish it had a more detailed information about how it compressed the files (it only gives the total) but these are really minor issues.

Comment by iliad — August 17, 2009

I have been using a Windows shell script to optimize my PNGs to the maximum for years. It utilises ImageMagick and OptiPNG to produce best results, though I must admit this sometimes means losing some rich colours. For those interested, here’s the shell script: http://pastie.org/585805 Save it as .cmd, set up correct paths and drag & drop a .png file over. I get files roughly 30-50% smaller in size usually, but let me point out again this involves losing some colours (unnoticeable on most files).

Comment by StanAngeloff — August 17, 2009

@iliad and @kyriakos
I agree with doing this offline. http://tinycdn.com/Utilities/TinyOptimizer here is a good tool to do minification and png crushing. It creates a backup of any files it effects and you can drag an entire folder onto the app and it will handle a nested directory structure. For the png handling it uses png crush (brute) for js and css it uses yui compressor. It is a clickonce app and uses a server for the file manipulation via webservices (why? so it doesnt have to load a lot of dependent files on the server)

Ill check out punypng, seems pretty cool and I am usually looking to get every byte out of the band.

Comment by Quotient — August 17, 2009

@ray: Actually, punypng uses several open-source libraries, including AdvComp.

@mastersuwjiang: totally agree with pngnq.. .it rocks. I’ve been looking into quantization, and it’s probably the next thing that punypng is going to consume to get some more puny love.

@kyriakos: I hear you re: the lack of previews. They’re on their way… many others have asked for them ;)

@ck2 and @StanAngeloff: ImageOptim which I do benchmark here (http://www.gracepointafterfive.com/punypng-benchmarks) does the shotgun approach and uses Optipng, Pngcrush, Pngout, and AdvComp. I think punypng fares well against them, especially on transparent images through the dirty transparency support. I’d be interested to hear what kind of results you get using punypng vs the others.

Comment by chuboy — August 17, 2009

Has anyone done a punypng vs. Photoshop CS4 native png compression comparison?

Comment by WillPeavy — August 17, 2009

@chuboy: Using the Pastie script above (ImageMagick + OptiPNG), I can get the butterfly image down to 58,364 bytes. On more complex images (suitable for JPEG compression), punypng drops about 7-10% in size where the I+O approach produces around 40-50% decrease. Of course punypng does lossless compression where my approach also lowers the depth of the image.
BTW on a side note, the butterfly images on the website are broken, missing the /punypng/ directory in path.

Comment by StanAngeloff — August 17, 2009

@StanAngeloff: thanks for the catch, I fixed the URL for the butterfly images.

For the butterfly image, I’d be interested to see how the ImageMagick+OptiPNG combo works on the original image, rather than the post-optimized one … I’d be surprised if OptiPNG can reduce it more. I think much of the savings you were able to get were due to the ImageMagick bit depth reduction rather than the -o7 option, which raises a good point that @masterwujiang suggested regarding quantization. At Ask.com, our sprites have to be lossless since every pixel counts, but I’m definitely thinking about doing some better quantization techniques now!

Comment by chuboy — August 17, 2009

@chuboy: Yes, the optimisations as pointed above are mainly a result of the depth reduction — OptiPNG alone is not much to go on. In most cases reducing the depth doesn’t hurt since it’s barely noticeable. I was just playing with this photo http://bit.ly/Dm7BR and using quantization is really paying off. It might be possible to auto-choose the best depth level for individual photos by building colour distribution histograms, though that sounds a bit far fetched for my liking.

Comment by StanAngeloff — August 17, 2009

If it supports animated GIFs, it should also support APNGs.

Comment by EliGrey — August 17, 2009

I uploaded a 120kb png image that I’ve worked hard at compressing locally with some tools I have (PngGauntlet, PNGOUT)

Punypng was not able to compress it any further than I already did.

Comment by jlbruno — August 17, 2009

Sigh. This got my hopes up.

What I want is an application that I can run on my servers (windows for development and linux for production) that I can run to resize all of my images, and then for the production servers have cronjobs that take the resized images (PNG, GIF, JPG) and compress them, replacing the original file. Is that so difficult to ask?

Heck, right now I am using PHP’s GD functions to handle the resizing. So just having something that can be run any any server as a cron job for compression would be ideal. With many of these compression scripts they seem to do only png or only jpg, etc… not ideal.

Comment by blepore — August 17, 2009

blepore: don’t give your hopes up. An API is on its way soon.

Comment by chuboy — August 17, 2009

chuboy: glad to hear it. :)

Comment by blepore — August 17, 2009

What about pngslim?

Comment by cancelbubble — August 17, 2009

good service!
it is sorry that no an offline version

Comment by 1234567890qwert — August 18, 2009

Just tried 4 images totalling 183KB, 3 jpg, 1 png. This’ll save me 3KB over what photoshop did. Not worth it in my opinion for most.

Comment by youngestlinton — August 19, 2009

Erm.. what’s the use of an online image crusher? Advertisement for the company offering it. Who’s going to get all their images crushed for every website by hand, then hand over a manual to their clients where it says they should go crush their images at the online service before uploading them into the CMS?

Right…

Comment by Yereth — August 19, 2009

@yereth:

Here’s some usefulness of an online image crusher:
1. Most people are in need of a one-stop shop to compress all your images: GIF, PNG, and JPEGs. Currently, there’s no single offline tool that does all three formats which compression comparable to the popular libraries (PNGSquash comes close). I was a big fan of Smush.it until they removed the upload feature in favor of YSlow integration which is why punypng fills in that niche nicely.

2. If you want to get decent file support at the command line, you will need ImageMagick which is a nightmare to install plus you’ll need serious scripting abilities (kinda disqualifies most people I know).

3. Punypng’s API is in the works, and once that’s in place, you should be able to get image compression in any of your CMSes, like WordPress. Joost de Valk from Yoast emailed me this morning to start that discussion.

4. As with any online service, you get quick incremental improvements without having re-install anything on your desktop. I don’t know of any tool out there that supports Dirty Transparency, for example.

In general, you don’t crush *every* image on your site, nor is it worth the time and energy. But if you have sprites and heavy UI elements, it matters, and a free tool like punypng addresses that need perfectly. I was able to cut our UI assets on Ask.com by half using punypng, cutting our initial load times in half. As a top 10 internet destination, that translates into real cost-savings.

Dictionary.com got similar results using punypng. Wikipedia will get punyified assets in a month or so thanks to GreenReaper’s effort. Evite is on it’s way as well.

Comment by chuboy — August 19, 2009

And what about animated gif optimization ? Does punypng supports it ?
I use gifsicle for windows, is there anything better ?
Thanks

Comment by dolphin713 — August 20, 2009

@dolphin713: Yes, punypng support animated GIFs, but it’s using gifsicle as well. I guess the only benefit is that you don’t have to run it on the command line and can do batch operations a lot easier, especially when your animated .gif is mixed in with other files and you just want to process everything at once before you release to production.

Punypng will have Animated PNG (APNG) support in the near future as well.

Comment by chuboy — August 20, 2009

pngoutwin which is a GUI over pngout with several brute force options gets way more compression than punypng in almost all of the images*. Yes, it takes a lot of time (specially on my settings that runs 192 iterations per file), but it’s something you do *once* and then serve the files million times :)

the overal rundown (in same order as your benchie) was: 24%, 47%, 13%, 36%, 62%, 10%, 66%, 31%, 26%

*as you see, the only big exception is the butterfly image, which for some reason doesn’t get good compression on any of the standard tools [my best guess is that your tool is applying mixed filters whereas other tools apply the same filter over the whole file]

Comment by gonchuki — August 27, 2009

Across the board with my own files coming out of photoshop .gif .jpg and .png files punyPNG has beaten all the optimizers including pngoutwin I tried. It’s free, works and works well.

One test file of mine which is a 93kb .png compressed to a maximum of 73kb with pngout and punyPNG it was 62kb….

Comment by SoulMyst — January 15, 2011

Leave a comment

You must be logged in to post a comment.