TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Smaller PNGs

April 15, 2010

Last week I put together an animated infographic that required some flexibility. Alpha transparency was essential, but the number of images I needed to pull it off meant that my typical way of creating PNGs wasn’t going to work.

Let’s be honest; Photoshop is absolutely terrible at saving transparent PNGs for web use. Your choices are between an 8-bit with 1-bit transparency (better than a GIF in terms of file size, but no better in terms of transparency options) or a huge 32-bit PNG with alpha transparency. There’s no middle ground. You can run the resulting files through various PNG reduction utilities (PNGOUT, Pngcrush, or my personal favourite PngThing) but when the savings are a few hundred bytes off an 80KB file, the returns are slim.

I’m not in the practice of using Fireworks, so those of you who do can start gloating now. But as I thought about the problem a bit, I remembered that Fireworks has a few more options. Specifically, I remembered that you can save out 8-bit PNGs with alpha transparency, which seemed like the right mix.

And the resulting lower byte counts were respectable: 95KB › 11.7KB. 28KB › 4.6KB. 38KB › 8.9KB. 36KB › 7.1KB. 45KB › 7.3KB. 28KB › 4.7KB. etc.

When I casually mentioned the smaller files I was able to produce on Twitter I was a little surprised by the response. Seems that a lot of people don’t know about this, so a quick write-up feels like it’s in order. Here’s my process.

1. Save out a full 32bit PNG from Photoshop

Any file format with transparency will do really. You could probably even just open the PSD. But I start here.

2. Load it into Fireworks.

3. In the Optimize palette, adjust the settings to PNG 8.

You’ll probably want to go further and find a colour level less than 256 that works with your image for more savings, but this is the starting point anyway.

screenshot of Fireforks Optimization panel

Figure: an image open in Fireworks with the Optimize panel shown, adjusted to PNG 8, 32 colours, with Alpha Transparency selected.

4.Export.

File > Export, then pick a spot for your smaller file.

And that’s basically it. Clearly this only works for images that would normally do well with lower colour levels, you won’t be using this for photographic elements any time soon. But for those that work, you can throw the result through one of the previously-mentioned optimization tools to shave off a few more bytes too.


1
Sean Curtis says:
April 18, 20h

PNG8 with alpha transparency also has the added benefit of degrading nicely in IE6 for those that need to support it. Sitepoint have a nice article on it http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

Personally I love Fireworks - I’ve been checking out Acorn and Pixelmator but unfortunately neither have the right combination of vector tools + png export options.

April 18, 23h

I was just using this workaround a few days ago and thought it would make for an informative blog post. However, I don’t have a blog so I’m glad someone shared my thought.

You may want to update your FW screenshot to show “alpha transparency” selected instead of “no transparency.” I can already imagine people simply copying your settings.

April 19, 00h

pngquant is an alternative for those who doesn’t have Fireworks - it’s a command line utility that easily converts PNG32 to PNG8. I’ve been using it quite much in my latest projects and it works great.

http://pornel.net/pngquant

4
Stephan Schubert says:
April 19, 01h

I didn’t know Fireworks could do that; you won’t get that using Photoshop’s “Save for Web & Devices”. The issue with IE6 and PNG24/32 can be solved using vendor-specific CSS. Just google it.

April 19, 01h

Nice tip for getting smaller PNG’s-Images and probably the only reason for me to use fireworks.

April 19, 01h

Posts like this always make me wonder why JPEG-2000 is so marginal a format. JPEG-2000 also offers alpha transparency with fantastic compression ratios. The algorithms for compression are pretty damn good too - even with compression set to maximum, you’d be hard pressed to spot any visible difference with the source image.

If only it were more widely used. Incidentally, Safari knows how to handle JPEG-2000 out of the box. Firefox doesn’t (on OS X at least).

As a proof, I’ve just used Preview.app to save an 880KB 24-bit-with-alpha PNG out as a JPEG-2000 image, full alpha, maximum compression - file size down to 90KB. Awesome.

Tom says:
April 19, 02h

Fireworks is great for that, but did you find that it optimised too much?

By that, I mean when I try to use Fw, it reduces the colours too much when using png-8 with alpha. As an example I was trying to save a simple icon with alpha transparency, but it wouldn’t allow anymore than 44 colours out of a total 256 for some reason.

No matter what setting I went for it didn’t want to budge! So basically I’m asking if that happened for you?

(I’ve noticed it on Fw CS3 Win, and Fw CS4 Mac)

8
giuliano says:
April 19, 06h

Ever tried www.smushit.com ? I know it’s based on some the utilities you mention in the post but the savings i get from it, more often than not, are not in the order of the few hundred bytes.

Good trick anyway, i stopped from using fireworks in the last years but this will turn useful in the future.

April 19, 07h

@Sean Curtis: You’re right about IE6 supporting PNG8, although you only get the opaque parts - the transparent parts just disappear leaving a raggedy edge.

@Tom: I had the same problem with subtle gradients - setting dithering to a high value can help. I suspect it’s to do with reduced colour resolution in PNG8 mode.

I used PNG8 in these JavaScript demos to save space:

http://www.professorcloud.com

