highquality transparency?

[tiamat2012]

Hello all,

I've created three images that I'm going to be using for buttons (for rollover and such), and they look exactly as I want them as a png or jpg, but I need the background to be transparent. I know gifs can do this, which I'm able to do, but the quality is poor and its very speckled (I have gradients in the picture).

is there a format that is high-quality, web-oriented and can support transparency?

-Kerry

 

[kandsuk]

PNGs are great with transparencies; almost lossless quality. The only down side to PNGs are the varying degrees of support from different web browsers. View a PNG with transparency in Firefox and you'll think "Wow!", but view the same image file in IE (at least with IE6 - could be different with IE7 when released) and it looks terrible.

Here's a list of web browsers and their degrees of support for PNG files:

http://www.libpng.org/pub/png/pngapbr.html

_____________________________
(ignore my "Vendor" status... I clicked the wrong thing when I signed up and can't figure out how to change it!)

 

[blueark]

PNGs do the trick. The problem isn't the format, just the fact that IE doesn't render it correctly. All's not lost however:

http://www.alistapart.com/stories/pngopacity/

 

[tiamat2012]

Thank you both, I've now switched to PNG and nearly gotten it right.

It works for Firefox, as kandsuk said, but looks quite bad in IE.

So, I tried to follow your link blueark, which all seemed to work well, the several examples I saw worked, but it only half works and only when I put it inside of an img tag.

this is my code, you can see it on the website at

http://kerryj.awardspace.com/index.html

in IE explorer 5.5 and up

<a href="index.html">
<img src="images/UNHome.png" class="menu"  style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/UNhome.png');">
</a>

I will end up putting it in a class but just trying to get the basics to work. Notice that it gives a broken image and the actual picture.

I tried doing just an anchor and just a div, neither worked.

any ideas?

-Kerry