homepage Welcome to WebmasterWorld Guest from 174.129.80.166
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderator: open

Site Graphics and Multimedia Design Forum

    
PNG's - Lets Take a Look
It's time for PNG's to get a serious look
Brett_Tabke




msg:849033
 2:11 am on Jul 19, 2002 (gmt 0)

There comes a time when slow momentum is finally built up enough that a cause or entity becomes viable. It's like the train going up that hill - sooner or later you know you are going to make it to the top.

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.

 

richlowe




msg:849034
 2:59 am on Jul 19, 2002 (gmt 0)

I tend to agree that PNG is the up-and-coming format. Unfortunately, the lack of serious compression and of animation severely reduces it effectiveness for my purposes. Also, there is some usefulness still in supporting older browsers.

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

mivox




msg:849035
 3:25 am on Jul 19, 2002 (gmt 0)

PNGs are a perfectly good replacement for gifs right now, IMO... All widely used browsers support the format with gif-type transparency, although support for the alpha transparency features is still very inconsistent.

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 ]

Xoc




msg:849036
 3:33 am on Jul 19, 2002 (gmt 0)

We have less than a year until the GIF Patent expires [webmasterworld.com]. That isn't a reason to avoid PNGs, but in a year the reason for moving to them is strictly technology based rather than intellectual property based. Party at my house the day that it expires.

papabaer




msg:849037
 3:46 am on Jul 19, 2002 (gmt 0)

I was first introduced to the .png format when I began working with Macromedia's excellent Fireworks graphic program. By default, Fireworks saved images as .png files. I was impressed with the quality of the images and the relative file size.

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.

prowsej




msg:849038
 4:10 am on Jul 19, 2002 (gmt 0)

The JPEG patent isn't likely to be valid: the patent in question only appears to be relevant if JPEG compression were used in a videoconferencing-style application.

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.

Mark_A




msg:849039
 7:27 am on Jul 19, 2002 (gmt 0)

Its odd I searched for another post about jpeg when I posted about the patent but did not find one, I see now there is this one..

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.

Brett_Tabke




msg:849040
 7:42 am on Jul 19, 2002 (gmt 0)

>how often do you see them in a web page at the moment?

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.

Mark_A




msg:849041
 8:07 am on Jul 19, 2002 (gmt 0)

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

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

SmallTime




msg:849042
 9:09 am on Jul 19, 2002 (gmt 0)

Oh why does IE not support the alpha channel transparency?. I have a site with a different scenic back ground image in the corner of the page, with a transparent logo overlaid - can get acceptable results with a couple logos in gif, but the alpha png is beautiful (and slightly smaller) in Netscape and Opera but jagged in IE6. The indexed transparency png pretty similar to the gif. So close.

Slud




msg:849043
 1:53 pm on Jul 19, 2002 (gmt 0)

I'd love a replacement for both gifs and jpegs, but it's hard for me to get excited about png's.

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

Xoc




msg:849044
 2:33 pm on Jul 19, 2002 (gmt 0)

I don't think pngs were ever meant to replace JPEGs. They were meant to replace GIF files, and were developed for that express purpose to avoid the Unisys patent.

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.

Is there any possibility that Google indexes the metadata in PNGs?

Slud




msg:849045
 3:29 pm on Jul 19, 2002 (gmt 0)

As long as were wishing, how about SVG as a GIF replacement? Most gif's a are used for simple graphics and logos anyway, why not use a true vector format (that is can easily be indexed by searche engies).

chameleon




msg:849046
 4:51 pm on Jul 19, 2002 (gmt 0)

IMHO, the big issue with PNG is the same as my issue with just about everything on the web -- no support in Netscape 4.x.

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.

bird




msg:849047
 5:03 pm on Jul 19, 2002 (gmt 0)

no support in Netscape 4.x.

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.

bird




msg:849048
 6:32 pm on Jul 19, 2002 (gmt 0)

I verified this by downloading 4.03

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.

chameleon




msg:849049
 7:29 pm on Jul 19, 2002 (gmt 0)

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

bird




msg:849050
 7:59 pm on Jul 19, 2002 (gmt 0)

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.

prowsej




msg:849051
 4:22 am on Jul 20, 2002 (gmt 0)

PNG support was introduced in Netscape 4 - I think it was version 4.5 that brought it in. It's native in the browser and not provided by a plugin. However, it doesn't support Alpha Transparnecy or Color Profiling/Gama Correction to display accurate colors across platforms.

Duckula




msg:849052
 12:56 am on Jul 21, 2002 (gmt 0)

PNG can be used as a GIF replacement very easily, but doesn't work very well on the field where JPG is used.
Why? I compress screen captures of an 800x600 window using PNG with the greatest compression, and the range of sizes goes from 10kb for an image with a rectangle, a line and a string of text, to 278kb for a screen filled with antialiased rings. Captures of the same app.
Some lossy compression is going to be eventually needed for that, in the case that JPEG becomes a problem.

Bluetuna




msg:849053
 1:08 am on Jul 21, 2002 (gmt 0)

Has anyone had problems with AOL and .png files?

piskie




msg:849054
 1:32 am on Jul 21, 2002 (gmt 0)

I have just tested a png image in NN4.7 and it displayed fine and bug free in a page containing divs and tables.

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.

jetboy_70




msg:849055
 3:33 pm on Jul 26, 2002 (gmt 0)

I've been using PNGs in preference to GIFs for the last couple of years... the following might be of some use:

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.

tedster




msg:849056
 10:18 pm on Jul 28, 2002 (gmt 0)

The feature I'm waiting to see browsers support is the embedded gamma information. No more washed out images when you switch OS!

But it does take a little bandwidth, and browser support is surely not there yet. Nevertheless, it seems like a great idea to me.

madcat




msg:849057
 2:29 am on Jul 31, 2002 (gmt 0)

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-

tedster




msg:849058
 8:46 am on Aug 3, 2002 (gmt 0)

Found it! It's an .htc behavior (MS specific) called AlphaImageLoader. Someone just brought up the topic of these behaviors in the Browsers Forum this week, so they're still news to me -- but this looks like the first reason I might have to use proprietary Explorer code.

Microsoft reference [msdn.microsoft.com]

Extra Info from WebFX [webfx.eae.net]

madcat




msg:849059
 12:20 am on Aug 11, 2002 (gmt 0)

Good find Tedster! That's going to come in very handy soon. Thanks-

RFranzen




msg:849060
 12:29 am on Sep 29, 2002 (gmt 0)

PNG has been enabled in almost all Netscape browsers since 4.1. I think the exception is the 16-bit Windows browser, which Netscape continued to support for some time after the release of win95.

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

RFranzen




msg:849061
 1:45 am on Sep 29, 2002 (gmt 0)

Mark_A wrote:
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

dwhite




msg:849062
 6:35 am on Oct 9, 2002 (gmt 0)

As far as I can tell, Netscape 4.7x won't support a single transparent background colour for PNG (never mind multiple layers or translucency). Despite this, I love the format, and 99% of my site is PNG based.

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved