Filed under: Productivity, Freeware
PNGCrusher: Make Your Web Graphics Smaller
I love it when I find a little freeware application that makes my life easier. Anyone who works with graphics on the web is likely working with PNG files, like a GIF file (without the silly Compuserve patent nonsense) with good compression (like JPG). Aaron Madon-Kay has created a simple That's all just way of saying this: PNGCrusher will provide significant compression your PNG files and can save you a lot of bandwidth (and therefore, money). I've been using the PNG format more and more (abandoning GIF and JPG) for my web work. This software gives me another great reason to use only PNG.
The graphic used for this post was 80K when saved from Photoshop but 12K after being processed by PNGCrusher. There is very little human-eye detectable difference between the two. Color me impressed.
![TUAW [Cafepress]](http://www.blogsmithmedia.com/www.tuaw.com/media/tuaw-cafepress-promo.png)
Reader Comments (Page 1 of 1)
brian said 7:19PM on 11-22-2005
Always use Photoshop's "Save for web" feature when making GIFs, JPEGs, and PNGs. If you choose one of those formats from the regular "Save as" menu, Photoshop will include a preview image and a bunch of other junk that will pork up the file. "Save for web" strips out everything that's not needed.
I copied the mystery gift box graphic, pasted into Photoshop, and saving with "Save as" made it 82k. "Save for web" made it 12k.
Reply
Splashman said 8:42PM on 11-22-2005
Here are some more results on that graphic using Photoshop's Save For Web feature (Cmd-Opt-Shift-S):
JPG (quality 100, which is essentially perfect): 9.3k
JPG (quality 60, which looks very good): 3.7k
GIF (8-bit adaptive dithered, which looks very good): 8.9k
PNG (8-bit, about as good as the GIF): 7.2k
PNG (24-bit): 12.98k
Brian, tell me again why PNG is the best format in this case? And why I should be using something besides Photoshop?
Yes, I know there are cases when PNG works well, but geez, maybe you could give an example that actually supports the point of your post? Any halfway-knowledgeable web graphics guy would look at that graphic and tell you JPG will give you the smallest file. Any graphic that has gradients, smooth shading and soft shadows is generally a poor candidate for GIF or PNG.
Reply
John Hopper said 9:02PM on 11-22-2005
If you just use "Save as..." and don't have the right preferences, Photoshop will embed a preview images and other info, that's what takes up the extra space. "Save for web" strips all that stuff out. I'd like to use PNGs with transparency more but IE doesn't support it natively...
Reply
Eric J said 9:09PM on 11-22-2005
I ran the same test as Bryan with my own file.
Photoshop Save As: 170k
Photoshop Save For Web: 60k
PNGCrusher: 70k
Reply
Damien Barrett said 9:12PM on 11-22-2005
What about someone who does not have Photoshop? Is GraphicConverter as good at making small-sized PNG files?
Also, with Tiger the default screenshot format is PNG, right? Couldn't a person who does not have any graphic software could use a combination of Preview and PNGCrusher to resize their PNG files.
Reply
Martin said 9:32PM on 11-22-2005
I also love the PNG alpha channel support. Of cause, it needs a Javascript hack to work in Internet Explorer...
Comment #4 looks kind of bogus to me. Photoshop saves the PNG 10k smaller than the OptiPNG optimizer? Care to provide a URL to the image you used?
"There is very little human-eye detectable difference between the two."
Now this is something that makes you go "WHAT"? PNG is a lossless format. OptiPNG makes only lossless optimizations. So there should not be ANY differences between the two images, pixelwise.
Reply
Steve Cotterill said 9:37PM on 11-22-2005
I noticed that PS was doing a crappy job of saving PNGs a few months back while working on a Dashboard widget. I found that opening the PNGs in Preview and re-exporting them significantly dropped the file sizes. I have not noticed any artifacts from doing this. I think Preview (PDFKit?) has a mighty decent compressor already there for Mac users.
Reply
Splashman said 10:00PM on 11-22-2005
Martin, just an FYI: PNG-24 is lossless, but PNG-8 is essentially an improved GIF -- it has the same user-selectable options for bit-depth and palette reduction as GIF.
Your point about Brian's "detectable" comment is absolutely correct, of course, but I wanted to point out that saying "PNG is a lossless format" is not quite right. I'm wondering if Eric J was inadvertently using PNG-8; if so, that could explain the puzzling file-size difference.
Reply
Mischa McLachlan said 3:10AM on 11-23-2005
This application i hate to say it is pretty silly, if you work in web development, or if you even build any sort of webpage, i'm guessing you'll have access to a graphic editor, Photoshop, or the gimp, or one of the many other cheap/free ones. being able to select compression levels of any format is very standard in these applications, and as such i don't understand the need for this.
Also, PNG24's 8bit alpha channel will not work in MSIE, even after applying the pngfix javascript hack, as if the user uses a higher res display (found in some laptops), the alpha 8bit alpha will look terrible.
Reply
Sean Flanagan said 10:53AM on 11-23-2005
Mischa is entirely correct. I always create two classes when using PNG files in CSS. One has the PNG marked !important , and the other has the same image as a JPG without any importance classification. That way, browsers will try to load the PNG first, and if unsuccessful, will load the JPG instead. It's a simple trick that yields results that (almost) everyone can be happy with. And IE users will look at the same site in other browsers and say, "Hey this looks much better in this other browser that isn't IE, I should switch and make every standards-based web developer's life much easier!"
Reply
Curtis Townson said 11:04AM on 11-23-2005
I've been trying to use PNG files for a while until I found that the colours were being shifted. For example, I created a blank html file with a place in the middle for my image. I used the same hex value for my html file as I did for my background colour in photoshop. I then saved the 100x100 image as a PNG and then saved another time as a GIF. When I pulled the png into the html file, the colour of the PNG didn't match the colour of my html's background but the GIF image did, even though they were created with the same hex value.
Reply
Aaron Madlon-Kay said 12:42PM on 11-29-2005
Hello. I'm the author of PNGCrusher. First of all, just a small correction: The app is not AppleScript, it's a bash script wrapped with Platypus.
And for all those people saying it's useless: Not everyone has Photoshop, and I can say from personal experience that The Gimp, even with highest compression settings, doesn't produce optimal output. I can typically save at least a few KB by running Gimp's output through OptiPNG. I don't know about Photoshop since I don't have it.
Reply
Aaron Madlon-Kay said 12:54PM on 11-29-2005
Rereading some of the comments here, I just wanted to add the following: Yes, many programs allow the user to set compression levels on PNGs. The problem is that there often exists a way to improve the compression beyond whatever quick first-pass attempt these apps make. Of course this will usually only save a few percent of the file size, but for certain uses (such as bandwidth-intensive applications, like web design) it can be worth your time to pursue such savings.
Again, I can't speak to Photoshop's compression, but output from Preview.app and The Gimp are most certainly NOT optimized, and frankly I'd be surprised if Photoshop's is either. If you'd like to make sure, run a file through PNGCrusher while Console.app is open, and you can see OptiPNG's output.
A note to the original blogger (Damien): Your test case was not typical. In general you will only reduce file sizes by about 10%; clearly in your case there was a large resource fork that was removed in the process of optimizing.
Reply