With the advent of some very clean hacks to make PNGs work in IE I've found myself working them into my designs more. Using them has allowed me to achieve some effects that were next to impossible with JPEGs and GIFs. The biggest hurdle in using PNGs is their file size. The export tools in Photoshop tie your hands behind your back, not allowing you to tweak anything that may lead to a more compact file. Until Photoshop adds some functionality I think I may have a handy solution.
To understand the solution we need to understand the composition of a PNG. The most popular use case for PNG is it's levels of transparency (or alpha channel), 256 to be exact. Along with this it has a 24bit color palate. In photoshop there are two settings in Save for Web, 8bit PNG and 24bit PNG. The 24bit is most desirable because it enables the alpha channel. The PNG format has many many other features but I'm only going to focus on these few to move this post along.
So we can deduce from the above that we have an image with two qualities, 24bit color and 256 alpha channel. Both are being compressed somewhat independently. The only problem is, Photoshop doesn't let us change the compression on the 24bit part or on the alpha channel part. If we focus on compressing the 24bit part we can potentially shave off a lot of the fat.
For this example I'm going to use a box that has a lot of texture and a drop shadow. To compress the inside part that doesn't have a drop shadow I'm simply going to select it, copy it, create a new document and paste it in. Then I'm going to use Save for Web to export it as a JPEG and use the photoshop compression tools to make it an acceptable file size. Then I'm going to open my compressed JPEG that I just saved and copy it into my original document. After lining things up with the compressed JPEG on top I'm now ready to Save for Web and use the PNG 24bit compression. The results are pretty dramatic. What normally would be a 68k image is now a 48k. In some cases I've cut files size in half!
I'd love to hear other techniques.
Comments
Scott
Use Fireworks. Just for fun, I tried to recreate your image in Fireworks to see how much smaller the file size would be. Exporting it as an 8bit PNG with 256 colors and alpha transparency, the file size was 9.56kb. At 24bit, it was 26.31kb, and at 32bit, 28.49kb.
I've always used and preferred Fireworks over Photoshop for exporting images for the web and your post is a good reason why.
And if you want to see an apples-to-apples comparison, feel free to email your image and I'll export it with Fireworks.
Nathan Borror http://www.playgroundblues.com
@Scott - wow that's a big difference. It's a little dissapointing that that functionality is lacking in Photoshop. I'll check it out.
Nathan Borror http://www.playgroundblues.com
@Scott - After further review it looks like Fireworks is not much different than Photoshop. It's PNG 24bit compression algorithm compressed the original box down to 52 kb where Photoshop compressed down to 68 kb. Neither Fireworks nor Photoshop allow you to tweak the compression levels which would allow us to further compress PNGs without having to separate the non-transparent area, compresses as JPEG, reattach and save. The above example is still the best method I've found for doing so.
Jeff Croft http://jeffcroft.com/
Wow, cool trick, and one I definitely would have never thought of. Nice!
Scott
Out of curiosity, did you try exporting as 8bit with alpha transparency?
Scott
@Nathan, I'd also be interested to see if you can create the same image within Fireworks and then export it to see if the size difference is greater.
Nathan Borror http://www.playgroundblues.com
@Scott - Yes, actually 8 bit PNGs do not support the full 256 opacity range of the alpha transparency that you get in the 24 bit and 32 bit versions. You could essentially equate 8 bit PNGs to GIFs.
I actually took the source from Photoshop and put it into Fireworks so there was no loss of color information.
Taichi-Schule Leipzig http://taichi-in-leipzig.de
You need to understand how PNG works, read this: http://en.wikipedia.org/wiki/Png#Comparison_with_JPEG
PNG is lossless, and thus really bad for photographic data. Try to achieve large areas of the same color, those are effectively compressable (this is major). I guess Gauss-filtering of the area you cut might help. After reducing the actual data to compress you can throw away all overhead data like exif headers, too much a bit depth etc, see here (this is minor): http://en.wikipedia.org/wiki/PNG#File_size_and_optimizati...
What you did is most probably just adding monochromic areas of jpg artefacts (this is: errors), or more likely just dumping information out of the pic (as Gauss filtering does). Try to use non-photographic data if you want transparancy ;-)
Nathan Borror http://www.playgroundblues.com
@Taichi-Schule - Your right, PNG isn't as best suited for photographic content like JPEG. Only problem is JPEG isn't suited at all for alpha transparencies and when you need the transparency there's no other alternative.
John Lascurettes http://emological.com
Actually, PNG-8 DOES support alpha transparency. I only found this out this week myself. But it's huge news to me and it degrades gracefully in IE6 all the way back to IE4. Amazing!
http://www.sitepoint.com/newsletter/viewissue.php?id=5&am...
John Lascurettes http://emological.com
PS: You can't tweak the optimization of a PNG-32 because, as someone else pointed out, it is a lossless algorithm. The difference you see between PS and Fireworks is probably because PS tends to insert metadata (like ICS profile) into the PNG automatically (CS3 finally got rid of that annoying behavior).
Nathan Borror http://www.playgroundblues.com
@John - You're right, it is lossless which is one of the huge benefits of PNG, however, you can control the amount of "color information" by doing the above method. This decreases the size of the PNG and better suits it for the Web. It's a shame this type of functionality is lacking in Adobe's Save for Web feature.
That Sitepoint article is very interesting indeed!
Jacob Kaplan-Moss http://jacobian.org/
pngcrush (http://pmt.sourceforge.net/pngcrush/) is the automatic way of doing this; I've had pretty good luck with it in the past.
Nathan Borror http://www.playgroundblues.com
@Jacob - I saw that yesterday during my research. Wish it was a Photoshop plugin :)
Baxter http://thebitterpill.com
Nathan, you're a genius. There's been way too many times I've used PNG for an image - even a limited-color image - and wondered why the hell my filesize was so big. It seems drop shadows add bloat in PNG real fast.
Anyway, thanks for the tip!
David http://drace.net
There are quite a few useful PNG utilities out there that can help you optimize your PNGs for web use. Some of them are listed in the PNG Wikipedia entry: http://en.wikipedia.org/wiki/Portable_Network_Graphics. Lots of other great information there, too. PNG uses ZLIB/GZLIB compression, which is lossless, but you CAN actually vary the compression strength, with a computational tradeoff (i.e., it takes longer to compress/decompress.) The other way to reduce the file size is to remove unnecessary "chunks". Most of the PNG utilities seem to use a combination of these two tactics to reduce file size.
Out of curiosity, what's your favorite hack for making 24-bit PNGs work in IE <=6?
Chad Curtiss
"some very clean hacks to make PNGs work in IE " Where can I find an example?
Nathan Borror http://www.playgroundblues.com
@David and @Chad - This is the best compendium I've found on PNG hacks for IE: http://www.alistapart.com/stories/pngopacity/
My favorite is the AlphaImageLoader technique. Seems to be the simplest.
David http://drace.net
Have you looked at pngpong? http://blog.psyrendust.com/pngpong/ It uses Flash instead of AlphaImageLoader. It even supports rollovers.
MRaithel http://www.raitheoshow.com
PNG support added in IE 7 is nice and Firefox has been png friendly for a while.
If you are looking for a good palette manipulation tool you should use Debabelizer by Equilibrium. We use it for all of our game development - primarily for manipulating images for the DS. If you really need your images the smallest they can possibly be, then you will want to do all of your palette manipulation outside of Photoshop. Save a 16 color bmp palette then load it into notepad. Notice that Photoshop will leave it as a 16 color + alpha image resulting in 17 palette entries. This will keep the image from being 8 bit, and although you are not using the remaining palette entries you will still see the size. Debabelizer will give you clean palettes.
Palettizing textures for 3D models is also very common now. If you are doing 2D animations for the web out of after effects [kigot @ 2004] you can palettize the export to get the files much smaller.
Sorry for the rant... hope this helps.
Side note - I was not able to post until I added the http:// prefix to my web site in the URL field. But there were no obvious flags that the prefix was causing the error.
Nathan Borror http://www.playgroundblues.com
@Matt - Thats good to know. Didn't even know Debabelizer was still around. Checking it out right now.
Sorry about the comment form error messages. They should be fixed and more informative now :)
MRaithel http://www.raitheoshow.com
DeBab is old as dirt, but still effective for what we do with palettes.
Form is fixed now.
Renato Carvalho http://renatocarvalho.com
Nice tip!
;)
Elliot Jay Stocks http://elliotjaystocks.com
I've been using the filter method for a coupleof years now and I still think it's the best. While I've seen good uses of displaying PNGs via Flash (and pngpong looks interesting - I hadnt seen that), I suspect that method is better suited to displaying inline PNGs (i.e: in place of the
imgtag) as opposed to displaying them as background images declared in CSS.giz404 http://giz404.freecontrib.org/
If you are working on windows, there is a small utility called PngOptimizer http://psydk.org/PngOptimizer.php which compresses the image much better than Photoshop or Fireworks or whatever.