Using PNG images in web sites

Is it okay to use PNG images in a website? I haven't really seen them used much so was wondering what the drawbacks are. There开发者_开发知识库 must be some as surely everyone would be using them?...

Are they, for example, MSIE and Chrome compliant etc...

IE 6 will only render GIF-like transparency in PNG images unless you use filters.
For more details, see here

Other than that, they work fine, and they're becoming more popular now.

Here's a few Fortune 500 corporate websites implementing PNGs on their front page:

• microsoft.com
• apple.com
• google.com (google logo is a PNG)
• hp.com (they're actually using twinhelix's IEPNGFIX and transparent PNGs)

actually the only one I found that didn't (I only looked at about 10) was Siemens.com

They can be used just fine these days. Older versions of IE (6.0 and older) didn't support all transparency modes of them, which was the biggest reason why people avoided the format. Other browsers such as Firefox, Chrome, Opera, Konqueror or Links didn't have such issues.

Yes it is ok to use pngs, but there are some things worth pointing out.

• Internet Explorer 6 doesn't support transparency. As several comments pointed out you can use filters to fix this issue. However there are certain issues that can popup when using it over a relative container, or tring to use background repeat. Personally I use a vml implementation that doesn't have these issues.

• It's usually not a good idea to mix(as in overlap) pngs with other image types such as jpegs. Even though they have the same background color IE may display them slightly different, so they don't really blend well.

• Mac OS X renders the pngs with the stored gamma correction. You may have to remove it. I use pngcrush.

• Nested semitransparent surfaces can be very slow on some browsers.

PNG files tend to become the standard today, particularly because PNG is an open format precisely designed for the web. The W3C recommends the use of PNG for websites, as using PNG will produce more compact files when dealing with graphics, logos, etc. PNG is a lossless compression format.

While PNG is the only format that allows you to use transparency, you might want to use JPG (which is mostly a lossy compression format) for larger pictures.

And guess what? Even Google is using a png image for its olympics logo.

PNGs are actually VERY often used today. Few are the sites without at least a few PNGs. And they are not to be feared either. The only problem there is is with IE6, and that has two possible solutions as well:

• The DirectX filter. Just google, the net's full of this. It works without any modifications to the PNG file, but there are a few GOTCHAs - like transparent areas will also be transparent to user input (clicking) and you can't combine it with another background picture.
• Setting the background color for the PNG. This doesn't require any special coding in the webpage, but it's not always appropriate. The idea is that a PNG file can specify a default "background" color and IE6 honors this. Since quite often PNGs are displayed on a solid or near-solid background, this works amazingly well. Use TweakPNG utility to set the background.

And lets not forget that the Stack Overflow logo is a PNG, another reason to use it!

PNGs are a more versatile graphical format for the web, having excellent alpha transparency as well as good compression and no proprietary restrictions (GIF was once the subject of a protracted IP rights case when Compuserve claimed ownership of the compression format used).

However, the jury is still out on their use in general. They do appear to be especially good for small logos and icons but for large detailed images, GIF is largely comparable in file size and JPEG still has the best overall filesize to quality ratio (and that can make a big difference to a web site's loading time).

PNG is gaining traction as a format though and you can expect to see it being used more and more everywhere you look. The alpha transparency features alone make PNG a useful format for interesting interfaces elements, such as overlays and cutaways.