#punypng

[learnwithhonee]

Kracken.io vs PunyPNG

Which one is the best image compressor?

I've been using PunyPNG PRO for more than 2 years now at $5 / month. I just case across PunyPNG and didn't look further for alternatives. However, I have been experiencing already some problems with PunyPNG that I started to look for a better one and I came across Kraken.io and will never switch back to PunyPNG anymore. 

Why?

Simple. Kraken.io is FREE and faster. Though there are options for an upgrade, at the moment, the FREE version can still manage my needs. But in terms which ones had brother options, I can still say it's Kraken.io. PunyPNG PRO can only compress an image size of maximum 500KB per image. Beyond that, you already have to work around your image size.

Kraken.io is better, it can compress up more than that once you upgrade your Kraken.io account. 

"Kraken is a robust, ultra-fast image optimizer and compressor with best-in-class algorithms."

Hope this would help designers out there looking for alternatives on which image compressor, optimizer to use.

[conrad]

PunyPNG hits the 10k mark

PunyPNG finally surpassed it's 10,000th user.  I guess not such a big milestone for most web services out there.  Two years later, almost 2 million puny images later, on a shoe-string budget, it kinda hit me there are that many developer/designers out there that rely on PunyPNG in their daily workflows.  That's awesome!  Going into the future, we'll be moving to a HTML5 backend soon and offer drag-and-drop support, so stayed tuned.

[conrad]

PunyPNG on a New Server

I finally found some time to move PunyPNG to its own dedicated slice (previous it lived on Gracepoint After Five's slice). You can now go directly to PunyPNG via this new URL: http://www.punypng.com (http://www.gracepointafterfive.com/punypng will now be redirected to the new URL, but any API calls will not be redirected)

[conrad]

New Features in PunyPNG

We just pushed out some hot new features to PunyPNG today:

Added option to preserve EXIF data, to maintain copyright and other image metadata

Added option to skip bit reduction when compressing.  This improved IE6 compatibility (see PunyPNG's IE6 support)

REST-based API support (beta)

We also fixed a handful of outstanding issues:

Improved performance of dirty transparency compression

Improved simultaneous uploading of multiple files

Fixed bug where the total savings being reported were incorrect

You can now sign up for PunyPNG to save your custom compression options and get assigned an API key.  We're also excited to release the long-awaited PunyPNG API.  This will give you the ability to optimize multiple files in batch using a REST-based API (responses are in JSON).  Smusher is a great example of how you can use the command-line to invoke PunyPNG without sacrificing your own CPU cycles.  The API is currently in limited beta, with some restrictions to ensure nobody decides to optimize their entire photo archive library over winter break or something. Look out for more updates in the coming weeks.  Your feedback and feature requests are invaluable to making PunyPNG the awesome compression tool available.   Keep it coming. Merry Christmas!!

[conrad]

punypng Benchmarks

I recently ran some benchmarks, comparing punypng to a lot of the popular tools out there. I selected tools I felt were decently strong and versatile in handling images:

punypng: the new kid of the block.

smush.it: Uses pngcrush as the main PNG optimizer.  Currently, available in Yahoo's YSlow Firefox plug-in.  I believe it uses the -brute option for pngcrush.

OptiPNG: A slighlty better algorithm, compared to pngcrush.  In case you're wondering, Google's PageSpeed plugin also uses OptiPNG for it's compression library.

ImageOptim: The heavyweight contender.  Available for OS X, ImageOptim uses every major library out there: advdef, pngcrush, optipng, pngcrush, jpegoptim, jpegtran, and optionally pngout.  I ran this the benchmarks with pngout enabled.

Now, it's tricky business to try to compare compressors side-by-side against a single image.  So instead, I selected some typical images that I found on the web, like sprites from some popular websites (Facebook, Yahoo's icon set, and of course Ask.com, hehe).  Images vary from 24-bit transparent PNGs to 8-bit indexed GIFs.  Amount of transparency among the PNGs also varies. I also included a blocky-styled JPEG to see how the different tools handled it.  I know some might cry foul because I included a JPEG with solid colors (since you could have just saved it as an indexed GIF or PNG).  However, I've seen hundreds of JPEGs that people have been uploading to punypng and it just shows that it's often hard to know which format was certainly be the best one. OptiPNG and ImageOptim also cannot process JPEGs and GIFs respectively.  Before benchmarking, I converted them to the more digestable PNG format using ImageMagick to ensure no metadata was added In total, the test images in total weighed in at 276KB. Download the Test Images Here are the results: punypng was able to achieve 41% savings, almost double the competition  The most surprising result was how much punypng trounced ImageOptim, especially on the NASCAR image.  I was actually thinking that ImageOptim would beat punypng on some of the tests, since it uses everything under the sky.  In terms of processing time, punypng was a wee faster than smush.it, about the same as OptiPNG, and light-years ahead of ImageOptim, which took eons to compress as it's CPU-intensive. One caveat I want to make is that this benchmark is not meant to say punypng is going to beat out the competition every time.  However, on average, it does an excellent job, especially on images with 24-bit transparency.  Libraries like pngout (which is part of ImageOptim's toolbox) does a good job as a standalone library, but it's very slow.  I've often found that pngout only saves a few bytes here or there, and isn't worth the wait. I think one thing that favors punypng (as well as smush.it)  is that it handles every kind of image you would use on web page: PNGs, GIFs, JPEGs, and Animated GIFs.  I was kinda bummed with the other tools because they primarily processed only PNGs and had weak support for other formats.  Personally, I just want a tool I can use to compress all my images using the latest compression technologies and techniques, and for me, that's why I recommend punypng to all.

