About png pictures

[maikki]

Hi all

im creating a web page and im using there some pictures as a navigation buttons.
i created this pictures in GIMP editor and set them transparent background color (or part of a color spectrum) and here is the problem:

mozilla and opera can display this images with the transparent background so everything is ok, but IE cant (dont know why). Do anybody know WHY?

thx for your replies and maybe advices :-)

[Charles]

Do anybody know WHY?Because MSIE is very bad.

[maikki]

thx u help me a lot :mad:

[kaurotu]

Well, Charles is right on this...

Although it would be nice if we could see a link to these images and your code.

[vmatos]

Some HTML text editors are not compatible with PNG images, in other words they do not allow the image to be transparent, you'll have to use gifs.


Octopus Project - Web Design
http://octopus-project.com (http://octopus-project.com/)
Dominican Republic

[Robert Wellock]

You should use PNG-8 instead of GIF and PNG has been supported since version 4.xx browsers.

Without looking at the page it's hard to tell what you did when saving.

[tgrk35]

Transparencies in PNGs don't work in IE period.
It's a problem with IE6 and I'm THINKING they corrected it in IE7, but I wouldn't be surprised if they didn't. If you want to use transparencies, go with GIFs for now :(.

[maikki]

You should use PNG-8 instead of GIF and PNG has been supported since version 4.xx browsers.

Without looking at the page it's hard to tell what you did when saving.

I have used PNG-8. well I do one bad thing a start it with javascript telling that webpage is optimized for mozilla and opera and not for IE anymore

and those pages are

skauting.czweb.org/skauti_black
skauting.czweb.org/skauti_blue
skauting.czweb.org/skauti_color

[number7]

And what is the difference between PNG-8 and PNG is PNG-8 8 bit format ?

[matt.chatterley]

IE does not support transparent PNG files properly as yet - although this is apparently to be included in IE7. There is a Microsoft Support KB article on this which suggests a work around for IE6:

http://support.microsoft.com/kb/294714

[kocisz]

The problem is the alpha channel... But there is a way (several ways actually) to get around it, although not perfect or an easy one...

Here's a website that deals with the issue, I think they did a good job of it...

http://koivi.com/ie-png-transparency/

[natsegal]

From what I can see, the main problem is that PNG is not compatible cross-platform. IMHO, you're better off working with GIF images.

Nathan

[kocisz]

...you're better off working with GIF images...

There's a world of difference between the quality of GIFs and PNGs. If I had to use transparency other than PNG I would rather go with flash. But that's just my humble opinion...

[Robert Wellock]

You are NOT better off working with GIF at all unless you want animation. PNG-8 is far superior to GIF in several respects and nearly always produces smaller file sizes. In general, a graphic compressed with PNG-8 will be 10-30% smaller than the same graphic saved as a GIF and yes PNG-8 is 8-bit.

[thedoofus]

Hi -

I don't know if the technique used in the link given above is the same (crappy internet won't let me open the page). But I found the below tutorial useful and easy to understand:

http://www.designmeltdown.com/chapters/ColorLogo/

Good luck - and don't give up on the PNG's they are far too beautiful!

Helen

[the tree]

You are NOT better off working with GIF at all unless you want animation.For a proper discussion on which file format to chose for images on the web: http://web-building.crispen.org/formats/index.html
If you want IE support then your best bet might be to use PNGs, but avoid transparency.

[kocisz]

But that's what all the fuss is all about.. transparency. If not for that I would forget about both .gif and .png and just use .jpg

And on that cheerful note...
I still think that the issue with MSIE not supprting thaplha channel for .png is another way of Gates showing that he can do something to piss everybody else off...

[AmazingAnt]

I'd say you could try doing something a little odd. You could create two versions of the file. a .gif, and a .png. Then have a server-side language like PHP pick the .gif for IE6- and the .png for everything else. Javascript could be used to pick the image used as well. It would take up a little more space, but until you find a way to get png transparency working with IE6-, it's better than nothing.

[Ascendancy]

