Besides being a freely available format, PNG offers several practical advantages over GIF for the web designer, as follows:
Alpha Channels
Also known as a mask channel, an alpha channel is simply a way to create the appearance of partial transparency. Whereas GIF supports simple binary transparency--any given pixel can be either fully transparent or fully opaque--PNG allows up to 254 levels of partial transparency in between.
All three PNG image types--truecolor, grayscale and palette--can have alpha information, but it's most commonly used with truecolor images. Instead of storing three bytes for every pixel (red, green and blue), now four are stored: red, green, blue and alpha, or RGBA.
The alpha channel is the opacity channel. If a pixel has a value of 0% in its alpha channel, it is fully transparent (and, thus, invisible), whereas a value of 100% in the alpha channel gives a fully opaque pixel (traditional digital images). Values between 0% and 100% make it possible for pixels to show through a background like a glass (translucency) or retain their anti-aliasing no matter the background, effects not possible with simple binary (zero/full) transparency. It allows easy image compositing and, in HTML pages, inclusion of images with no background (especially if page background is multi-colour).
For example, in this website, I used PNG images with alpha-channel transparency for the header image and the three column box, so that it can rest on top of the “cloud” background while still showing rounded-corners and drop shadows.
Which browsers support PNG?
Almost all modern browsers fully support PNG images, including the alpha-channel transparency, such as Safari (all versions), Firefox (all versions), Opera (version 6 and higher), Netscape (version 6 and higher), and Mozilla (all versions).
However, Internet Explorer does not fully support PNG images, not until version 7. The previous versions (from 5.5 up to 6) do not support alpha-channel transparency, but it can still show the non-transparent part. It is still possible to show the transparent part, but you need to use a non-standard filter called AlphaImageLoader.
AlphaImageLoader
This is Internet Explorer proprietary filter, designed as workaround for displaying alpha-channel transparency in PNG images. They’re used in CSS, but they’re not part of any official CSS specification. In other words, they’re not a web standard.
No other browsers support AlphaImageLoader filter, not that they need it, so the CSS code for this filter must be hidden from other browser by using Conditional Comments.
AlphaImageLoader for Background Image
The code must be placed inside the head element, between <head>
and </head>
.<!-- This code for all browsers -->
<style type='text/css'>
.main {
background:url("http://photobucket.com/image.png") no-repeat;
}
</style>
<!-- This code for IE 5.5 – 6 AlphaImageLoader -->
<!--[if (gte IE 5.5)&(lt IE 7)]>
<style type='text/css'>
.main {
background: transparent none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=true, sizingMethod=scale, src='http://photobucket.com/image.png');
}
</style>
<![endif]-->
Then you can put below code inside body element, between <body>
and </body>
.<div class='main'>Hello</div>
AlphaImageLoader for Normal Image
There are several ways to do this, but the one I recommend is to use JavaScript to check your browser type and version, then use the filter when necessary. This way, you don’t have to add a bunch of codes for each PNG images.
HTML codes for the images:<img width="10" height="10" src="http://photobucket.com/image.png" onload="fixPNG(this)" />
<img width="10" height="10" src="http://photobucket.com/image.gif" />
<img width="10" height="10" src="http://photobucket.com/image.jpg" />
Example:
The JavaScript code below must be placed inside the head element, between <head>
and </head>
.<script type='text/javascript'>
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function fixPNG(myImage) {
if ((version >= 5.5) && (version < 7) && (document.body.filters)) {
var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "
var imgStyle = "display:inline-block;" + myImage.style.cssText
var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
myImage.outerHTML = strNewHTML
} //end if
} //end function
</script>
This script was created by Bob Osola.
External References
[-] Hide Full Post
[-] Hide Full Post
[+] Show Full Post
[+] Show Full Post
Thursday, 16 August 2007
PNG Transparency in Web Design
Posted by Chen at 14:57 | Comments (0)
Labels: IE, PNG, web design
Wednesday, 15 August 2007
Conditional Comments
This is an important feature as different browser types or versions process the same code in a different way, hence give different results. So, web developers may need to provide different codes for each browser types or version in order achieve the same or similar results. For example, IE version 6 or less does not support PNG image display by using the default IMG tag. Instead, it requires additional tag to make use of filter AlphaImageLoader. See more in PNG Transparency in Web Design article.
Code for IE<!--[if IE]>
Insert HTML code here.
This code can be processed only by IE (version 5+).
<![endif]-->
Code for non-IE<![if !IE]>
Insert HTML code here.
IE 5+ will not process this code.
Non-IE will process this code.
<![endif]>
This is recommended by Microsoft for when the content should be exposed to non-IE browsers. Microsoft acknowledges this method is not standardized markup for comments, intending these tags to be overlooked by other browsers and expose the content in the middle. Some web developers use an alternative technique for non-IE conditional comments in order to only use standardize markup.<!--[if !IE]>-->
Insert HTML code here.
IE 5+ will not process this code.
Non-IE will process this code.
<!--
IE Version
Conditional Comments can be used to assign specific codes for specific IE version. Example:<!--[if IE 7]>
You are using IE 7!
<![endif]-->
A combination of feature, operator, and/or value can be used to form a conditional expression, as shown in the following table.Item Example Comment IE [if IE] The only currently supported feature is the string "IE", corresponding to Internet Explorer. value [if IE 7] An integer or floating point numeral corresponding to the version of the browser. Returns a Boolean value of true if the version number matches the browser version. ! [if !IE] The NOT operator. This is placed immediately in front of the feature, operator, or expression to reverse the Boolean meaning of the expression. lt [if lt IE 5.5] The less-than operator. Returns true if the first argument is less than the second argument. lte [if lte IE 6] The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. gt [if gt IE 5] The greater-than operator. Returns true if the first argument is greater than the second argument. gte [if gte IE 7 The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. ( ) [if (IE 7)] Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. & [if (gt IE 5)&(lt IE 7)] The AND operator. Returns true if all subexpressions evaluate to true. | [if (IE 6)|(IE 7)] The OR operator. Returns true if any of the subexpressions evaluates to true. true [if true] Always evaluates to true. false [if false] Always evaluates to false.
External Reference
[-] Hide Full Post
[-] Hide Full Post
[+] Show Full Post
[+] Show Full Post
Posted by Chen at 12:34 | Comments (0)
Labels: IE, PNG, web design