Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Transparent PNG buttons



10:26 pm on Jan 8, 2009 (gmt 0)

5+ Year Member

Hi there. I have a graphic designer supplying me graphics for her first website. I don't know if it's the way she's outputting her transparent PNGs or the way the browser simply interprets them, but when she makes classy-looking buttons with fairly thin fonts at about size 14px and exports them in a png, they look rather grainy and pixelly. She's sent them to me in PNG8 and PNG24, 150dpi and 300dpi and they all look sorta bad. Is there a recommended setting that people use to get these pngs to come out looking nice? Personally, I'm not sure if it's just the web-friendly compression or what... perhaps she shouldn't use a thin font?


2:41 am on Jan 9, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

First it should be noted that IE6 does not fully support transparent .png using alpha channel (24 bit). It only supports those using 8-bit that are either fully transparent or a color. e.g the same thing as .gif.

The DPI setting for images is irrelevant when viewing in a web browser. A 200px X 200px image is the exact same image whether it's 72DPI or 1000DPI. DPI is used to set a default scale for physical media like paper because pixels do not have a physical size.

By your description it sounds as if the edges of the images are pixelated? When using a transparent .gif or 8-bit transparent .png you need to use anti aliasing but it's a specific circumstance for these images as you need to match it to the background color. For example if you have a an image that was made for a light background it's going to look terrible on a dark background. Try downloading an image like this, smilie images from forum software would be one example. What you'll find is they have a fringe on the edges allowing them to blend into the background. How to achieve this depends on the software you are using to create the images.

24 bit .png is the ultimate solution because they use alpha transparency. The pixels on the edges can be given a transparency allowing the background color to show through but again they are not supported by IE6 and anyone viewing these images will be presented with a very ugly grey area where the transparency should be. There are some hacks available to make them work.


10:11 am on Jan 9, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Exactly thecoalman. Well put.

For the IE6 hack Look up IE6 transparency filter. Easy enough to implement.


7:33 pm on Jan 9, 2009 (gmt 0)

5+ Year Member

Thank you much for the reply. This forum is pretty darn awesome, I must say. So the designer who's sending me this stuff, I will find out if she's doing png8 or png24. I definitely will need to invest some time in ie6 hacks for transparency and whatnot, as I'm guessing IE6 holds much, if not most of the browser share (hopefully I'm wrong, but I avoided IE7 cause I hate IE in the first place). As far as the IE6 hack, I have read that they consume more browser resources; some of them trigger active x. Is this correct? If so, does it only trigger when using IE6 or will this slow down site performance for all users?

Thanks again!


8:15 pm on Jan 10, 2009 (gmt 0)

5+ Year Member

The ie hacks vary in their implementation, some are javascript and css, some are just css. If you use the ie conditional comments for the css, then you can avoid un-needed load time for the proper browsers.

Just go and look for some and find out which is the best for your needs and the easiest to work with.



Featured Threads

Hot Threads This Week

Hot Threads This Month