Saving .png files

[Fabadoom]

According to wikipedia the transparent background for .png files can be made to be compatible with IE browser pre IE 7.0 by doing the following..

"suitable PNGs can be generated or converted by setting the Mode to 'Indexed' rather than 'RGB'"

Is it possible to set the mode of a .png in paint.net ?

regards

Steve C

[Myrddin]

Not that I'm aware of, as far as I know customising the saving of .pngs will be something of a future version and right now saving a .png just saves as is.

[Yata]

I remember Rick saying that Paint.NET doesn't support that when someone asked in General Discussion.

[drakaan]

I remember Rick saying that Paint.NET doesn't support that when someone asked in General Discussion.

Yep...I think he specifically said that Paint.NET doesn't support *any* indexed color formats...which is not to say that there couldn't be a plugin to convert to indexed color format on save...kind of a "Save as indexed PNG" plugin.

I don't think that there's currently a way to do it, though. If you want pre IE7 transparency, you need to save as GIF and not worry about variable alpha. It's not the file formats' fault, it's IE's. Besides which, an indexed PNG with one-bit alpha mask will look pretty much exactly like its GIF counterpart.

[david.atwell]

IE is crappy anyway. Use Firefox. :-P

[Yata]

It doesn't matter if he uses it, it matters who ever uses it to view the .png.

[david.atwell]

It doesn't matter if he uses it, it matters who ever uses it to view the .png.

Don't confuse me with the facts!

[Deborah]

If you are comfortable using CSS, there's a filter you can use in IE6 that will display a png with the proper variable transparency:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagepath/yourImage.png)

This filter works only in IE and puts the png in a special layer between the foreground and background. It must be put onto a containing tag with a height and/or width.

To use it, add this code to your page in place of an tag.

Change imagePath/yourImage.png to your image

Change the height and width to the height and width of your image.

.pngImage1 {

background-image: url(imagepath/yourImage.png);

height: 500px; width:500px;

}

/* IE 6 only */

*html .pngImage1 {

background-image: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagepath/yourImage.png);

}

[usedHONDA]

^^There's supposed to be a plugin for IE that does the equivalent of your CSS^^

[Crazy Man Dan]

I've heard of IE7.js that loads the Alpha of a PNG, but I've never tried implementing it.

As for that CSS snippet, I was unable to get any background image to be displayed using that statement. Perhaps it's because I'm running a stand-alone version of IE6 instead of having it installed on my computer (IE7 took over long ago).

[Deborah]

It can be quite picky about the path to the image - I had a problem when I had a / in front.

I have IE6 installed. If you want to post a link, I can check it.

Edit: I found a plugin for IE - I haven't gotten it to work yet, but it seems to parse through the page/css and insert the same filter tag I'm using - cool

[Crazy Man Dan]

Right now, the image is in the same directory as the CSS file.

If you'd like to take a look, the page is here:

http://cmdsketchpad.com/bbtest/

And the CSS here:

http://cmdsketchpad.com/bbtest/resource/structure.css

This is a test using BoltBait's site, as he uses PNGs on his front page. The double Double-Six Dominoes listing is for testing purposes, the top one being an IMG tag and the bottom being a div with the same image set as the background. The class leftboximg sets the width and height, and the id domimage sets the background.

The IE Developer Toolbar shows that the box is indeed there and is of the proper dimensions, and the filter attribute is set to the specified progid call. I've never used this filter before, so I'm not sure what to troubleshoot.

Cheers!

[Deborah]

Your image seems to be at resource/dominoes.png.

Try (src=resource/dominoes.png)

I tried that in the IE DOM Explorer and it worked fine.

[Crazy Man Dan]

The image is in the resource folder, but so is the CSS file calling the image, so, in keeping with usual path behavior, I assumed no directory was needed. Is the filter executed post-include to where the path would need to be relative to the HTML file instead of the CSS file?

I have changed the path to resource/dominoes.png, so if you would be so kind, you can check again and see if any change has occurred. (It still is not displayed on my IE6.)

[Deborah]

Yup - It now shows up for me with the proper transparency.

I don't know when the filter is executed, but here's the MSDN page for it:

http://msdn2.microsoft.com/en-us/library/ms532969.aspx

[Crazy Man Dan]

Well, thank you for your assistance!

Maybe BoltBait will be happy again...

[Deborah]

no problem

[BoltBait]

Wow. That's cool. Thanks!