Can someone talk me out of PNG, please! {New Info}

November 29th, 2006, 12:06 pm

I am a novice trying their first hand at a website for a friend, I must say the design is absolutely beautiful, it is cartoony and very colorful, the problem is when I "save on web" GIF format in photoshop, it looks good, tad blotchy but when I save in PNG-24 format it looks absolutely scrumsious!
I have designed this sight for a 800x600 resoultion, in GIF the average file size is 90 kb and takes 4 seconds to download at 256 kbps and the average file size in PNG-24 format is 200 kb and takes 9 seconds to download at 256 kbps.
To be honest I have never heard of the PNG file and have been doing crazy research on using this format for my website (A COMMERCIAL WEBSITE), I would love to stick with the simpler GIF format but it just doesn't give me that oomph like PNG-24 does, e.g. I have no borders on my site and the blue sky and clouds on my site blends with the white background and I have a blurry effect to add depth on my site but the GIF gives me this (just a tad) blotchy, cheapish look that is driving me bonkers.
I will be using NO transparency in PNG-24, so my question is will other browsers have a problem seeing my website?, if so how old/ versions? and if someone wants to talk me out of using PNG-24, tell me how can I clean up my GIF image?
NOTE: When I coverted my GIF format in photoshop to grey scale, it looked absolutely beautiful just as smooth as the PNG-24 format but obviously it wasn't in color. what is going on? please help!

[ATNO/TW]

November 29th, 2006, 12:37 pm

PNG is an acceptable web format, however at least IE6 has issues displaying PNG24. Not sure about IE7 - haven't tried it yet. And you are right, it is far superior quality.

The problem is gif you can only save it at a max of 256 colors, whereas PNG you have the full color spectrum to work with.

November 29th, 2006, 12:53 pm

Thankyou very much for responding! IE6 really? and this is with NO TRANSPARENCY. I have been testing JUST PNG images with NO TRANSPARENCY on IE6 and IE7 and had no problems, I was more worried about older versions, hmmmmm?....I need to do more testing, again thankyou.

[joebert]

November 29th, 2006, 1:35 pm

mono-tone images tend to be easier to get looking smooth than multi-tone images with the 256 color restriction.
There's less channels for the estimation process to work with while it's trying to reduce the number of palette entries to 256.

A grayscale conversion process actually reduces the number of colors in an image because "004400", "000044", and "440000" would convert to the same grayscale color of "444444".
In the process for reducing colors for a GIF, "004400", "000044", and "440000" are in different channels, they would be getting compared to other colors in the same channel as them.

Technicly, you've done two color reduction functions when converting the image to grayscale before GIF.

November 29th, 2006, 2:05 pm

Thanks, that answers my question about the greyscale

November 29th, 2006, 4:28 pm

yup, Internet Explorer versions 6 and earlier do not support PNG's alpha channel transparency , i would stick with GIF for now until PNG really takes over GIF which is in the new future

November 29th, 2006, 6:34 pm

Actually, IE6 DOES support alpha transparency in PNG images, you just have to use a IE filter in the style sheet.

Code: [ Download ] [ Select ]

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/image.png', sizingMethod='scale');

[joebert]

November 29th, 2006, 6:40 pm

How do you get that to work Spock ?

I haven't been able to get the suggestions of using that to work for me lately.

November 29th, 2006, 8:14 pm

All my css files are actually php files. At the top of the file, I have a function that checks the browser and returns the correct background-image string. For IE, it returns the filter tag, for all others it returns a standard url() tag.
I got this function from some website about a year ago. I don't remember which one.
Another feature it has is that it will fall back to a gif image if IE is older than 5.5 (That's when it started with png alpha support)

Code: [ Download ] [ Select ]

function PngTags($img){
    $msie='/msie\s(5\.[5-9]|[6-9]\.[0-9]*).*(win)/i';
    $msie5='/msie\s(5\.[0-4]*)';
    if( !isset($_SERVER['HTTP_USER_AGENT']) ||
        !preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
        preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT'])){
       $ret = "background: url(/images/".$img.");\n";
        if(stristr($_SERVER['HTTP_USER_AGENT'], "MSIE 5"))
        {
            $img = str_replace(".png", ".gif", $img);
            $ret = "background: url(/images/".$img.");\n";
        }
    } else {
        $ret = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/".$img."', sizingMethod='scale');\n";
    }
    return $ret;
}

1. function PngTags($img){
2.     $msie='/msie\s(5\.[5-9]|[6-9]\.[0-9]*).*(win)/i';
3.     $msie5='/msie\s(5\.[0-4]*)';
4.     if( !isset($_SERVER['HTTP_USER_AGENT']) ||
5.         !preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
6.         preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT'])){
7.        $ret = "background: url(/images/".$img.");\n";
8.         if(stristr($_SERVER['HTTP_USER_AGENT'], "MSIE 5"))
9.         {
10.             $img = str_replace(".png", ".gif", $img);
11.             $ret = "background: url(/images/".$img.");\n";
12.         }
13.     } else {
14.         $ret = "filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/".$img."', sizingMethod='scale');\n";
15.     }
16.     return $ret;
17. }

to use this, you simply do something like this:

Code: [ Download ] [ Select ]

#loading {
    position: absolute;
    top: 200px;
    left: 326px;
    width: 300px;
    height: 160px;
    <?PHP echo PngTags('loading.png');?>
    z-index: 1000;
}

1. #loading {
2.     position: absolute;
3.     top: 200px;
4.     left: 326px;
5.     width: 300px;
6.     height: 160px;
7.     <?PHP echo PngTags('loading.png');?>
8.     z-index: 1000;
9. }

also note, that if you use php based css files, you need to add the proper content-type header:

Code: [ Download ] [ Select ]

header("content-type: text/css");

IE is particularly sensitive about this.

November 30th, 2006, 3:58 am

hey ScienceOfSpock, im starting to think your objective is to disagree with people intentionally.

November 30th, 2006, 10:24 am

Actually, my objective is to provide as much correct information as I can. What you posted was incorrect. I was simply providing accurate information. It's nothing personal.

November 30th, 2006, 3:17 pm

lol your information is far beyond accurate, you just like to disagree.
If you want to help someone, give them the correct path to take, in this case, it is best NOT to use PNG on a website AT ALL, because you will have some % of people that will NOT see your image with some computers, browsers, etc.
not worth loosing business even if its 1% for a crispier graphic.

hey joebert, don't use extra junk code in your work just to preview png files, stick with gif, believe me it will do you justice

The ability to simplify means to eliminate the unnecessary so that the necessary may speak. ~Hans Hofmann

November 30th, 2006, 4:59 pm

Did you read what I wrote at all? That code outputs the proper css code based on the browser. If the browser doesn't support png, IT OUTPUTS A GIF IMAGE.

How is that "far beyond accurate?"

Lets run down the thread real quick:

Cadalyst asked basically if it was ok to use PNG on the web.

ATNO/TW said that PNG is an acceptable web format, but IE 6 had trouble displaying it with transparency.

Later on, YOU stated explicitly: "Internet Explorer versions 6 and earlier do not support PNG's alpha channel transparency"

I corrected you, because in fact, IE6 and IE5.5 BOTH support alpha transparency in PNG images.

Joebert asked how I got it to work, and I told him.

Then you come back and claim that my info is "far from accurate" and my code is junk.

Seriously, what the hell do you have against me?

November 30th, 2006, 5:21 pm

jargon



The ability to simplify means to eliminate the unnecessary so that the necessary may speak. ~Hans Hofmann

December 1st, 2006, 12:52 am

Did you try jpegs , Quality 12?