To PNG or not to PNG

Newb Help
6 weeks 5 days ago
not able to run the login system
6 weeks 6 days ago
Help email not working
7 weeks 18 hours ago
PHP Login System with Admin 6 Levels of membership
7 weeks 6 days ago
Email address instead of username?
8 weeks 1 hour ago
SunCoder,You'd have to
8 weeks 4 hours ago
only allow one login at a time
8 weeks 6 hours ago
Dynamic image for login (security)
8 weeks 6 hours ago
PHP5
8 weeks 1 day ago
@ bytesize
8 weeks 1 day ago

LibPNG.org is a good place to go for an intro to PNG. In short, PNG was designed to replace GIF as the standard image format for lossless compression on the internet. It claims better compression than GIF, full alpha transparency, and gamma correction. All common browsers today support PNG, and all except Internet Explorer for Windows claim to support PNG's killer feature -- full Alpha transparency. PNG is royalty free, unlike GIF, and is a recommendation of the W3C.

Given that IE for Windows does support PNG in all other ways other than full alpha transparency, and that GIF and PNG both do binary transparency equally well, isn't it time to switch to PNG in order to take advantage of all PNG's other benefits? I tested out all the various claims of PNGs superiority, with mixed results.

Compression

In the first test, I created three simple graphics -- one with a palate of 64 colours, with two colours, and one with 128 colours -- and compressed them three different ways -- Photoshop GIF, Photoshop PNG, and GIMP PNG. In Photoshop the image is consistently larger as a PNG than as GIF, but the opposite is true of the GIMP. Obviously Photoshop's PNG support is not up to snuff. I had no success with either the Photoshop plug-in, Superpng or the command-line (Windows and Unix) utility Pngcrush but that doesn't mean they won't work for you.

gif, 64 colours: 1,945 byes	png (GIMP), 64 colours: 1,690 bytes	png (Photoshop), 64 colours: 2,237 bytes

gif, 2 colours: 547 bytes	png (GIMP), 2 colours: 483 bytes	png (Photoshop), 2 colours: 915 bytes

gif, 128 colours: 10,029 bytes	png (GIMP), 128 colours: 8,889 bytes	png (Photoshop), 128 colours: 10,430 bytes

LibPNG.org claims "[a realistic]example is the oceanography data at NASA's Ocean ESIP site. Digital maps displaying various physical measurements can be generated dynamically in either GIF or PNG format; the PNG versions are invariably one-fifth the size of the GIFs, thanks to PNG's compression filters.". My results weren't quite as conclusive, but regardless, on a project where bandwidth concerns are paramount you may find it useful to switch to PNG.

Photoshop's poor PNG support is a major problem. The GIMP is an excellent program, and free, but ubiquity of Photoshop, and the GIMP's unintuitive interface and lack of native ports in operating systems other than Linux will be a major barrier to its adoption.

Gamma Correction

From the LibPNG site: "Gamma correction basically refers to the ability to correct for differences in how computers (and especially computer monitors) interpret color values." There are two factors here: the ability to predict what an image, say a photograph, will look like on another monitor; and the ability to match the colours from different sources on a single page. Predicting what an image will look like is a laudable goal, but unrealistic for me to explore here since it requires seeing the same image on two different computers side-by-side. I can, however, compare html/css colours to image colours. Ideally, a colour which Photoshop (or your graphics application of choice) calls BF2026 should be indistiguishable from the same colour embedded in a web page.

For this test I cut the same graphic down the middle and placed bars of the same colour (by hex code) beside the image for comparison. I tested on graphics created in both the GIMP and in Photoshop with upredicatable results.

The GIFs matched the html colours on all machines and browsers that I tested. There were only two cases that I found where the PNGs matched the html colours -- the Photoshop PNG in Apple's new Safari browser, and the GIMP PNG in Mozilla.

Below are screen captures of the PNG created in Photoshop from major browsers to illustrate the wide disparity in gamma correction for PNG. This is, as far as I know, a problem without a solution. The best a person can do is avoid placing equivalent HTML and PNG colours side-by-side.

Mozilla Mac OS X	Internet Explorer 5, Mac OS X	Internet Explorer 5, Windows

Full Alpha Transparency

One of the biggest advantages that PNG has over GIF is PNG's ability to support full alpha transparency. This would allow you, among other things to create antialiased text or logos and re-use them in different contexts (different background colours and images) without re-cutting the graphics thus reducing bandwidth and labour.

It is a well-known fact that Internet Explorer for Windows doesn't support full alpha transparecy. Less well-known, perhaps, is that there is a non-standard Internet Explorer html extension that can be used to force alpha transparency to work. The two configureations on the left, below, use the same image against different backgrounds.

