Transparent images


Mac Metal Head
What do you guys use for transparent images when designing a site? Or so you even use them?

I hate GIFs, 256 colors is not enough and the binary transparency looks like crap.

PNGs are awesome, but IE(for win) doesn't support them, unless you use the AlphaImageLoader style hack. I call it a hack because it is ugly and is not really a viable option because it is a pain to code an alternate path if the user is using IE.


Digital Music Pimp
HateEternal. I had this dilemna.. I eventually settled on PNGs and at different times, i had either a CSS for GIFs for WinIE, or the hack. I agree it is ugly and unneccesary, but so is rebooting once a day to keep things running nicely, or anything else microsoft say you need to do.


[Bobs/Prog/Design:~] mod%
Staff member
Depends on what I'm using them for. Generally, if I can stay away from them I will. Otherwise, depends on the application.

For example...if I'm doing a drop shadow look (on a major DIV) on a site with a patterned background, I'll use a PNG-8 with an Alpha. IE simply "misses" it all together, so in IE there's no drop shadow.

This might help for IE 5.5+, but everything else it's kind of useless:


It all started at 3......
Keep away from PNGs. I have had more problems with clients complaining that they can't view them properly in their browsers than I care to think about. So you are basically left with two options: GIF or JPG, and if you are using any kind of colour gradients GIF is a waste of time too. Of course you can't use a transparent background with JPG so, hmmm, stuck!

Depending on the site, it might be easier just to include a background area to use in your JPG image and add it that way. If you are using stretchy tables this may not be possible, in which case you'll have to carefully construct it to make sure it works properly, but this can be kind of restrictive. If you have an example page of what you're trying to do, send us the URL so we can take a look.



Mac Metal Head
Lame, I'll just remember to do something else from now on. I don't really have an example now, just wondering in general.


this modern love
im the same, I avoid it at all costs. the ONLY time i use any transparency is importing pngs to flash.


when I'm using transparency, its pngs (which dont display properly in IE), and GIFs (which also dont display properly in IE). otherwise, i occasionally use the css opacity attribute.


Registered Penguin
I also use PNGs.

I figure that Microsoft will never get its act together about properly supporting the standard if people are already catering to their every mistake. I also make it easy to turn the transparency off (by providing replacement images) if the user hates their transparent PNGs being white.

A little explanation is good too.