Skip to page content or skip to Accesskey List.
Search evolt.org
evolt.org login: or register

Work

Main Page Content

To PNG or not to PNG

Posted on May 16, 2003

in Visual Design

by Philip Hoyt (calimehtar)

Rated 3.89 (Ratings: 18) (Add your rating)

Log in to add a comment
(31 comments so far)

Want more?

 
Picture of calimehtar

Philip Hoyt

Member info | Full bio

User since: March 22, 2002

Last login: March 22, 2002

Articles written: 2

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
1,945 byes 1,690 bytes 2,237 bytes
gif, 2 colours: 547 bytes png (GIMP), 2 colours: 483 bytes png (Photoshop), 2 colours: 915 bytes
547 bytes 483 bytes 915 bytes
gif, 128 colours: 10,029 bytes png (GIMP), 128 colours: 8,889 bytes png (Photoshop), 128 colours: 10,430 bytes
547 bytes 8,889 bytes 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.

1,905 bytes 1,905 bytes 1,905 bytes

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
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 }

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
1,945 byes 1,690 bytes 2,237 bytes
gif, 2 colours: 547 bytes png (GIMP), 2 colours: 483 bytes png (Photoshop), 2 colours: 915 bytes
547 bytes 483 bytes 915 bytes
gif, 128 colours: 10,029 bytes png (GIMP), 128 colours: 8,889 bytes png (Photoshop), 128 colours: 10,430 bytes
547 bytes 8,889 bytes 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.

1,905 bytes 1,905 bytes 1,905 bytes

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
Mozilla Mac OS X Internet Explorer 5, Mac OS X Internet Explorer 5, Windows

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.

1,905 bytes 1,905 bytes 1,905 bytes

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
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 od_displayImage('myImg1', 'trans', 100, 100, '', 'Transparency with filters on 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.

-->
31 comments on this article. Log in to add your comment |

Photoshop PNG

Submitted by hnield on May 17, 2003 - 22:17.

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

login or register to post comments

Differences of size

Submitted by asjo on May 18, 2003 - 11:20.

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.

login or register to post comments

Macromedia Fireworks supports PNGs beautifully...

Submitted by DavidBeoulve on May 19, 2003 - 09:35.

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.

login or register to post comments

Fireworks

Submitted by calimehtar on May 19, 2003 - 12:09.

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...

login or register to post comments

oh yeah

Submitted by sehryan on May 20, 2003 - 03:46.

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.

login or register to post comments

Excellent: Professional, know thy tool!

Submitted by branko on May 20, 2003 - 06:32.

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.

login or register to post comments

Sleight turns opacity on

Submitted by kirkaracha on May 20, 2003 - 10:21.

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

login or register to post comments

intuitive... wierd phrasing ;-)

Submitted by notabene on May 20, 2003 - 23:20.

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.

login or register to post comments

update

Submitted by calimehtar on May 21, 2003 - 20:46.

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

login or register to post comments

Graphic Converter works well

Submitted by tupholme on May 22, 2003 - 07:36.

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.)

login or register to post comments

untitled

Submitted by Xanadu on May 25, 2003 - 16:01.

An interesting article but let down by spelling mistakes.

login or register to post comments

PNGcrush for Windows users

Submitted by bearwalk on May 27, 2003 - 03:49.

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?

login or register to post comments

Oh, and by the way...

Submitted by bearwalk on May 27, 2003 - 03:57.

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.

login or register to post comments

Great information-Just a rant.

Submitted by chaosdivine on May 27, 2003 - 13:44.

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!

login or register to post comments

re: PS lowest common denominator

Submitted by calimehtar on May 27, 2003 - 17:31.

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.

login or register to post comments

PNGcrush batch file

Submitted by Kristof on June 1, 2003 - 08:41.

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.

login or register to post comments

Actually there is a Gimp for Windows port

Submitted by jlr1001 on June 2, 2003 - 05:20.

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

login or register to post comments

Fireworks + PNG = Great

Submitted by BrentNorin on June 24, 2003 - 09:23.

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

login or register to post comments

Fireworks + PNG = Great

Submitted by BrentNorin on June 24, 2003 - 09:24.

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

login or register to post comments

Is this known?

Submitted by Misha on June 26, 2003 - 11:49.

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.

login or register to post comments

PNG smaller than GIF??

Submitted by sbhikes on June 28, 2003 - 07:46.

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.

login or register to post comments

re sbhikes

Submitted by Misha on June 28, 2003 - 11:18.

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?

login or register to post comments

Black background

Submitted by sbhikes on July 3, 2003 - 14:13.

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.

login or register to post comments

Optimising PNG images

Submitted by jrobbio on September 10, 2003 - 08:59.

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

login or register to post comments

Gamma information

Submitted by jim.dabell on September 17, 2003 - 02:39.

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

login or register to post comments

OS X: Resource data not relevant

Submitted by tobyt on September 22, 2003 - 23:15.

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.

    login or register to post comments

    • I got less size for GIf than PNG..

    Submitted by mpnkhan on February 2, 2007 - 04:57.

    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..

    login or register to post comments

    Graphic Converter Part 2

    Submitted by nettles on April 20, 2007 - 20:10.

    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.

    login or register to post comments

    thanks ..

    Submitted by alhnuf on October 7, 2007 - 10:30.

    that was help full ... thanks alhnuf

    login or register to post comments

    thanks

    Submitted by alhnuf on October 8, 2007 - 09:06.

    thank you ... merkaz

    login or register to post comments

    thank you

    Submitted by merkaz on October 13, 2007 - 07:27.

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

    login or register to post comments

    The access keys for this page are: ALT (Control on a Mac) plus:

    evolt.orgEvolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.