As Web Design online becomes more sophisticated and IE becomes nicer we Designers are able to do cooler and cooler things.
So let’s talk Transparency.
I remember there was a time I depended solely on GIF files for my transparency. I was left unsatisfied because the edges were always rough and while it did have value in terms of being an arrow in the Web Design quiver, using GIF for cool stuff just didn’t make sense.
Enter PNG
PNG (pronounced ping) files are a really useful alternative to GIF and you can do alot with PNGs for you transparency needs.
According to Wiki
Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license. It is pronounced /ˈpɪŋ/ [1] or spelled out as P-N-G. The PNG acronym is optionally recursive, unofficially standing for “PNG’s Not GIF”.[2]
PNG supports palette-based (palettes of 24-bit RGB or 32-bit RGBA colors), greyscale, RGB, or RGBA images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK).
PNG files nearly always use file extension “PNG” or “png” and are assigned MIME media type “image/png”; it was approved for this use by The Internet Engineering Steering Group on October 14, 1996.[3]
The Fly in the Transparent Ointment
As always in Web Design there are at times problems especially implementing technologies into your “rad” design – PNG is no different. Yes, I just said rad. The problem is IE. No surprise. So in order to get PNGs to work you need to add some lines of code to your design in order to get it to work.
According to microsoft
If you browse to a Web page that contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may appear to be gray rather than transparent. Web developers who work with PNG files can use the AlphaImageLoader filter…
Below I have gathered links that would be useful to your PNG journey. Please leave me a line if I left any out. I prefer Twin Helix.
- PNG transparency test
Examine the test images in the left column below. To determine how your browser handles PNG transparency, find the images on the … - IE PNG Fix – TwinHelix
This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! … - Digital Web Magazine – Creative Use of PNG Transparency in Web Design
May 28, 2007 … Using PNG’s transparency alpha channel, we can emulate Wilson’s style …. Creating an image in Photoshop for use as a transparent PNG mask … - PNG in Windows IE
This site is all about a JavaScript-based PNG fix for Internet Explorer 5.5 and 6 on Windows. The fix allows IE to properly render PNG alpha transparency. … - Fun with Transparent PNG Images
Transparent PNG images have been always been a great tease to web designers. This tutorial will show you a few tricks to working with transparent PNG files. … - PNG Files Do Not Show Transparency in Internet Explorer
If you browse to a Web page that contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may … - PNG Transparency in Internet Explorer – Solutions by PC Magazine
It didn’t work out of the box, but Microsoft created a work-around. Here’s a technique to simplify it. - GIF, JPEG or PNG?
You make a lovely transparent PNG or GIF image for your website, and you go along … Save it as a transparent PNG (one color transparency) and set the … - PNG-24 Alpha Transparency
A PHP solution to fixing the display of PNG-24 images with alpha transparency in Microsoft Internet Explorer. - PNG Behavior (WebFX)
It is of course our all beloved PNG format I am talking about. This format can have an 8 bit alpha channel which allows the images to be semi transparent. …
Simon is a Product Designer and Front End Dev with over 20 years of experience. He started as a graphic designer and illustrator coding his first website in 1996. He has worked with brands like Publix, Microsoft, and Discovery Channel.