[conrad]

punypng now supports Dirty Transparency

Gracepoint After Five's super-ninja compression tool, punypng, got a new upgrade to help slice and dice the size of your website images.  punypng's compression algorithm now automatically supports Dirty Transparency as described by Sergey Chikuyonok's awesome article on Clever PNG Optimization Techniques that was recently published on Smashing Mazagine.  This unique and innovative technique offers additional compression to any PNG or GIF as long as it has either 8-bit or 1-bit transparency.  On average, you can save about 10% more, and in some cases, you will save even as much as 35%! As I wrote previously regarding dirty transparency, you can use our Photoshop action to create a more optimized PNG.  If you ever find yourself outputting a layer that has been masked, you can look to get some serious savings. [caption id="attachment_124" align="aligncenter" width="300" caption="Typical use case where dirty transparency will give you the most savings"][/caption] This butterfly image above was reduced by 36% when I ran it through the updated dirty transparency compression algorithms in punypng.  This image was only reduced by 7% when dirty transparency was disabled. One of my Ask.com UX Design buddies was a little skeptical in terms of how dirty transparency would help our team.  He mentioned that our sprite preparation process already optimizes the transparency of our assets;  transparencies are already cut and matted ... no hidden image data.  Right? Well, I wasn't sure either way , so I decided to run a test on our Ask.com sprites.  Our sprites span a good variety of use cases, ranging from full 24-bit color PNGs to 8-bit GIFs to 24-bit hand-quantized, indexed PNGs.  In terms of image data, everything is as tight and pixel-pushed as they possibly can be ... transparencies are matted and all masks applied. Here are the results: [caption id="attachment_129" align="aligncenter" width="300" caption="punypng's new support for dirty transparency "][/caption]

The above results speak for themselves.  The results are very surprising!  punypng was still able to squeeze out another 3% of compression on average on top of the existing compression algorithm! So what's the catch.  Well, in some minor cases, the dirty transparency technique produced images that were 1-2% larger than usual (though they were still smaller than anything that pngcrush or optipng could ever produce).  However, these were rare cases and the savings as a whole in fact did add up to 10% or more.  In terms of performance, using dirty transparency to compress 15 or more files adds only added 1-2 seconds to the process. In general, I think it's safe to say that dirty transparency is a proven technique that warrants inclusion in everyone's arsenal.  It's my hope that with this latest addition, punypng can start emerging from the myriad of compression tools on the market as the one-stop tool for designers and web geeks who are serious about making the web more puny.  Give a try and post your comparison results. Thanks again to Sergey Chikuyonok for his original contributions.  I look forward to adding more of his techniques into punypng. Update on 10/12/09: PunyPNG supports IE6 using the dd_belatedpng plugin.