The image files were getting too big. The Earth graphic was especially huge as a PNG32. About 3 times smaller as a PNG8!

Dave S. says:
April 19, 08h

@Cavan Riley – updated the image, good catch.

@Jonathan Hollin – I think you answered your own question. Formats not supported by all browsers are fairly useless on the web.

@Tom – I haven’t personally come across that one yet, but others on Twitter mentioned a problem with Adaptive colour that sounds like what you’re describing. So you’re probably not crazy, it probably is a real issue that I’ll stumble across sooner or later.

April 19, 11h

Hi Dave,

We (Yahoo!) provide a tool called SmushIt. It’s part of the YSlow suite and provides lossless shrinking of image files (GIF and PNG). It uses a whole bunch of opensource tools internally and finds you the best possible savings.

@jontathan Hollin - JPEG2000 is a patented file format, so it’s unlikely to get into firefox and opensource webkit versions. IE doesn’t support JPEG2000, but supports JPEG-XR (http://www.phpied.com/ie9-and-jpeg-xr-first-impressions/) which offers better compression.

12
Adam says:
April 19, 13h

PngThing is worth having just for the icon.

April 19, 19h

This has always bothered me about photoshop… I don’t have fireworks so I needed to find another quick way to get alpha-transparent PNG8’s:

ImageAlpha is an excellent GUI which will convert your alpha PNG24’s into alpha PNG8’s. Get is here: http://pornel.net/imagealpha

Another good PNG compression GUI (by the same guy): http://imageoptim.pornel.net/

14
Alex says:
April 20, 06h

This is the reason I keep an old version of Fireworks on my Mac and I don’t know why Adobe don’t have this feature in PhotoShop?

ImageOptim is another good ‘crushing’ app.

http://imageoptim.pornel.net/

Steven says:
April 20, 08h

Great tip. I have to admit that I haven’t even opened Fireworks since I purchased CS4. I think it would be great if Adobe would finally just migrate the useful features of Fireworks into Photoshop.

Tones says:
April 20, 08h

The tip in this post is really great. I normally use Photoshop to make my images on my website smaller (save for web…)
I always use png 32 bit, but after compression the file size remains too large.
Now I’ve tried PngThing and the size of my images are much smaller and the quality is the same.

You really helped me. Thanks

Chris says:
April 20, 10h

@Steven Woooooaaaaaah slow down there boy! Why not just give fireworks custom brushes, then we can just ditch Photoshop instead? Fireworks is just the best for Web GUI, PS doesn’t come close! With PS effects import, better vector support and a more intuitive interface, Fireworks is mega underrated…

Dave S. says:
April 20, 10h

@Chris - let’s not do this, okay? Some people prefer Photoshop. Some people prefer Fireworks. The End.

Billee D. says:
April 20, 12h

Thanks for the article, Dave. I’ve been using Fireworks (FW) since the beginning—Macromedia-era some time around 1998–1999—for this very same reason. I do most of the detailed, artistic stuff in Photoshop (PS) and then I would either import a flat PNG (pre-Adobe) or the source PSD (CS+) intro Fireworks for slicing. The compression differences between FW and PS were pretty amazing back then and they still are today.

Nothing beats PS for great compositing and clean type, but Fireworks has great compression algorithms. I also prefer the pixel-precise level of control you get with slices, guides and vector shapes. FW also has pages now which are a really big help for large, multi-page comps or mockups. For me it’s not a PS vs. FW issue; I simply use what works best for the task.

Thanks again and I hope you find other ways to integrate FW into your workflow. :)

April 21, 03h

PHOTOSHOP ONLY SOLUTION
When you finish your image go to:
IMAGE / ADJUSTMENTS / POSTERIZE.
Then select a number between 0-255.

After this, you can save for Web in 32 with alpha channel.
The size of the file will be smaller.

Alex says:
April 21, 09h

Do you know Yahoo Smushit?

I usally did the basic png shrinking with Photoshop and than use Yahoo’s Smushit Tool.

You can upload any image there or link to your site and smushit squeezes your images as much as possible - especially png’s shrink extremly: smushit.com/ysmush.it/

Dave S. says:
April 21, 09h

@Mediopirzel – interesting. That does actually have an impact, I was able to shave off about 25% of a 32-bit PNG’s size. It might prove useful in some situations.

The problem is that it’s still saving out 4 bytes per pixel, whereas an 8-bit PNG only costs 2 bytes (plus compression on both of course). So your file sizes aren’t going to be as small as they could be if you take it the extra step and save out an 8-bit PNG instead.

Still, if all you’ve got is Photoshop, that’s a decent alternative.

dusoft says:
April 22, 08h

Primitive painting program KolourPaint at Linux allows you to save as 24bit PNG with transparency. The sizes are also small compared to those by Photoshop.

24
Dan says:
April 23, 00h