The first configuration will appear similar to the second in browsers that support PNG transparency properly, but will display as a solid colour box in Internet Explorer for Windows.

The second one uses the hack illustrated here to achieve full alpha transparency in Internet Explorer. This second example should work in all major browsers.

The third in the row of images illustrates the fact that binary transparency works in all browsers that also support PNG including Internet Explorer without resorting to any hack.

As far as transparency goes, then, PNGs work as well as GIFs or better depending on how much effort you're willing to put out.

Transparency without filters. This will be a solid-colour box in Internet Explorer

Summary

The decision to use PNG or not is yours to make. Ultimately you'll have to weigh the marginally smaller file size and arguably better transparency against lack of consistent gamma correction and the extra work that may be involved in achieving the desired results. Based on my results I don't expect PNGs to enter widespread use mainly because among the worst support is given in the most common applications: Photoshop doesn't compress PNGs as well as it compress GIFs; and Internet Explorer for Windows doesn't do full alpha transparency in an intuitive way.

div.orange {background-color: #BD7C2C; height: 106px; width: 53px; position: absolute; top: 0px; left: 53px } div#colourCompare, div#transparencyCompare {height: 121px; position: relative; margin-top: 20px} div#colourCompare img, div#transparencyCompare img {position: absolute; top: 0px; left: 0px; margin: 0px} div.blue {background-color: #3662AE; position: absolute; top: 11px; left: 53px; height: 85px; width: 53px} div.green {background-color: #A6CE39; height: 63px; width: 53px; position: absolute; top: 22px; left: 53px;} div.red {background-color: #BF2026; height: 43px; width: 53px; position: absolute; top: 32px; left: 53px;} #gifDemo {position: absolute; top: 0px; left: 0px;} #pngDemo {position: absolute; top: 0px; left: 116px} #pngGimpDemo {position: absolute; top: 0px; left: 232px} div#transparencyCompare {height: 160px} #transTest { background: #fff url(http://phoyt.macbox.com/text/transBg.png); margin-top: 0px; padding: 20px; width: 100px; height: 100px; position: absolute; top: 0px; left: 0px; } #transTest2 { background: #fff url(http://phoyt.macbox.com/text/transBg2.png); margin-top: 0px; padding: 20px; width: 100px; height: 100px; position: absolute; top: 0px; left: 150px; } #transTest3 { background: #fff url(http://phoyt.macbox.com/text/transBg3.png); margin-top: 0px; padding: 20px; width: 100px; height: 100px; position: absolute; top: 0px; left: 300px; } div#transparencyCompare img { float: none; position: absolute; top: 20px; left: 20px} #gifDemo2 { position: absolute; top: 0px; left: 0px; visibility: visible; display: block } #pngDemo2 { position: absolute; top: 0px; left: 116px; visibility: visible; display: block } #pngGimpDemo2 { position: absolute; top: 0px; left: 232px; visibility: visible; display: block } #gifDemo3 { position: absolute; top: 0px; left: 0px; visibility: visible; display: block } #pngDemo3 { position: absolute; top: 0px; left: 116px; visibility: visible; display: block } #pngGimpDemo3 { position: absolute; top: 0px; left: 232px; visibility: visible; display: block }

Compression

gif, 64 colours: 1,945 byes	png (GIMP), 64 colours: 1,690 bytes	png (Photoshop), 64 colours: 2,237 bytes

gif, 2 colours: 547 bytes	png (GIMP), 2 colours: 483 bytes	png (Photoshop), 2 colours: 915 bytes

gif, 128 colours: 10,029 bytes	png (GIMP), 128 colours: 8,889 bytes	png (Photoshop), 128 colours: 10,430 bytes

Gamma Correction

Mozilla Mac OS X	Internet Explorer 5, Mac OS X	Internet Explorer 5, Windows

Gamma Correction

Mozilla Mac OS X	Internet Explorer 5, Mac OS X	Internet Explorer 5, Windows

Full Alpha Transparency

The first configuration will appear similar to the second in browsers that support PNG transparency properly, but will display as a solid colour box in Internet Explorer for Windows.

The second one uses the hack illustrated here to achieve full alpha transparency in Internet Explorer. This second example should work in all major browsers.

The third in the row of images illustrates the fact that binary transparency works in all browsers that also support PNG including Internet Explorer without resorting to any hack.

As far as transparency goes, then, PNGs work as well as GIFs or better depending on how much effort you're willing to put out.

od_displayImage('myImg1', 'trans', 100, 100, '', 'Transparency with filters on Internet Explorer');

Summary

-->

All versions of Photoshop from 5 upward have a known bug that will incorrectly save Gamma values.

There is a bit of info about it over at GFX^TM. Its a shame that support in Photoshop is so bad. Since Fireworks uses PNGs natively, does anyone know if it has similar problems with Gamma or Filesize?

Ahhh for the day when we can use Alpha Transparent images freely without nasty hacks

The image libpng.org is talking about is obviously a large image where benefits of better compression will yield more, than with small images like your tests. For some of your images, you're down to the size where the header-size matters.

Macromedia Fireworks supports PNGs beautifully. Writing this article, having only tested with two programs, was a poor way to measure the viability of using PNGs.

Thanks for the suggestion. I couldn't test every application in existence so I chose one that's an industry standard, Photoshop, and one I expected to provide top-notch support, then GIMP. I hadn't even heard of Fireworks until about a year ago, so forgive me for not thinking to try it.

Anyway, since two people mentioned it already, I downloaded a trial version and did the same set of tests. As expected, Fireworks behaves a lot like the GIMP. Image compress to a few more bytes than they do in the GIMP probably because Fireworks adds a resource fork in Mac OS X. Gamma correction appears to be roughly the same in Mac OS X browsers (succeeds in Mozilla, fails in Safari) except that Internet Explorer appears to like Fireworks' gamma correction(!)... I haven't had a chance to try Windows broswers yet.

Is Fireworks a good enough application to replace Photoshop for image manipulation? I can't imagine buying fireworks just to compress PNGs with...

When it comes to the features that the two programs have in common, I feel that Fireworks easily takes Photoshop. That being said, Photoshop can do a lot more things than Fireworks. I have found myself wishing I could do certain effects, and not sure how to make them happen in Fireworks. So it just depends on what you are doing. For a lot of basic stuff, get Fireworks. If you want to do a lot of hardcore graphical work, use Photoshop.

This article is an excellent demonstration of how professionals should know their tools. The ubiquity of Photoshop doesn't enter into it, I feel. A hammer is ubiqitous in the world of carpenters; but the carpenter that uses a hammer for every single job will soon be out of work. If Photoshop does not export good PNGs, then the web designer should not use Photoshop, at least for this task.

You write: the GIMP's unintuitive interface and lack of native ports in operating systems other than Linux will be a major barrier to its adoption. First of all, GIMP runs on several systems other than Linux, notably 32-bit Windows and Mac OS X. Second, these GIMP versions are native (what's a 'native port'?), not ports: they are built from the native source code.