You would want a PNG for less file sizes, if I am correct. (PNG<GIF?)

[AmazingAnt]

Not only are they smaller, but in most cases, PNG files look better than GIF files do.

[Ascendancy]

That's why whenever I save a graphic for the web I save it as a PNG, unless it's an actual photgraph, which means I must use a JPEG. :(

[toicontien]

There seems to be a lot of confusion about PNGs here.

* 8-bit PNGs with transparency are supported on all 4.0 and newer browsers.

* 24-bit PNGs are supported on all 4.0 and newer browsers with one exception: Internet Explorer doesn't natively support transparent 24-bit PNGs. Internet Explorer DOES support transparency in 8-bit PNGs. I'll get to why IE doesn't "natively" support 24 bit transparency in a second.

* 8-bit PNGs support the same transparency as GIFs: It's binary transparency. It's either fully see-through or fully opaque, and can take a matte color just like GIFs.

* 24-bit PNGs are known as alpha transparent graphics because -- I believe -- they have an additional 8-bit layer that determines a pixel's transparency. I want to say a transparent 24 bit PNG is actually a 32 bit graphic: 8 bits for Red, 8 bits for Green, 8 bits for Blue, and another 8 bits for how transparent the pixel is.

* 8-bit PNGs are often 10 - 30% smaller in file size than a GIF counterpart.

* 24-bit PNGs are lossless most times. JPEGs are smaller in file size, but are lossy. Programs like The Gimp (http://www.gimp.org/) can save lossy PNGs, which further reduces the file size of 24 bit PNGs. But if a PNG is lossy, I don't know if it supports transparency or not.

You can get alpha transparency to work with Internet Explorer versions 5.5 and 6. IE7 does indeed natively support alpha transparent PNGs.

Enabling support for alpha transparent PNGs in Internet Explorer (http://www.webdeveloper.com/forum/showthread.php?t=125373#post655131)

It requires some hacks and the use of an IE-only CSS property, but it can be done. A couple examples that use 24-bit PNG transparency is the link to my MyGoodFriends profile in my signature, and Motortopia.com (http://www.motortopia.com/).

[Vairkjosa]

We just tried a 32bit png with IE7 and it had a background. IE7 didn't even want to open the html file. When it did it garbled the page at best.
The png was done with photoshop 7. I did however use the workaround and now the png displays in all the browsers IE6, FFx, Opera.

I say 32bit because thats what the properties of the file report as. :rolleyes:

This is the one I used.
http://web-building.crispen.org/formats/index.html

[toicontien]

What version of Photoshop do you have? I've used 7.0 and CS2 at work, both have saved alpha transparent PNGs just fine.

[Vairkjosa]

This particular one was done in 7.0.1 and recently updated itself. There is nothing wrong with the png file. Normally I use gifs. What happened this time is I'm using an editor, NVU and everything was looking great in FFx and Opera. Our regular browsers. Then when I went to view in IE 6 everything had blue backgrounds the pngs that is.
It's entirely possible this is part of the problem.
1. My page background is a .gif
Anyway I had to use a behaviour file to put blank.gifs behind the pngs. Now everything looks fine in the test page. :rolleyes:
Go figure! Why in this case did the pngs not display properly in IE? I haven't got a clue since everyone is saying they should.

Oh! and something I figured out kind of, the code in the .htc behaviour file has to be in path of the src, not in the src itself. Maybe I'm notsaying this right.
I was trying to put the behaviour code in the page itself, thats not where it goes.

[toicontien]

PNGs work properly in Internet Explorer 7. Alpha transparency is only supported if you use the AlphaImageLoader filter in Internet Explorer versions 5.5 and 6. I thought you said IE7 didn't show the PNG file right. You mentioned in your previous post that you viewed it in IE6 and the PNGs didn't look right -- which they shouldn't -- but IE7 should display them fine.

[Ascendancy]

My school has IE6 I think, and the PNGs show like a blueish background instead of clear, which is probably what you are talking about. Anyways, what file type shows the backgrounds as clear even in IE6?

[toicontien]

8-bit PNGs with transparency and GIFs with transparency are supported cross browser. The bottom line is, if the graphic will be embedded on the page using the IMG element, or needs to repeat a specific way, use GIF or PNG8. If the graphic needs alpha transparency and it would look OK if the graphic were stretched to the boundries of the block to which it is applied, you can use PNG24 with transparency cross browser using the IE-Win hack I eluded to above.

[Philbert]

Hi guys, thanks for this discussion. Perhaps you can advise me on a tricky problem.

I have a bunch of transparent pngs that I use as form submit buttons. They of course aren't transparent in IE6.

I found a javascript hack that works for regular images:
http://www.mywebsite.force9.co.uk/png/png-alpha-transparency.htm

Regrettably, this hack doesn't work for form submit buttons, which are displayed with the <INPUT TYPE="IMAGE" tag, not with a regular image tag.

To complicate matters further, the background color behind the buttons is dynamically controlled by the user, and this can not be changed, for reasons that are long winded and not relevant in this thread.

Does the fact that the background color is unknown mean I can't use GIF either? Or could I convert all my png buttons to gifs?

I'm stuck. The buttons look great, except in the Net's most popular browser.

The developer I bought the button builder app from kindly neglected to tell me about this weakness of IE6 before I bought his button builder, so I have a lot of buttons done and installed. They now all need to be fixed, changed, deleted, done over, something.

The best I can think of at the moment is to go back to real form buttons, but that's gonna look unacceptably clunky.

I've been reading this thread and others, and am aware of some of the javascript/php hacks, but they all seem unreliable, and ridiculously complicated. And I'm a perl programmer.

It's amazing to be having this discussion in 2007, eh?

Anyway, I'm very open to new ideas if anyone has one they care to offer.

Thanks much in advance, any replies are gratefully appreciated.

[Philbert]

I converted one of my png buttons to transparent gif.

It looks pretty decent IF the background color of the page is the same as the color made transparent in gif.

Otherwise, looks pretty crappy, with garbage artifacts around edges of gif. Not ready for prime time.

So, it looks like transparent gifs won't work in my situation, where the background color of page is dynamic and beyond my control.

[drallab]

Below is some javascript I found googling one day. I can't remember which site I found this on, but it works great and it can be modified for numerous browser specific uses.

The first part is the Browser Detect that detects numerous browsers:function BrowserDetect() {
var ua = navigator.userAgent.toLowerCase();

// browser engine name
this.isGecko = (ua.indexOf('gecko') != -1 && ua.indexOf('safari') == -1);
this.isAppleWebKit = (ua.indexOf('applewebkit') != -1);

// browser name
this.isKonqueror = (ua.indexOf('konqueror') != -1);
this.isSafari = (ua.indexOf('safari') != - 1);
this.isOmniweb = (ua.indexOf('omniweb') != - 1);
this.isOpera = (ua.indexOf('opera') != -1);
this.isIcab = (ua.indexOf('icab') != -1);
this.isAol = (ua.indexOf('aol') != -1);
this.isIE = (ua.indexOf('msie') != -1 && !this.isOpera && (ua.indexOf('webtv') == -1) );
this.isMozilla = (this.isGecko && ua.indexOf('gecko/') + 14 == ua.length);
this.isFirefox = (ua.indexOf('firefox/') != -1 || ua.indexOf('firebird/') != -1);
this.isNS = ( (this.isGecko) ? (ua.indexOf('netscape') != -1) : ( (ua.indexOf('mozilla') != -1) && !this.isOpera && !this.isSafari && (ua.indexOf('spoofer') == -1) && (ua.indexOf('compatible') == -1) && (ua.indexOf('webtv') == -1) && (ua.indexOf('hotjava') == -1) ) );

// spoofing and compatible browsers
this.isIECompatible = ( (ua.indexOf('msie') != -1) && !this.isIE);
this.isNSCompatible = ( (ua.indexOf('mozilla') != -1) && !this.isNS && !this.isMozilla);

// rendering engine versions
this.geckoVersion = ( (this.isGecko) ? ua.substring( (ua.lastIndexOf('gecko/') + 6), (ua.lastIndexOf('gecko/') + 14) ) : -1 );
this.equivalentMozilla = ( (this.isGecko) ? parseFloat( ua.substring( ua.indexOf('rv:') + 3 ) ) : -1 );
this.appleWebKitVersion = ( (this.isAppleWebKit) ? parseFloat( ua.substring( ua.indexOf('applewebkit/') + 12) ) : -1 );

// browser version
this.versionMinor = parseFloat(navigator.appVersion);

// correct version number
if (this.isGecko && !this.isMozilla) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('/', ua.indexOf('gecko/') + 6) + 1 ) );
}
else if (this.isMozilla) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('rv:') + 3 ) );
}
else if (this.isIE && this.versionMinor >= 4) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
}
else if (this.isKonqueror) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('konqueror/') + 10 ) );
}
else if (this.isSafari) {
this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('safari/') + 7 ) );
}
else if (this.isOmniweb) {
this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('omniweb/') + 8 ) );
}
else if (this.isOpera) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera') + 6 ) );
}
else if (this.isIcab) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab') + 5 ) );
}

