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.
Related Posts
- punypng now supports Dirty Transparency
- New Features in PunyPNG
- punypng Benchmarks
- Dirty Transparency in PNG Optimization
Tagged as compression, optimization, png, punypng, ruby on rails + Categorized as Design, Our Projects
24 Comments
Trackbacks & Pingbacks
-
Daily del.icio.us for August 13th through August 16th | Vinny Carpenter's blog
[...] punypng: making the web more puny, one png at a time | Gracepoint After Five – 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. [...]
-
Ajaxian » punypng: crushing your images even more
[...] suited for designers and front-end developers (compared to smush.it) and scratched the itch with pungpng. punypng is serious about image compression — it handles 8-bit PNGs, 24-bit PNGs, JPEGs, [...]
-
punypng: Open Source image compressor
[...] August 17, 20093:48 am punypng: Open Source image compressor punypng is a free png compression service that intelligently leverages multiple open-source png compression [...]
-
The Ashes » Blog Archive » punypng: crushing your images even more
[...] suited for designers and front-end developers (compared to smush.it) and scratched the itch with pungpng. punypng is serious about image compression — it handles 8-bit PNGs, 24-bit PNGs, JPEGs, [...]
-
punypng: crushing your images even more - Programming Blog
[...] 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, [...]
-
punypng — Jan Boddez
[...] just tried out punypng, a free PNG compression service that drastically reduces images file [...]
-
Upload Foto Dengan Punypng | DailySocial
[...] blog penciptanya Conrad dijelaskan bahwa proyek ini berawal dari kebutuhan para designer akan sebuah aplikasi yang memang [...]
Perhaps one useful feature would be to have totals of bytes uploaded, optimized and saved.
Jonathan, that sounds like a good feature to have for the next iteration of punypng! Thanks!
Easily, the best article about image size optimization on the web that I have ever read.
Keep the good work.
Thank you.
D.
Jonathan,
I added a total savings roll-up to the bottom of the results table. It will give you total KB and % saved. Lemme know how it works for you.
Conrad
Saved a cool 25kb in MediaWiki trunk over 72 images. Thanks for helping to speed up a top-10 website! :-)
I’ve just tried this and it’s given me a slight saving over OptiPNG. The only problem is it is not so easy to integrate punypng into my current build process (and even if I could, I wouldn’t want to be calling a web service from a Makefile!).
Do you have any plans on packaging this up for download? Even if it’s just a hacked together patch against libpng, many would prefer that to an online service.
David
Nice service, and indeed more powerfull than smush.it.
Too bad images are 500kb Max. I once had a 7MB image I sent to Smush.it and it got reduced to 2MB.
just tried it out and awsome almost 25% better than smush.it and OptiPNG
It fails on aPNG images, all the animated frames are lost.
Try it yourself with http://img36.imageshack.us/img36/2383/goodevil.png
Can this be fixed?
As some coined out that, a binary download or even better, a Debian package and RPM would be awesome. Today I use both pngcrush & jpeg-tran but your tool seem far better.
Thanks for your work :)
@mardeg: sorry, aPNG is not currently supported by punypng. I’ll look into adding that support soon.
@oncletom: once I finish the API, I’ll look into getting a binary to use punypng from the cmdline
Nice tool, and interesting to see that some tools provide savings where others don’t. It’s also the case for punypng, of course – some images I tried could not be compressed by punypng but could be reduced in size by YSlow/smush.it. I suspect the ideal compression tool would try both optipng and pngcrush and use the smaller of the too, rather than always using the better-on-average tool.
If you’re interested in reading more about Image Optimisation for the web, Stoyan Stefanov (Yahoo!) has some good slides at http://www.phpied.com/image-optimization-7-mistakes/
i just want to say:’it’ s a very good tool’
Hello,
First, thank you for that useful tool. I had been using Smush.it for a while, then Yahoo integrated part of the tool in Yslow and basically killed it.
I have two concerns with punypng (in addition to the restrictive and somewhat misleading name):
1. What happens if punypng disappears? Web designers and front-end developers need that kind of all-in-one tool, but there’s no guarantee it’ll be available tomorrow. Smush.it was killed by Yahoo. Including punypng in one’s workflow is somewhat risky. Possible solutions include distributing binary packages and/or open-sourcing the tool.
2. One of the advantages of Smush.it was that it would strip problematic color information from files (PNG mostly, but i think JPEG had some issues with ICC color profiles either embedded or referenced). Most color information in PNG files are unnecessary for websites, and may cause color consistency issues in Internet Explorer, Safari and Firefox (especially since color management is on by default in FF 3.5 for tagged images). For PNG, Smush.it would remove the following chunks (and maybe others, but these are the only color-related ones i know of): gAMA, cHRM, iCCP, sRGB, bKGD. This avoids a lot of color rendering issues where CSS background-color won’t match the exact same color in an image ( tag or CSS background-image). The only problem is that removing the bKGD chunk is a mistake: that chunk, that you can set with graphics editor such as The Gimp or using a PNG optimization tool, is useful as it can work as a default matte color for a PNG-24 image in Internet Explorer 6 (a nice graceful degradation trick). So i would suggest that punypng strips the gAMA, cHRM, iCCP and sRGB chunks, but keeps the bKGD chunk. Right now all of them are kept.
@florent: well, the history of the punypng name is that I wanted to mainly optimized GIFs into highly compressed PNGs, then quickly realized I wanted a more versatile tool in my workflow to handle all kinds of images, like JPEGs and Animated GIFs. So yeah, I agree, it’s a little confusing and I wonder if I came up with a clearer name whether more people would realize it can really help them. Any suggestions?
As for open-sourcing, I know many people have asked for it, but there are two main reasons I’m not releasing it to the public just yet.
1) I don’t have much time to maintain an open-source project. If you know of anyone who would like to help I’d be happy to work with them. However, I do have some strong preferences about the design and user experience of the software, and would love to focus most of effort on there rather than merging code.
2) Punypng has a lot of dependencies. After upgrading to Snow Leopard, I’m still re-compiling all my libraries to get punypng running again on my laptop … which I hope I can get to today. One of the reasons I made punypng for my team here at Ask.com and my church (Gracepoint Berkeley) is that few web designers have the chops to manage a half-dozen UNIX packages let alone shell. It’s been 10 years since I coded C/C++ skills, so it also doesn’t look like a binary is going to happen soon either. Plus, I’m not sure I want to release a command-line binary because that’s what I hated about pngcrush, pngout, optipng, and the mix of them. It took too long and complicated to process my images from the command line.
So what I am planning on is creating a JSON API to interact with the punypng service. Will punypng be around forever. Probably not, but at the same time, I think it’s worth using now in your workflow and if one day it goes away, well, find another tool to suit your needs. Like you, I was an avid Smush.it can until Yahoo took over and killed Stoyan’s original interface. That’s why punypng was created, to replace that need in my workflow and go beyond what Smush.it was and I’m sure if some tragic would happen to punypng then I’m sure someone else will pick up the mantle.
As for your issues about punypng and other tools stripping out the bKGD chunk for IE6 compatibility, wouldn’t it better to use a JS PNG fix/hack to get your PNG to show in their full glory rather than worry about graceful degradations? Also, perhaps I misinterpret your comment, but from what I understand, web-friendly images should have no color information (ICC profile) embedded… which is why even something like Photoshop Save for Web strips out ICC information from all its images.
“As for your issues about punypng and other tools stripping out the bKGD chunk for IE6 compatibility, wouldn’t it better to use a JS PNG fix/hack to get your PNG to show in their full glory rather than worry about graceful degradations?”
Sometimes, yes. But JS PNG fixes are just scripts manipulating the DOM and using the DirectX AlphaImageLoader filter (that you can use with the filter or -ms-filter property in CSS). And that filter is real nasty. It has a handful of hard to manage and sometimes impredictable side effects. After using it for many projects, both manually and through JS scripts that automate the process, i know hold it a mistake to use it at all: too much trouble, really. Plus it has some performance issues.
There is one JS script that loads PNG images through VML that seems to have less limits and side effects. I have not used it in production yet.
But the point is: the bKGD chunk is not added automatically by image editors. If it’s present, it’s because someone choose to include it for a reason. So there is no reason to strip it.
Now, about the other kinds of color information chunks: i’m not sure what every editor out there does. I encounter PNG files with iCCP, sRGB or gAMA chunks from time to time (though not very often), and it’s nice to have a decent tool to remove them for a bunch of files. For me, making sure these chunks are not there (while the occasional bKGD chunk is kept) is part of readying images for production, along with filesize optimization.
@Florent… lemme look into preserving the bKGD chunk. I’ll let you know