Jump to content

Saving .png files


Recommended Posts

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

Link to comment
Share on other sites

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.

drakaan sig jan 2020.png

Link to comment
Share on other sites

IE is crappy anyway. Use Firefox. :-P

 

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.

Link to comment
Share on other sites

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! :P

 

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.

Link to comment
Share on other sites

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);

}

time-smaller.png
Link to comment
Share on other sites

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).

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

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

time-smaller.png
Link to comment
Share on other sites

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!

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

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.)

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...