homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
Transparent PNG buttons
noiseordinance

5+ Year Member



 
Msg#: 3822302 posted 10:26 pm on Jan 8, 2009 (gmt 0)

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?

 

thecoalman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3822302 posted 2:41 am on Jan 9, 2009 (gmt 0)

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.

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3822302 posted 10:11 am on Jan 9, 2009 (gmt 0)

Exactly thecoalman. Well put.

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

noiseordinance

5+ Year Member



 
Msg#: 3822302 posted 7:33 pm on Jan 9, 2009 (gmt 0)

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!

surrealillusions

5+ Year Member



 
Msg#: 3822302 posted 8:15 pm on Jan 10, 2009 (gmt 0)

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.

:)

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved