molly.com
Tuesday 20 November 2007
Your Best Practices for Creating Great PNGs
I’ve been futzing with PNGs for years and still find myself thinking there has to be some better way to get the best compression and still retain the quality of the image. I notice that while I can create great PNGs in a variety of software such as Photoshop and Fireworks, I still can only manage to get acceptable results, I’ve seen others do a lot better.
So, I’m askin’ for your wisdom regarding best practices for creating great PNGs, especially now with alpha transparency support in IE7. What are your tools? Processes? Any special techniques you care to share?
Filed under: standards, software, web design and development, creativity, ie7, molly asks you
Posted by: Molly | 12:24 pm |
November 20th, 2007 at 12:40 pm
Have you tried using PNGCrush?
November 20th, 2007 at 12:43 pm
Actually, you’ll probably want the more user friendly PNGCrusher.
November 20th, 2007 at 2:04 pm
Have used PNG formats exclusively for years, primarily PNG-8 .. PNG-24 only when quality is extremely critical.
ImageReady within Photoshop. Be cognizant of dither. For alpha transparency trick with Fireworks … check this post:
http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
Fireworks is an excellent vector/raster hybrid for creating layout images/backgrounds, slicing them and exporting them in PNG format.
November 20th, 2007 at 2:09 pm
Just because you have 24 bit colour depth doesn’t mean you have to use it. The less colours, the smaller file size, similar to GIFs and 8 bit PNGs.
If I just need alpha transparency, I export an 8 bit PNG with alpha from Fireworks (which isn’t compatible with IE’s alpha filter, although is supported by IE7), open it up in Fireworks again and export it as a 32 bit PNG. There’s only a small size overhead for the change in file format.
In theory, for photographic images, dropping the colour depth down to 16 bit (for example) before exporting should save some space. If anyone knowns how to do this in Photoshop or Fireworks without a third party plugin, I’d love to know!
For stripping out the gamma data and for final compression check out PNGCrush (as mentioned) and TweakPNG.
November 20th, 2007 at 2:16 pm
I use Fireworks and create the image against a transparent background.
November 20th, 2007 at 3:19 pm
Don’t use png for photos. Use jpeg. PNG replaces gif, not jpeg. jpeg does a better job with photos than png does.
November 20th, 2007 at 4:26 pm
Sorry, Rob, but I take exception.
PNG - 8 bit will render deep color photography as well as JPG (JPEG 2000 not included) in both depth of color and smooth continuous tones for use within Web applications. When the pseudo Internet speed utilities are used, which will further compress any optimized JPG thus causing quality degradation, PNG is the practical choice.
November 20th, 2007 at 4:36 pm
Here is some info about better ways of PNG compression:
http://translate.google.com/translate?u=http%3A%2F%2Fwww.artlebedev.ru%2Ftools%2Ftechnogrette%2Fetc%2Fpng-1%2F&langpair=ru%7Cen&hl=en&ie=UTF-8
Original is in Russian.
November 20th, 2007 at 10:20 pm
“The GIMP” is pretty good for web related image creation and manipulation. I’m sure I don’t need to mention why open-source software is a Good Thing.
For formats supporting colour-indexing, like PNG (and GIF), the default option used by The GIMP is to generate an optimal palette from the actual colours used in the image, which allows you to retain exact colours, while reducing your colour palette, thus reducing file-size.
GIMP lets you choose exactly what data is saved in your PNG files.
“OptiPNG” is another good PNG compactor which doesn’t compromise quality while still reducing file-size.
November 20th, 2007 at 10:28 pm
In this very moment I’m working on PNG’s whit alpha transparency.
I need to optimize em to the last bit, so the process is a little long. But the final quality is excellent.
1) Create the image in photoshop and save it as PNG24 with transparency
2) Reduce the colors to 256 whith pngquant Front End (http://jedisthlm.com/index.php?p=29)
The color reduction of pngquant y WAY better than photoshop one, pngquant gets much better transitions.
since IE
November 20th, 2007 at 10:31 pm
Mi comment got truncated…
Ok I’ll be concise.
3) convert to 24 bits whit Gimp
4) optimize with pngcrush.exe -brute -reduce
Some result at http://maquillajetiti.com.ar/productos.php?cat=18
cheers,
Ariel
November 21st, 2007 at 1:06 am
On windows, PNG Optimizer does a great job. http://psydk.org/PngOptimizer.php
November 21st, 2007 at 2:51 am
Another windows option is PNGGauntlet:
http://brh.numbera.com/software/pnggauntlet/
November 21st, 2007 at 3:10 am
Here’s another vote for PNG Gauntlet. It’s worth running all PNGs through it, especially those make with applications that don’t let you ommit gamma data, such as Photoshop.
I have to disagree with jetboy that 8bit PNGs are smaller than 24bit ones. It’s quite common to have a 1px high / wide image which, when tiled, creates a gradient. In this case, the space used up creating the colour table is greater than specifying the colour in full, so the 24bit PNG is smaller.
Jake.
November 21st, 2007 at 10:18 am
I use OptiPng. It allows for the highest possible compression using the standard compression libraries and it does automatic lossless color depth reduction if possible.
November 21st, 2007 at 12:26 pm
Thanks for all of the various PNG compression/optimization utilities that have been referenced.
Having tried a few of them, I am only seeing, on average, a 4% reduction in file size of PNGs that have been optimized within Photoshop CS3 (ImageReady or whatever Adobe is calling it these days).
November 21st, 2007 at 1:36 pm
I’ve found SuperPNG plugin for Photoshop does a decent job of gamma correction when using PNGs.
Using ImageReady “save for web” feature in Photoshop has NOT yeilded good results for me in the past, and I would not recommend it.
Some of the other tools are good, but I don’t like having to take the extra step, if I’ve created the graphic in PS and I’m saving it from PS, I want it to save properly with correct gamma correction and compression.
November 21st, 2007 at 4:51 pm
Jeff L–
I am very much interested in learning what specific issues that you experience with producing PNG compressed files using the “Save for Web and Mobile Devices” function within Photoshop CS3. Is it with final compression size, image clarity, color depth, continuous tones, alpha channel, etc? And with what types of images? Thanks.
And thanks for the SuperPNG plugin. That looks like it may resolve issues I have had when needing to add a MarcSpider digital watermark to optimized PNGs and then save them with optimization without degrading the embedded digital watermark.
November 22nd, 2007 at 9:18 am
I use Photoshop, “save for web” and then run the images through GammaSlamma:
http://www.shealanforshaw.com/introducing-gammaslamma-10-for-osx/
which is an easy to use ported version of PNGCRUSH for OS X.
November 24th, 2007 at 6:31 am
For formats supporting colour-indexing, like PNG (and GIF), the default option used by The GIMP is to generate an optimal palette from the actual colours used in the image, which allows you to retain exact colours, while reducing your colour palette, thus reducing file-size.
November 25th, 2007 at 4:46 am
I use Fireworks and create the image against a transparent background.
November 26th, 2007 at 11:35 am
thacker,
Can’t really answer your question as I’ve got PS6 at home and PS7 at work.
Not everyone gets the fancy new versions to play with right away…
However, the biggest issue with these versions that I’ve run into is the gamma correction - meaning colors come out differently depending which browser you use to view them.
Here’s an article I’ve had bookmarked for a while about the issue:
http://hsivonen.iki.fi/png-gamma/
November 26th, 2007 at 3:09 pm
Jeff L–
Thank you very much.
I have run into the same gamma issues with prior versions of Photoshop. For Web production, I assign the Adobe RGB color profile, initially, to any image. From there, I do whatever corrections or adjustments that may be necessary.
One issue that was prevalent in older versions was that assigned hex color values were not consistent with other formats or even with PNGs created with other applications, e.g. Fireworks.
A simple fix that I have used and just pulled [I can’t recall the original source] from http://www.polarbearlamps.net/2007/04/png_color_mismatch_on_the_web.html
required modification to the meta data within the PNG image after is has been optimized.
The solution/fix as quoted from Polar Bear Lamps:
I have no direct knowledge whether or not this color shift issue is still a problem with PNGs created within Photoshop CS3.
November 26th, 2007 at 10:02 pm
wow, ask a question – get an answer…. many answers!
November 28th, 2007 at 7:48 am
[…] Your Best Practices for Creating Great PNGs […]
November 28th, 2007 at 9:35 am
Some links for light reading - November 28th, 2007
Fieldsets, Legends and Screen Readers
November 28th, 2007 at 1:01 pm
This is a really old post on my blog, but it explains the beauty of re-optimizing PNGs to reduce file size while retaining a lossless quality. http://green-beast.com/blog/?p=32
In a nutshell the article advises exporting the PNG, then opening the flattened PNG you exported and exporting it again. It’s a double optimization that has a significant impact to file size reduction while keeping the image quality high.
November 29th, 2007 at 3:13 am
The more I develop websites, the more I have been concerning myself with image optimization. Put it this way, I used to crank up my image export compression setting to 100% in all cases.
November 29th, 2007 at 5:41 am
Thanks to this article, I played a bit around and found a working solution for linux for at least 3/4 of all cases:
1. use any app you like (eg. Krita, PS + Wine, Gimp) to create your image and save it as PNG image
2. Note: if you’re simply doing some cropping or resize job, give gThumb a try - if the original image is in 8 bit, it sticks to that color depth, whilest Krita + Co. tend to set it up to 24 or 32 bit.
3. use convert to reduce the number of colours to an appropiate level (eg. 128 colours ==
-colors 128)4. use optipng (in Ubuntu, just do a
sudo apt-get install optipngto get it) to reduce its size once again - if needed, anyway. Normally ImageMagick does already a proper jobcu, w0lf.
November 29th, 2007 at 11:59 am
Great article. I have been trying to find stuff on PNGs. Thanks.
November 29th, 2007 at 12:35 pm
thacker,
thanks for the info. sounds a bit of a pain in the ass.
I’ll stick to the plugin for now, but would be interested to know if newer version of PS suffer the same issues.
November 30th, 2007 at 12:00 am
I export PNGs from Fireworks and then use pngOptimizer to reduce their file size.
December 1st, 2007 at 10:24 pm
I use Fireworks to export a PNG24 and then use PngOptimizer to reduce it which works great but, one problem we have come upon is that if you are using IE6 on a Dell laptop running at 120DPI (Dell ship them with that setting) the PNG’s display black artifacts.
It sounds like a very isolated problem but we’ve come across a number of clients that have PCs set-up like this. We have yet to find out why this happens or a real fix for it.
No such problem in IE7 or any other browser.
December 2nd, 2007 at 6:26 am
It’s amazing the nothing, or at least very little, has changed in respect to producing PNG files. What on earth is Adobe waiting for? They make professional image/graphics software. You’d expect that would have fixed this PNG mess by now. I suppose this is what happens when a company effectively becomes a monopoly.
December 7th, 2007 at 9:07 pm
You and your peers breath a far more rarified atmosphere than I can tolerate so I’m reluctant to comment but good data is good data, regardless of its source, right? So, that being said, I’m very fond of Ken Silverman’s Pngout plugin in Irfanview. I’m able to decrease the color depth very nicely and then save with the plugin (there’s a check box in the options for png images). Transparency is also supported (yet another check box in the options). I sure wish Ken would create a Gimp plugin so I could use Pngout on my Etch machine.
Hey Thacker what sort of remuneration would you require to teach me how to create png images which can rival jpegs for quality versus file size? Can you point me to some examples?
–
(Gratuitous commentary from an aging, well-intentioned, geek-in-training)
December 8th, 2007 at 1:44 am
I am surprised people did not even mention Paint.NET for Windows. It is a hell of a lot better user interface-wise than Gimp.
December 8th, 2007 at 10:34 am
Crowder–
First thing, I am not a designer nor a developer, just a guy trying to learn like everyone else. Second, remuneration? Wouldn’t charge a damn thing, for christ sakes .. but thanks for asking.
Every image, except for possibly two small gifs, on that Boinkin Chipmunks site is PNG-8. If you feel those images are the type of quality that you try to achieve, let me know along with what questions that you have. I will create whatever content pages are necessary to answer your questions and anyone else’s … via slide show, HTML and/or PDF — and Photoshop actions, if warranted. You may e-Mail me from the address listed on the Web site or post here.
December 10th, 2007 at 11:12 am
The GIMP is a very well tool to create PNG’s.
I use it every time and get a good results.
December 14th, 2007 at 1:15 pm
we gorilas in black tees
December 20th, 2007 at 9:59 am
I use Fireworks religiously. It’s perfect for creating PNGs. The bulk import/export functionality is especially nice when you have a lot PNG images to create all at once. Photoshop is nice too, but Fireworks is much easier to use.
January 9th, 2008 at 6:56 am
A tribute to Ken Silverman: Pngout is the best tool to optimize pngs.
Dos version is free, and the PngoutWin interface by Ardfry is really great. Batch compression, fine tuning of chunks…and best compression among optimizers. Check http://www.ardfry.com/pngoutwin/image_compression.htm for a test against Google logo.
January 11th, 2008 at 11:33 pm
I use it every time and get a good results.
Great Info.
January 20th, 2008 at 9:42 pm
thanks
January 22nd, 2008 at 5:57 am
Great post and great Info. Thanks Molly.
January 23rd, 2008 at 3:03 pm
thank
January 23rd, 2008 at 3:03 pm
like molly thanks
January 23rd, 2008 at 3:04 pm
very good
January 29th, 2008 at 6:59 am
hey!
January 29th, 2008 at 7:02 am
call me!
January 30th, 2008 at 10:48 am
specially now with alpha transparency support in IE7.O’RLY? have you tried to set the opacity of a PNG32 to something else than 0 or 1 in IE7 recently ? Saying that IE7 supports PNG alpha transparency seems a little premature to me.
Anyway. Like many others, I’m using PhotoShop [+ PNGCrush]
February 21st, 2008 at 3:51 pm
thanx
February 21st, 2008 at 3:52 pm
thanx
February 21st, 2008 at 3:53 pm
thanxx
February 25th, 2008 at 3:51 am
nice log..
March 30th, 2008 at 11:09 pm
thanks
April 14th, 2008 at 2:58 pm
Good stuff. Thanks and greetings!
May 1st, 2008 at 11:35 am
[…] http://www.molly.com/2007/11/20/your-best-practices-for-creating-great-pngs/ […]
May 30th, 2008 at 5:28 am
Thanks Good Job
June 20th, 2008 at 5:27 am
Thanks for helpfull information.
July 18th, 2008 at 5:40 am
http://www.orgcu.net
July 18th, 2008 at 5:43 am
http://www.orgcu.net/
July 18th, 2008 at 6:51 am
thanks for all
July 18th, 2008 at 6:51 am
thaks so much
July 18th, 2008 at 7:42 am
[…] pr6 pr5 pr4 dizinler merhaba buyrun arkadaslar QuarkRuby: Ruby on Rails Security Guide pr5 molly.com Your Best Practices for Creating Great PNGs pr6 Friends for Sale Architecture - A 300 Million Page View/Month Facebook RoR App | High Scalability pr6 http://www.email-standards.org/blog/…ahoo-responds/ pr6 On Staying Creative | Graphic Define Magazine pr4 "Mike Tyson’s Brunch Out!!" - The Meth Minute 39 | The Meth Minute 39 pr4 Open Web Awards - Vote for Your Favorite Start Page pr6 Free Debates: A campaign to get FOX to do the right thing (Lessig Blog) pr5 Simkl and IM History: Two services that spy on your IM conversations (for you) | Webware : Cool Web apps for everyone - CNET pr5 Best Served Cold: Your thoughts on unit testing pr5 +rep isterım […]
July 18th, 2008 at 7:43 am
Thank you wery much
July 18th, 2008 at 7:44 am
:):) thank you friends beatifull open the box
July 19th, 2008 at 12:14 am
Thanks