Forum Moderators: not2easy
In the past, there hasn't been a compelling reason to switch to PNG's. Browser and Graphic program support was slow to catch on and there just wasn't enough of a reason to switch from the standard mix of Jpegs and Gifs.
That all changed today with the news that Jpeg's are patented [theregister.co.uk] and the fact that GIF's are patented by Compuserve, I think it is finally time to consider Portable Network Graphics (PNG) as a serious replacement for Gifs and Jpeg files on the web.
PNG is a an open source format developed by the web [libpng.org] and for the web. It was created in the wide open spaces of Usenet in 1995 as a result of the GIF patent controversy. There are no patents to worry about with PNG's and they are supported by all major browsers and paint programs.
The format of PNG's is rich and includes most of best features of Gifs and Tiffs combined.
For the Web, PNG really has three main advantages over GIF: alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive display). PNG also compresses better than GIF in almost every case, but the difference is generally only around 5% to 25% (-PNG Homepage [libpng.org])
PNG's are widely supported by the major browsers including,
Opera 4-6, IE 5-6, Mozilla 1, Netscape 6+ and most derivatives of those. Although not all features of PNG's are supported in all
browsers.
Format:
True Color:
While Gifs are stuck at 256 colors, and Jpegs at 32bit, PNG's support up to 48bit true color photos for unrivaled clarity.
Interlacing:
PNG's also support interlacing (progressive download/display like jpgs) style formats.
Security - Checksums:
For security and precision, there are 3 levels of "checksums" present in PNG's. The first is a simple 8 bit (or'd) checksum of the entire file that can detect problems such as network transfers where a byte or bit is dropped. The second is a full 32bit crc checksum. The third is a "chunk" checksum where parts of the PNG are broken down and checksumed individually.
Compression:
Unlike Jpegs where compression always results in the loss of image quality, PNG's features lossless compression. However, resulting file size is a significant issue when comparing to Jpegs. PNG's will almost always be larger than comparable Jpegs.
Alpha Channel:
One of the more fancy features of PNG's is an alpha channel mask "layer". While Gifs support simple 2bit transparency, PNG's support up to 256 layers of transparencies. With Gif, you are limited to simple "color on - color off" support, PNG's can use all sorts of background images an get perfect "bleed through" of the back ground image. It means you can use the same image (such as a logo) on multiple backgrounds and not worry about artifacting like you do with GIF's. Unfortunately, IE6 for windows only supports two bit alpha channel transparencies while the Mac version is in full compliance.
Opera browser can use it to create customized (skin) Opera user interfaces [searchengineworld.com].
Converting to PNG's:
Making the switch to PNG's now is rather painless. As mentioned, all the major paint programs support PNG's, and all the major browsers support them. PNG is also part of the HTML 4.0 specification. Converting your Gifs and Jpegs to PNG is rather painless, but getting it "just right" will take a bit of usage.
Size Matters:
In a download and bandwidth sensitive environment of the web, keeping graphi sizes small is of course a prerequisite.
One problem people run into, is their PNG's appear to turn out larger than their Gif's. If this happens, remember to tweak your Paint program to use 256 colors. The second way is to try another paint program because they vary widely in image compression capabilities.
Conclusions:
PNG's are not perfect. On the downside, they do not feature animation like Gif files. There has been an extension to
PNG's called MNG's that has been set, but very few paint programs and browsers support the new extension.
There is also the consideration of size. Paint programs have quite a bit of catching up to do to reach optimum compression levels to keep PNG's down to Gif file size all the time. There just isn't the pallete optimization available in most paint programs that there is for Jpegs and Gifs. That results in less than optimized file sizes.
All-in-all, with the recent developments, I think it is time to begin considering replacing some of those static Gifs with PNG's.
However, that said, the day is rapidly approaching when these arguments will fall to the wayside. Give it a year or two and PNG (and MNG) will start becoming the dominant format on the internet.
I will be happy when that day happens, as I am getting very tired of JPG and GIF and the endless patent wars. It's time for this nonsense to stop.
RIchard Lowe
Because of that, if you're going to try using PNG with transparency, I wouldn't recommend doing any fancy multi-level drop shadows... you're liable to end up with some strange results in some unexpected places.
Good reference of software support for PNG:
[libpng.org ]
For a number of reasons I pretty much began to use Photoshop exclusively; I also left the .png format behind as well. Only recently have I began to migrate back to both the .png file format and the Fireworks editor. I agree with what's been said: there is good reason to use the file format now... and in the future. The winds are shifting.
The GIF patent isn't an issue for people like you and me since the liscencing price is already built into the price of the programs - like Photoshop - that we already own.
There are effective workarounds that give Internet Explorer full support for the PNG specification - including full Alpha Transparency. In IE/Win 5.5+ a single line of CSS attached to the image will cause the browser to render the alpha transparency correctly. If you want alpha transparency in earlier browsers, import the PNG images into flash and save then as SWF files with a transparent background. Everyone already has flash and it has been able to render alpha transparency for many years.
I dont think the patent issue will move people from jpeg, its imho
1. now more widely used than gif and certainly more widely than png
2. unlikely that for still images the patent will be upheld as it was not enforced for 10 odd years and is efectively in the public domain.
3. as mentioned the claims only have a little while to run anyhow..
4. according to some discussions I read last night subject anyhow to some process called "hoffman" which predates jpeg and jpeg being confused with the "joint... version who really knows what they are using anyhow...
5. Although you say Brett that png are widely supported, how often do you see them in a web page at the moment, I have never seen / noticed a single one .. tiff is also a format available but also big big non lossey as is bmp - perhaps wider implementation of broadband will reduce jpegs demand ..
6. I dont believe the statement that "png are patent free" as one cannot be sure the inventors did not use knowledge that is / was the property of someone else .. or had been registered with a patent which had not yet become public knowledge witness the hyperlink, gif, jpeg .. so in fact if we used that logic it would be better to use something where claimed ownership is almost known than something where there have not yet been any concrete claims to ownership .... because though perhaps more expensive at least we know where we stand..
7. last size .. None of the mage programs I use even export to png, well and none that I have heard of do anything like the size compression jpeg can for a fast loading web page. Size matters - in this case in the reverse to the normal expectation of texans :-)
8. last +1 - it has been commented that the fact that Sony have apparently paid $15m for rights to Forgent is possily more to do with video compression than still images. The patent reads a little more relevant to frame to frame compression with removal of redundancy.. more easy to pressure a company perhaps selling loads of video cameras than one selling stills cameras..
9. You would have thought after being caught out with Polariod patent issues some time ago, Kodak would not have allowed themselves to be caught with jpeg ... I expect they already checked it out .. or deserve all they get
....
Have a good morning all.
Umm, how would you know? Ever right click and view the properties of the logo on this site? Or the "add reply" and "new post" buttons? ;)
They are popping up everywhere if you read source code.
Ha ha I guessed as I wrote that there would be some in "obvious" places :-)
Still as your png its 3,016 bytes.
Ulead photoimpact says that as a gif with 40 colours it could be 2,084 bytes Netscape safe and as a jpeg it seems a good image to compress because it could go down to 50% .. wait it even looks pretty good at 30% with YUV411 and standard optimised which takes it to 1,582 bytes.
1-2 k extra per page Brett!!
you bandwidth hog you :-)
*Alpha-channel is the only really unique and needed feature, but is also the one with the poorest support.
*Lossless compression is seldom needed for photos, and makes for huge file sizes. I've never found the compression any better than zip compression. (Obviously, zip'd files wouldn't render progressively.)
GIFs and PNGs both offer lossless compression. JPEGS give lossy compression. (That means that when the thing is uncompressed, GIF and PNG produce the original, but JPEG only gives something "like" the original). JPEGs should be used for photographs only, which is what they are designed and optimized for.
From the the PNG FAQ [libpng.org]:
A side note: for all practical purposes, PNG is never smaller than JPEG for photographic images. On the other hand, for buttons and simple graphics with relatively few colors, PNG usually is smaller than JPEG. Use the right tool for the job!
I should drop the PNG standard URL, which is a good place to go for more info: [w3.org ]. While looking that up, I found an intriguing statement that no one seems to have mentioned:
PNG also has...the inclusion of metadata in the file means that search engines can find graphics based on their descriptions rather than their filenames.
Depending on who you speak to, Netscape still commands 4 - 10% of the browser market. That's a significant enough number that you just can't ignore it...
Stupid Netscape.
That's what I thought - until I just checked with NS 4.7.9 on Linux, and it had no problems at all with the PNG files I threw at it. Dunno about other platforms.
Testing with 4.0.3 is not a very good verification of what the current version 4.7.9 can do, is it?
Does anyone have a out-of-the-box installation of the most current NS 4.x.x on Windows to test whether it can handle PNG?
It's a while that I did that test myself on Linux, which is why I was positively surprised now that the current release does it. The minor version numbers can really make a difference here. If there is a NN4 release that *will* display PNGs (either natively or with a plug-in that is included in the distribution), then I'm ready to drop GIF. Otherwise, I'd have to wait until Mozilla gets a larger market share among the Netscape crowd.
Testing with 4.0.3 is not a very good verification of what the current version 4.7.9 can do, is it?
Does anyone have a out-of-the-box installation of the most current NS 4.x.x on Windows to test whether it can handle PNG?
The reason I chose version 4.03 is that (IMHO) 4.0 is about the oldest version of Netscape a web developer should reasonably be expected to support. It would be great if everyone using Netscape was running the latest version, but we can't realistically expect that.
Too bad we can't force someone to upgrade...
Someone who's still using 4.0 could just as well be using 3.x, and I don't care for that one either.
The thing is that many institutions (eg. schools and universities) have a policy of exclusively using something from the 4.x.x family, for security reasons. For the same security reasons, those people are quite likely to keep up to date with the latest version from that family, which makes 4.7.9 very relevant. I still see around 10% of NS 4.x in my logs, and while 4.7.8 currently takes the largest chunk of that, 4.0 is at a very insignificant 0.03%.
If a feature is supported by the latest update from the 4.7 family, then I can use it with a good conscience, otherwise I can't. This is why I would specifically like to know if 4.7.9 in its default configuration on Windows will display PNG files.
One interesting thing was that when I inserted it into a sample page, Dreamweaver MX displayed it as distorted monochrome but preview in browser displayed fine in IE6 and NN4.7
My NN4.7 is the latest (4 weeks ago) download from their site.
Be careful using transparency unless you want browser compatibility issues. I'm not just talking about alpha transparency here. At low colour depths (8 or lower in my experience) Netscape 4.7 will not display index transparency correctly in certain situations.
With flat colour images, PNGs will usually be significantly smaller in file size than GIFs. As file sizes get smaller, the percentage gain is less, and for files less than 1K GIFs can often turn out smaller. I'm basing this on experience with Firework 3 and 4 - other applications my produce different results.
Again in Netscape 4.7, if you use PNGs as repeating table backgrounds, they might not display at all. This only seems to be an issue when they tile vertically, not horizontally (working from memory here though, so don't quote me).
As noted by a previous poster; Dreamweaver has difficulty displaying PNGs, but only seemingly with low colour depths. You generally see a distorted mono image, and it refuses to pull the dimensions from the graphic. This is a Dreamweaver issue only, and does not affect you actual web page.
Apart the issues above, I've had no problems working with PNGs and look forward to a time when features like alpha transparency are supported better.
But it does take a little bandwidth, and browser support is surely not there yet. Nevertheless, it seems like a great idea to me.
There are effective workarounds that give Internet Explorer full support for the PNG specification - including full Alpha Transparency. In IE/Win 5.5+ a single line of CSS attached to the image will cause the browser to render the alpha transparency correctly.
What is the line of CSS needed for this workaround? Does it apply to IE6.0 as well?
IE6 provides a lovely brown background to my PNG image, while Opera 6 works great.
Thanks-
Microsoft reference [msdn.microsoft.com]
Extra Info from WebFX [webfx.eae.net]
If you have the Quicktime plugin, it overrides native PNG support when the image is displayed by itself. When it is part of a web page, native PNG support is used.
-- Rich
Still as your png its 3,016 bytes.
Ulead photoimpact says that as a gif with 40 colours it could be 2,084 bytes Netscape safe and as a jpeg it seems a good image to compress because it could go down to 50% .. wait it even looks pretty good at 30% with YUV411 and standard optimised which takes it to 1,582 bytes.1-2 k extra per page Brett!
you bandwidth hog you :-)
The Webmaster World logo has 96 colors. But if one were willing to go lossy, it reduces to a 16-color (4 bpp) PNG with a size of 1920 bytes. And it still looks darn good! Examining the image itself, the original graphic probably used 8 colors (black, white, and 6 pastels), with 88 more getting introduced as artifacts of reduction.
Netscape safe? How much of a concern is that nowadays? Just checked tracking logs on 4 of my pages. I guess it is still significant; between 4.2% and 6.5% of the people accessing them are using 8-bit graphics.
-- Rich
On top of this, here are a few (re-calculated) stats from the Google Zeitgeist page:
MSIE 6: 41%
MSIE 5.5: 23%
MSIE 5.0: 22%
Other: 6.5%
NS 4.x: 5%
MSIE 4.0: 2.5 %
Netscape 4.x only manages 5% - while MSIE hogs just under 90% of the browser market!
I personally can't wait for MNG to become popular, since it would save plenty in terms of bandwidth. Does anyone know of some kind of 'patch' for Explorer that will make animation (GIF unfortunately in this case) run at 50 frames per second? The most I can achieve is a stuttering 10-15 FPS...