this.versionMajor = parseInt(this.versionMinor);

// dom support
this.isDOM1 = (document.getElementById);
this.isDOM2Event = (document.addEventListener && document.removeEventListener);

// css compatibility mode
this.mode = document.compatMode ? document.compatMode : 'BackCompat';

// platform
this.isWin = (ua.indexOf('win') != -1);
this.isWin32 = (this.isWin && ( ua.indexOf('95') != -1 || ua.indexOf('98') != -1 || ua.indexOf('nt') != -1 || ua.indexOf('win32') != -1 || ua.indexOf('32bit') != -1 || ua.indexOf('xp') != -1) );
this.isMac = (ua.indexOf('mac') != -1);
this.isUnix = (ua.indexOf('unix') != -1 || ua.indexOf('sunos') != -1 || ua.indexOf('bsd') != -1 || ua.indexOf('x11') != -1)
this.isLinux = (ua.indexOf('linux') != -1);

// specific browser shortcuts
this.isNS4x = (this.isNS && this.versionMajor == 4);
this.isNS40x = (this.isNS4x && this.versionMinor < 4.5);
this.isNS47x = (this.isNS4x && this.versionMinor >= 4.7);
this.isNS4up = (this.isNS && this.versionMinor >= 4);
this.isNS6x = (this.isNS && this.versionMajor == 6);
this.isNS6up = (this.isNS && this.versionMajor >= 6);
this.isNS7x = (this.isNS && this.versionMajor == 7);
this.isNS7up = (this.isNS && this.versionMajor >= 7);

