Transparent images using the Portable Network Graphic (PNG) format
In experimenting with logo designs using a png file format, I discovered that Internet Explorer is not fully compatible with this format, to wit, it fails the transparent image test. FireFox and other brothers do not seem to have this issue, and, hopefully, Internet Explorer will resolve this in the future.
The first question you might ask is that since some browsers do not support transparent PNG files, why bother? Why not stick to GIFs, which are supported by all browsers? Simple answer to that is color depth; GIFs are limited to 256 colors while PNGs have a color range in the millions. You can design some interesting logos and effects using a PNG that cannot be attained with a GIF. There is one other downside to PNG files - they don't support animation.
That being said, how can you fix a PNG image to be transparent and be treated as such by Internet Explorer. Still one more downside...this only works for I.E. beginning with vrsion 7. Simple solution: paste it on to a background that has had its native opacity set to zero, thus making it transparent. Whoa! "How do you do that?" you ask.
For graphic development I use Paint Shop Pro. When you open a new project, there is a task bar on the right that can be used to set the opacity of the background. Paste your logo on top, save the file and upload to your site. Done!
Open up the original transparent PNG image using Paint Shop Pro:
Open a new canvas with a white background:
Change the background opacity to zero using the slider on the layers window:
Paste your original transparent image onto the new canvas as a new layer:
Save your file and upload.
296KB
175KB
243KB
346KB