As to whether an interface is intuitive or not: this often depends on what the user is used to. Almost everybody who uses an image manipulator knows Photoshop, and therefore the Photoshop interface. However, new users are likely to grow accustomed to the GIMP's interface more easily, as it is more suited to the task. There are a few things about the GIMP interface that could be improved, and as a GIMP contributor I can assure you that GIMP developers are always thinking about these things (if not always acting upon it).

One minor, relatively unimportant thing: when saving the GIMP PNGs, you save them with a lot of options switched on. This caused an extra 56 bytes to be saved to the header. GIFs headers are more economic anyhow, though. It is unonfortunate that the GIMP has most PNG options switched on by default. As you already demonstrated: it can be quite harmful to save gamma information if the user's browsing set-up does not support this.

Youngpup's Sleight JavaScript turns PNG opactity on in Windows IE 5.5 and up.

and Internet Explorer for Windows doesn't do full alpha transparency in an intuitive way

What a weird way of saying things. To me 'intuitive' means that the user has a natural feeling when using a software. And that's got nothing to do with using PNGs rather than GIFs on the side of the web designer.

I have decided to migrate to PNG, mostly for the alpha transparency possibilities. I used Photoshop, but will reconsider and use the Gimp, I think.

Anyway. Thanks for having shared with us your research.

After testing pngs created in Fireworks I came back with the following interesting results regarding gamma correction and various image manipulation programs. I wish had known about Fireworks before this was posted, but this is the nature of the internet -- peer review is strong medicine :).

Pngs created in:	photoshop	gimp	fireworks
IE 6 Windows	fail	fail	check
Mozilla 1.2 Windows	fail	check	check
Opera 7 Windows	fail	check	check
IE 5.2 Mac	fail	fail	check
Mozilla mac	fail	check	check
Opera 6 Mac	fail	check	check
Safari	check	fail	fail

The results are actually shocking. Apart from Safari which is in beta still, about 90% of users (depending on your audience) will see proper gamma correction in a png created in Fireworks. The application I tested with the next-best support is the GIMP but because gamma correction in the GIMP isn't compatible with Internet Explorer, graphics created with it will likely be corrected properly for less than 10% of a typical sample of users.