this.isIE4x = (this.isIE && this.versionMajor == 4);
this.isIE4up = (this.isIE && this.versionMajor >= 4);
this.isIE5x = (this.isIE && this.versionMajor == 5);
this.isIE55 = (this.isIE && this.versionMinor == 5.5);
this.isIE5up = (this.isIE && this.versionMajor >= 5);
this.isIE6x = (this.isIE && this.versionMajor == 6);
this.isIE6up = (this.isIE && this.versionMajor >= 6);

this.isIE4xMac = (this.isIE4x && this.isMac);
}
var browser = new BrowserDetect();Second Part is for detection which browser you want. In this case, setting a variable to display PNGs correctly. pngAlpha for IE 6 or lower and pngNormal for other browsers that correctly display PNGs:if ((browser.isIE55 || browser.isIE6up) && browser.isWin32) {
var pngAlpha = true;
// else, if the browser can display PNGs normally, then do that
} else if ((browser.isGecko) || (browser.isIE5up && browser.isMac) || (browser.isOpera && browser.isWin && browser.versionMajor >= 6) || (browser.isOpera && browser.isUnix && browser.versionMajor >= 6) || (browser.isOpera && browser.isMac && browser.versionMajor >= 5) || (browser.isOmniweb && browser.versionMinor >= 3.1) || (browser.isIcab && browser.versionMinor >= 1.9) || (browser.isWebtv) || (browser.isDreamcast)) {
var pngNormal = true;
}And now to display the PNG correctly:function pngFix(strID, strPath, intWidth, intHeight) {
if (pngAlpha)
{
pngImage = '<img src="clearpixel.gif" id="' + strID + '" height=' + intHeight + ' width=' + intWidth + ' style=" filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=\''+strPath+'.png\', sizingMethod=\'scale\')">';
} else if (pngNormal) {
pngImage = '<img id="' + strID + '" src="'+strPath+'.png" width="'+intWidth+'" height="'+intHeight+'" border="0" />';
} else {
pngImage = '<img id="' + strID + '" src="'+strPath+'.png" width="'+intWidth+'" height="'+intHeight+'" border="0" />';
}
return pngImage;
}pngFix is the function that will be placed in the HTML page.