[conrad]

Dirty Transparency in PNG Optimization

Smashing Magazine has a great article on PNG Optimization techniques.  The dirty transparency technique is awesome, and I started running tests on our internal assets at Ask.com and Gracepoint Berkeley, and we're seeing some significant savings.  Just when I thought PNG compression was all there was to it, Sergey Chikuyonok (the author of the article), blows us away with some really innovative optimization techniques. To make dirty transparency easier, I created a Photoshop Action that you can use to run on your PNGs.  Make sure to run it on single-layer PNGs that have already been saved off via Photoshop's Save for Web.  Don't try to run it on your multi-layer PSD file as the script is looking for a layer called "Layer 0". Download: Dirty Transparency Photoshop Action (1KB) I also like his usage of posterization as a way of reducing colors.  At Ask.com, I developed a similar technique except using Photoshop's color-indexing algorithms (perceptual, adaptive, etc) which I think offers the compressibility of posterization but does a better job at maintaining smoother gradients/detail.   Posterization's diffusion characteristics are a little rough for my taste.  One of these days, I'll post a tutorial on how we do this technique, which isn't terribly innovative imho, but I haven't seen anyone talking about it so it'll be worth writing up at some point. Meanwhile, be sure to check out punypng, as simply the best way to optimize your PNGs on the net.

[conrad]

punypng: making the web more puny, one png at a time

I finally released punypng to the world last week.  It's a free png compression service that intelligently leverages multiple open-source png compression algorithms in the hopes of making the web  more puny, one png at a time. Try out punypng (as a short url: http://www.punypng.com works as well) How punypng came about punypng actually started not as a need at Gracepoint Fellowship Church, but rather at my day job.  At the Ask.com User Experience Team, we believe down to our toes that design is about craftsmanship.  Our designers are obsessive about detail, and though few notice, everything is "pixel-pushed" -- no stray pixels, no unnecessary colors.  A big part of search is fast page load times.  Every search experience team (Google, Yahoo, etc) knows that the faster the page loads, the more loyal your users will be over time (if you don't by now, well, now you know).  The Ask.com team previously relied on Yahoo's smush.it service (no shame, Yahoo dev tools are great and a huge asset to everyone), which was very impressive, but for our day-to-day work, we wanted something that was made for designers by designers.  So after a few sleepless nights thinking how I can make my PNGs smaller, I decided to start on the punypng project.  Fast forward a month later, punypng is now the bread and butter tool among the Ask.com UX designers (and the Gracepoint designers as well) The specialness of punypng I don't claim that punypng is for everyone.  I wanted a tool made for designers, and so I also left out a lot features (for now) such as an API or fetching images via URLs (I assume all original assets are on your hard drive not on some website).  But though lacking in these small ways, it does boast some great 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

The future I don't know what the future holds in store for punypng.  Please let me know if there's some enhancement or new feature that would help your day to day work.  punypng has relentless commitment to making every png as small as possible, so barring enormous CPU requirements, let us know if there's some experimental binary out there that we can include. The great thing of an online tool vs a desktop tool is that we can constantly improve the performance and efficiency of the compression as new algorithms are made available.  Just today I found a way to squeeze out 3-5% more.

Help support punypng Well, every Gracepoint After Five project is free to the world, and is our belief, that all the little tools we build will end up benefiting the church at large (as well as my team at Ask.com of course).  Running a CPU-intensive site like punypng isn't cheap.  Please help support the cause.  If not, please help spread the word.  Our gratitude to you is non-puny. Update on 10/12/09: PunyPNG supports IE6 using the dd_belatedpng plugin.