Believe it or not, they all seem to work in Netscape 4 Mac... but I'd rather not know about that myself :-P

Thanks for a useful article.

Mac users may be interested to know that taking the above GIFs and converting them to PNGs using Graphic Converter yields sizes very close to those quoted for GIMP, so this is another good (shareware) option.

(Conversely, don't even think about using Mac OS X Preview to convert - it'll do it but the files are huge! Makes Photoshop look good in comparison.)

An interesting article but let down by spelling mistakes.

PNGcrush can compress the images to the same degree as GIMP, I've found.

I have written a simple extension to PNGcrush to make it easier to use for non-commandline folks (windows): I drop my photoshop PNGs in a folder, execute a .bat file, and voila! the images are crunched.

calimehtar: If I mail you a ZIP with these files, maybe you can upload it to this page?

Mozilla is not the only one to handle gamma correction of the GIMP PNG correctly; Opera 6 and 7 also handle it just fine.

IIRC PNGcrush can fix the gamma bug from photoshop files.

This article is very informative and the two major retail companies (Macromedia and Adobe) should read it, take notes and fix their products, if applicable, if they wish to remain competative. The problem for Adobe is that they have created Photoshop largly for print related graphics manipulation (since the early days of photoshop's existance and before the time of the web) and have extended it over to the web realm by including Imageready in the product. Obviously they have not optimized their compression algorithms to the same extent that Macromedia has and for this reason Adobe should be shamed openly. Hopefully with later releases they will get this corrected or at least offer a patch or something to fix this embarassing phenomenon. Macromedia on the otherhand never lost sight of its products true purpose...the web. This is why Adobe rules the print landscape and Macromedia rules the web landscape in the retail world. I am an open source supporter too but I shy away from Gimp and Linux as it is not in most production houses I have worked for...yet. As a 'Swiss Army Knife' of tools Photoshop/Imageready is great though with some obvious flaws pointed out in this article. However it costs 2 times as much as Fireworks MX. I am also impressed with Fireworks MX in its integration into Macromdia's other product offerings too but that's an aside story altogether... I use Photoshop to create the graphics or import them from another program and modify it accordingly and then optimize it and slice them up in Fireworks... Its a shame that I have to spend $609 US for Photoshop AND $299 US for Fireworks only to get this little bit of file size savings and 90% proper gamma correction however it is this 'properness' and small file size that my clients are asking for and paying me for. I think that is why Adobe HAD to include Imageready with Photoshop-too many people were jumping ship. Good old Macromedia, now if they would only make an HTML/CSS standards complient browser with the stupid Flash plugin embedded the world would be perfect...ya right. PS What would you say the lowest common design denominators are these days (both software related- being the browsers themselves (netscape 4.7x, ie 5?) and resolution wise (on the monitors-maybe 760px X 420px))? PPS Adobe! Fix your bloody web site too! It's a horrible mess to navigate...you could hire ANY of us to fix it for you real cheap! PPPS Bring on the Gimp!

I always check server logs and talk to my customers on a per-project basis, but it's my opinion that in most cases Netscape 4 is no longer worth the time, and resultant tag soup to support. So I usually recommend supporting Mozilla 1.0+ (Netscape 7 if you prefer) and IE 5.0+ as being the sweet-spot for cost vs benefit maximization in terms of browser platform support. Yes more people use Netscape 4 still than Netscape 7 and all other variants, but Mozilla is easy to support and availablle for download on most platforms that also run Netscape 4. 800x600 accounts for close to half the users out there AFAIK, and most of the rest of them have higher.

Make a batch file with the code below in it on your desktop.
Drop your png files on it.
Your optimised png files are now in "c:\images\optimal".
Leave out "-brute" if you want to sacrify compression for speed.

@echo off
:loop
if !==!%1 goto end
if exist %1 c:\pngcrush\pngcrush.exe -brute -d c:\images\optimal %1
shift
goto loop
:end
echo My work here is done.

I discovered (and fell in love with) the GIMP when I found a Windows port a few months back. Here's the url: winGimp

And contrary to the warning on the page I haven't had bad experiences with this port of the GIMP crashing on me.

-jlr1001

PNG can be a great format but it all depends on how it is used. Fireworks is by far the best working program for PNG. Fireworks may be a little 'out there' in terms of functionality, but most things are still very possible with Fireworks. -Brent

Is this known? PNG Transparancies in mac os X .

Tupholeme:

(Conversely, don't even think about using Mac OS X Preview to convert - it'll do it but the files are huge! Makes Photoshop look good in comparison.)

I think the files are huge because Preview is including the icon image. I seem to remember seeing a way to cut this data out, but I can't refind it yet.

I use Fireworks all the time and don't even have Photoshop. Fireworks is a genius of a program allowing vector and pixel editing at the same time. One thing you have to keep in mind is that you can't just save a fireworks image in its native form, which is .png. Even though the file extension is .png, you have to use the export to .png tool for the proper results.

I don't doubt that your tests for file size of GIF vs PNG are accurate, but my experience was different in an actual use case. I had created a very large image that I sliced and had Fireworks export all the slices as PNG. The files seemed a bit large, so I re-did the export as GIF. The file sizes of the slices were about half the size. Perhaps if I had bothered to go through and optimize each individual slice independently instead of a batch export I could have done better in PNG, but that was too much trouble.

One benefit to PNG is actually for print of all things. I use a service that allows me to upload RGB image files for printing on T-Shirts and coffee cups among other things. They suggest the best format to use is PNG. I've noticed when I create these PNG files that the smoothing on text is far superior to any other image formats they support, GIF or JPG. PNGs create nice-looking images.

Neverthless, GIF is easier to do.

sbhikes, are you exporting as 8 bit (lowest setting) png? I think that each of these png settings will look the same, but 32 bit contains more data (perhaps to make saving/exporting faster). So, save at 32 bit, export at 8 bit. Right?

No, I probably exported at the highest or medium setting. Thanks for the info, though. I wasn't really sure what the diff was.

On another note, one thing I didn't like about PNG vs GIF was that while waiting for PNGs to load in the browser the background was black. It worried me that it might alarm inexperienced web site visitors. And if it didn't, at the very least, the black was ugly. GIFs don't do that.

A while back I discovered a neat program called PNGGauntlet, which is a freeware program that uses two optimisers called PNGOut and PNGRewrite. Below are the optimised images of the original test. What is interesting though is that when I optimised the two images from Gimp and Photoshop, they came out as the same size so it will be interesting to do the cross browser test with some optimised images to see, which it works with.

Without further adjue:
png (PNGGauntlet from the Gimp/Photoshop image), 64 colours: 1,579 bytes

png (PNGGauntlet from the Gimp/Photoshop image), 2 colours: 402 bytes

png (PNGGauntlet from the Gimp/Photoshop image), 128 colours: 8,690 bytes

There is another program called OptiPNG that attempts to compress images in a variety of ways. I was able to further reduce the 128 colour image, but not the 64 and 2 colour ones. It isn't a massive improvement, but every little counts if you don't lose quality right?

png (OptiPNG from the PNGGauntlet image), 128 colours: 8,671 bytes

Jrobbio

To get a (fairly) consistent colour match, you need to avoid putting gamma information into the files. That way, only Opera < 7 and Safari will have trouble. For more information, see The Sad Story of PNG Gamma

calimehtar wrote,

Image compress to a few more bytes than they do in the GIMP probably because Fireworks adds a resource fork in Mac OS X.

This is not very relevant, because

your uploading software will only upload the data fork (or, depending on the source file system, possibly forks as separate files using one of the common mangling schemes) and

Apache (or whatever web server) will only serve the data fork.

For the purposes of checking actual served data size, you can see the data fork size alone in Mac OS X using ls -l in Terminal.

I got paint.net from getpaint dot net and I created a screenshot of this page and with all default settings, I created GIF,JPG and PNG .. The image quality was good for all the three images and for gif it was 84 KB, JPG 218 KB and PNG 143 KB.. Check with dot net paint..

I want to second tupholme's comment about Graphic Converter. I have as a (unfortunate) step in my workflow a step where I run all Photoshop PNGs through Graphic Converter and resaves them. This gets the bad gamma out of the files and makes them match HTML hex values in all browsers (an it lightens the file size a bit too).

I like what I see about GIMP's PNG file sizes, thatnks for the insight there.

that was help full ... thanks alhnuf

thank you ... merkaz

thanks for the blog….its really nice & useful information - tag

Comments

May 17, 2003 - 22:17 — hnield

Pngs created in:	photoshop	gimp	fireworks
IE 6 Windows	fail	fail	check
Mozilla 1.2 Windows	fail	check	check
Opera 7 Windows	fail	check	check
IE 5.2 Mac	fail	fail	check
Mozilla mac	fail	check	check
Opera 6 Mac	fail	check	check
Safari	check	fail	fail

May 22, 2003 - 07:36 — tupholme

Article Categories

Navigation

Recent comments