The function was originally used in a div tag, but I modified it so that an img tag could be used. The clearpixel.gif is a 1x1 clear pixel image.

The variables in the pngFix function are as follows:
strID = Optional ID for the object
strPath = Path of the image
intWidth = Width of the image
intHeight = Height of the image

HTML Page:
<HTML>
<HEAD>
<script language="javascript">
INSERT ABOVE JAVASCRIPT CODE HERE
</script>
</HEAD>
<BODY>

<script language="javascript">pngFix("", "YOURPNG", WIDTH, HEIGHT)</script>

</BODY>
</HTML>

[Philbert]

Hey drallab,

Thanks for the detailed code posting, that should be helpful to many.
The following code comes from this site, which seems helpful and clear:
http://homepage.ntlworld.com/bobosola/index.htm

You need a tranparent pixel gif here as well. This code works with image maps, and with images displayed with the input tag, (such as you'd use when using images as form submit buttons).


I have this working, with one exception, which I'll describe in next post.

/*

Correctly handle PNG transparency in Win IE 5.5 and 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2005.

Use in <HEAD> section with DEFER keyword
wrapped in conditional comments thus:

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

This extended version includes imagemap and input image functionality.
It also requires a 1px transparent GIF.

Using absolute URL's should be Ok.

*/
var strGif = "transparentpixel.gif"
var strFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader"
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
if (img.useMap)
{
strAddMap = "<img style=\"position:relative; left:-" + img.width + "px;"
+ "height:" + img.height + "px;width:" + img.width +"\" "
+ "src=\"" + strGif + "\" usemap=\"" + img.useMap
+ "\" border=\"" + img.border + "\">"
}
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:" + strFilter
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
if (img.useMap) strNewHTML += strAddMap
img.outerHTML = strNewHTML
i = i-1
}
}

for(i=0; i < document.forms.length; i++) findImgInputs(document.forms(i))
}

function findImgInputs(oParent)
{
var oChildren = oParent.children
if (oChildren)
{
for (var i=0; i < oChildren.length; i++ )
{
var oChild = oChildren(i)
if ((oChild.type == 'image') && (oChild.src))
{
var origSrc = oChild.src
oChild.src = strGif
oChild.style.filter = strFilter + "(src='" + origSrc + "')"
}
findImgInputs(oChild)
}
}
}

[Philbert]

Ok, we're making progress. I've almost got the solution I need, except for one thing.

I'm using the code in the post above. It works great if (and only if) I put the javascript file and the tranparent gif in the same directory as the web page.

Regrettably, this is far too limiting for my setup. I need to be able to store the javascript file and gif in a central location, and call them from pages all over the server.

Obviously it's a path issue. I must be having a stoopid attack, can't quite seem to get it.

I've tried using absolute URL's when calling the javascript file from the pages, and the gif from the js file. No go.

I'm handy with perl, but not javascript, and so am scratching my head.

If anyone sees the solution, I'd be ever so grateful for your tips.