Using PNG images in web sites

Question

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

Answer 1

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.

Answer 2

IE 6 will not render 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.

Answer 3

PNG files are still not fully supported by IE (including IE8). For this reason, I'd be sure to use a pngfix, or to avoid them if you can. That is, assuming you are attempting to support IE.

Update

I suppose my answer was a bit vague. IE8 (and its predecessors I'd assume) doesn't repaint a PNG properly while respecting limitations placed on it via CSS. I myself had to abandon a PNG just two days ago for this very reason. I'll note that my PNG had feathered edges where the alpha-channels were used to illustrate a drop-shadow on the edges of an image - these were repainted as solid black. This problem may not persist if your image has solid edges with no feathering.

Answer 4

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.

Answer 5

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

Answer 6

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.

Answer 7

PNGs are very good to use when it comes for transparency + quality + lesser size. You can evidently feel its effect in Paint brush. Just take a screenshot of your window and paste it in paint. Now try saving it as bmp, jpg, and png.

bmp version - clarity 100% size huge for known reasons all pixels are stored as it is

jpg version - compression applied, clarity lost. you can see it readily by comparing with the one you saved as bmp

png version - beats both jpeg and bmp. Lesser size and better quality!!!!

Use png as much as possible any where!!

P.S: png transparency is not supported in paint brush though.

Answer 8

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

Answer 9

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.

Answer 10

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.