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)

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!!

I originally created GraceList as an internal application for our church, Gracepoint Fellowship Church, Berkeley.  With a close-knit community that emphasizes open homes and lives, you can imagine how many things get lost and found.  I wanted a dead-simple classified apps so people could make postings about the small Bible they found at last week’s prayer meeting to the new analyst opening at their work.  It has to be easy to use: from our techniest geeks to Kelly, our pastor’s wife ;) In the past, we would just email blast our Gracepoint member alias and that would just clutter hundreds of inboxes.  We needed our own little private Craigslist with a smart digest email to highlight new postings.

View Demo

Features:

• Custom categories for posting
• Simple UI for making posts.  All you need is an email!
• Support for Textfile
• Send digest HTML emails periodically to an alias with new postings highlighted

GraceList requires Rails 2.2 or above.  Download and installation notes are available on GitHub:

http://github.com/conradchu/GraceList

We hope you enjoy using this simple little app that has made life a lot easier for us.  We’re glad we can finally share it with the rest of the world.

• 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.

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.

Typical use case where dirty transparency will give you the most savings

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:

punypng's new support for dirty transparency

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.

Initial Setbacks

Unfortunately, Safari is the only browser currently that (natively) offers this nice-looking search field. What to do, what to do? Well, we could simply fake it, couldn’t we? That is, we could just have a simple text input field and tack on two rounded sides on the end, no? Unfortunately, it’s not that easy. You see, in Safari, when you select an input field, it “glows”:

There were other problems that came up along the way:

• No way to disable glow in Safari, or
• no way to only make the outside glow in Safari (if we were just using a standard text input)
• Safari uses type=”search”. However, that isn’t W3C compliant.

Solution

Well, without going into all the boring details as to what we’ve done, let me just say that we’ve turned it into a generic framework, and you can download it here. A thing to note is that it requires the Mootools framework.

Implementation

We first need to reference the right files. Remember, Mootools go before prettyinput.js.

<script src="mootools.js" type="text/javascript" charset="utf-8"></script>
<script src="prettyinput.js" type="text/javascript" charset="utf-8"></script>


Next, we’ll place the input tag inside the HTML file. Note that the span element is optional — it defines the text inside the search bar.

<label for="YOUR-ID">
<span class="prettyplaceholder">Search</span>
<input id="YOUR-ID" class="prettysearch" type="text" />
</label>


Finally, let’s insert this Javascript snippet in the header.

window.addEvent('domready', function() {
new PrettyInput($('YOUR-ID'));
});


Voila! That’s it!

Compatibility

This is fully compatible with the following browsers:

• IE6+
• Firefox 2+
• Safari 2+

Download PrettySearch (15KB)

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.