Bit late to this but punypng (http://punypng.com/) does an excellent job of compressing pngs as well as other images.

Tasarim says:
April 24, 06h

Holy crap Dave! If i knew this earlier, i could reduce a lot of my website’s image sizes :/ (Even though it’s never late to start doing it :)
Really great tip. I’ve been using Fireworks for design purposes and have interacted with the “Optimize” panel for so long, i feel ashamed for not knowing this…

April 24, 11h

Another great tip! This one is right up there along with saving for web directly from Illustrator.

27
Andrew says:
April 25, 11h

@Mediopirzel
The adjustment layer is a really great solution here. It’s totally non-destructive so you can always come back later to edit it, but still keep the posterize settings available to tweak.

The last tough part for me is that it doesn’t posterize the alpha layer which adds a lot of weight if you’ve got a big blurry shadow somewhere. The best solution I’ve found for that is to replicate the shadow as a solid color layer with a mask, and then posterize the mask.

It may not be 8-bit, but with all these techniques and PNGcrush I can get some tiny files.

@Dave
I remember reading in your post about designing Bright Creative that you generally favor gifs over pngs. May I ask what changed your mind?

April 25, 16h

I do this on Linux with a command-line tool called pngnq, which I have nicely integrated with my one-step build script (this little Ruby thing I use to minify/optimize CSS and JS and generally “pack things up” for production).

The results with pngnq do look better than the ones achieved with Fireworks, or, for that effect, pngquant.

There’s also the issue issue of dithering and/or banding that such tools introduce and which you failed to mention. I’ve just had to hand revert (through Git) a Masthead image to it’s previous 32-bit state because the dithering screwed the middle of the logo.

Nice and short article though, I’ll point to it when my not cl-happy friends need to do this.

Dave S. says:
April 26, 11h

@Andrew - what changed? The decreasing prevalence of IE6, mainly. Two years ago it was still necessary to jump through hoops to support it, and I never felt the PNG transparency hacks were worth the effort. These days I’m starting to take it for granted that alpha transparency is available mostly everywhere.

@Thiago Cavalcanti - “There’s also the issue issue of dithering and/or banding that such tools introduce and which you failed to mention.”

Sure I did: “Clearly this only works for images that would normally do well with lower colour levels, you won’t be using this for photographic elements any time soon.” I didn’t call out dithering specifically, but anyone familiar with image compression will immediately see that’s what I was getting at.

30
Andrew says:
April 26, 14h

Thanks for your answer, Dave. Our policy is more or less that IE6 users are used to seeing the grey block behind their image. So as long as functionality isn’t harmed we usually try and use them without any sort of png fix.

Also, fantastic timing on this article. With this fireworks trick of just re-saving the image I was able to cut one png (as optimized as I could get it photoshop with posterize and all) down from 60k to 20k. Thanks!

David says:
April 26, 14h

I have recently started doing all my non-graphic development from a linux environment and was happy to find out that gimp 2.6 that installed with ubuntu happily opens my CS4 photoshop files and does a great jog with png transparancies

April 27, 21h

I tried to use Fireworks but in some images failed, mainly those that had shadow.

I saw the comment from Darren Wood and decided to try ImageAlpha, by far much better than the Fireworks, I’m testing and so far only had success!

This is my choice: ImageAlpha http://pornel.net/imagealpha

1. Much faster than Fireworks;
2. Better compressions;
3. Free :D

33
round says:
April 29, 09h

Lot’s of good info, but I’m curious..

Anyone aware of good PC solutions? Many of those mentioned have been mac oriented and that’s just not going to work.

34
Drew says:
May 01, 05h

As David mentioned, Gimp 2.6 does a fine job as well. Actually, for my money I think Gimp has the best overall image-saving capabilities.

Plus it’s much smaller than Fireworks—and free!

May 02, 11h

Here’s another plus for punypng (http://www.gracepointafterfive.com/punypng). It does require uploading your images to their server, but then the uploader allows multiple file uploads, and all in all is pretty handy. Nothing is said to be saved, either. File size reductions of 40% and more are not uncommon (the original file being exported from Photoshop).

May 04, 02h

My favorite tool for such kind of optimization is the great “Irfanview” (http://www.irfanview.com).
Under “Save for web” you will get a lot of options to optimize and reduce the file size.
In a preview you have the full control about the picture quality you will get.
And the best, its free!

Dwayne says:
May 14, 00h

Guess I need to get fireworks. One aside note, On a recent clients redesign project i worked hard to keep it IE6 accessible. Ended up using the alternate IE hacks for each element that might need a gif instead of .png or what not.

Funny though, one of my new clients just had their site redesigned for a pretty decent fee using Joomla as a back end. I looked at it in IE6 and its horrible. It basically breaks, no IE hacks just gray on black where should be transparent. I didnt have the heart to tell them. Also I hear that many new design setups do not support IE6 anymore.

komma5 says:
May 20, 15h

got best results with OptiPNG http://optipng.sourceforge.net/

39
brandon74 says:
May 24, 05h

Hi.
Very useful tips. I have already used them and add to php tutorial http://phpforms.net/tutorial/tutorial.html.

40
Artur Kot says:
May 25, 22h

Hello!

I use http://benhollis.net/software/pnggauntlet/

It works really great. You can achieve even *smaller* file size than using Fireworks.

September 07, 14h

I didn’t know that Fireworks can do that. I would agree with Artur, I used png gauntlet few times to achieve smaller size and it worked fine.