Hello, I had taken a three year break from web design and I am coming back to it now.

Back in the days of '05 and '06 there was interest in transparent png's, but it was not used too well because of browser support. I have been searching on the forums here, but found no answer.

Have transparent PNG's become more main stream now? I just would like to use them on my website for certain design purposes. I know for a fact that the people that I am catering to are gamers, which makes me assume that they are up to date on browsers.

So in a nut shell, is it OK to use them these days now?

Absolutely. The only real catch is to make IE6 display them properly so you will need to add a conditional statement to target those users. Here is the one I use:
http://labs.unitinteractive.com/unitpngfix.php

here is how I call it:
<!--[if lt IE 7]>
<script type="text/javascript" src="js/unitpngfix.js"></script>
<![endif]-->

There are other methods out there too.
http://nettuts.com/videos/screencast...arency-issues/

As the above poster mentioned IE6 is the only downfall but I love using png for my designs. I actually expect to see the use of png's climb in the next year or two now that users are using browsers that support them for transparency to make sharper looking designs.

IE6 is gradually vanishing. Its better off gone out of use asap. Too much problem with it.

I personally try to avoid images with alpha transparency just because there are still significant number of people using IE6.

It`s ok to use transp png if you MUST, as long as you use a hack for ie6. You can also embed into flash with WMode transp. - if you use just a fews pngs, for logo or i dunno. If you use an image with % transparency, you can achieve that with css, from a normal image. Using png is a must when you use it as a background for text, and the image has shadow...or other effect. Anyways, each case is different, use whatever it suits you for your design to look good and load fast.

I will occasionally use them, since it is sometimes much easier to. The only browser that still has widespread usage that doesn't support it is IE6, as mentioned. The IE png hack mentioned above is useful, but it won't work on absolutely positioned items, or background images that repeat. There are workarounds for the absolute positioning, as it will accept children of absolutely positioned elements, but it is still a limitation. There are a couple other limitations that I forget. To be clear, this isn't an instant effect in IE6, as it takes some time for the JavaScript to process.

Originally Posted by scott botkins

As the above poster mentioned IE6 is the only downfall but I love using png for my designs. I actually expect to see the use of png's climb in the next year or two now that users are using browsers that support them for transparency to make sharper looking designs.

I totally agree with Scott. I use pngs whenever I can, even over jpegs, Besimhu.

What are transparent PNGs for? I've never used them, but I've heard of them a lot.

Originally Posted by Madman340

What are transparent PNGs for? I've never used them, but I've heard of them a lot.

It depends on if you're talking about a 24 bit PNG or an 8 bit PNG. IE6 supports transparency on 8 bit PNGs only, which operate exactly like a GIF, in that only solid blocks may be made transparent. In a 24 bit PNG, areas may be either fully or partially transparent, allowing images to glow, have realistic shadows, mask colors with other colors, etc. Also, a 24 bit PNG has very realistic color transitions, that allows it to realistically handle photographs, just like a JPEG at full quality. The only downside to this is that PNGs have a larger file size than a JPEG when used for photos, and are also harder to optimize. I still use JPEGS for photos, because I can make the file size up to 1/4th of the size of a PNG, and still have it looking reasonably well.

I usually just design it, and then export as a JPG. Then just chop it up and put it together with HTML/CSS.

According to this amazing post, transparent pngs will be one of the top trends of 2009:
http://www.smashingmagazine.com/2009...ends-for-2009/

Thanks for sharing Itwiw, interesting read!

It is important not to translate "transparent" as only meaning that the image is "see-through". ie, the background texture can be seen behind it. As mentioned above, that can be done with css too.

PNG's are great for odd shaped images that you want to "float" over the page. As you know, jpg creates a rectangular or square image. Therefore, if you want a round circle image as jpg to blend in with a background, you must fill the remaining area of the circle image with that background. Whereas with a png you can make the excess area of the circle be "transparent" leaving whatever is behind it show all around the circle.

Yes, you can do this with gif but the results vary on odd shapes. Usually you will end up with an ugly glow around the image.

Think of how important this is when you have several jpg images that include the background of the site in it and you want to then change the background image of the site, you'd have to change every one of those jpg's.

As Wayfarer mentioned, use png only as needed because they don't optimize as well as jpg.