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

  • CADALYST
  • Born
  • Born
  • No Avatar
  • Joined: Nov 29, 2006
  • Posts: 4
  • Status: Offline

Post 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!
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 29th, 2006, 12:06 pm

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post 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.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • CADALYST
  • Born
  • Born
  • No Avatar
  • Joined: Nov 29, 2006
  • Posts: 4
  • Status: Offline

Post 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
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post 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.
Strong with this one, the sudo is.
  • CADALYST
  • Born
  • Born
  • No Avatar
  • Joined: Nov 29, 2006
  • Posts: 4
  • Status: Offline

Post November 29th, 2006, 2:05 pm

Thanks, that answers my question about the greyscale
  • littlephoenix
  • Graduate
  • Graduate
  • User avatar
  • Joined: Oct 31, 2006
  • Posts: 149
  • Status: Offline

Post 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 ;)
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Jul 06, 2004
  • Posts: 1890
  • Loc: Las Vegas
  • Status: Offline

Post 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: [ Select ]
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/image.png', sizingMethod='scale');
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post 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. :scratchhead:
Strong with this one, the sudo is.
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Jul 06, 2004
  • Posts: 1890
  • Loc: Las Vegas
  • Status: Offline

Post 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: [ 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: [ 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: [ Select ]
header("content-type: text/css");

IE is particularly sensitive about this.
  • littlephoenix
  • Graduate
  • Graduate
  • User avatar
  • Joined: Oct 31, 2006
  • Posts: 149
  • Status: Offline

Post November 30th, 2006, 3:58 am

hey ScienceOfSpock, im starting to think your objective is to disagree with people intentionally. :lasergun:
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Jul 06, 2004
  • Posts: 1890
  • Loc: Las Vegas
  • Status: Offline

Post 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.
  • littlephoenix
  • Graduate
  • Graduate
  • User avatar
  • Joined: Oct 31, 2006
  • Posts: 149
  • Status: Offline

Post 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
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Jul 06, 2004
  • Posts: 1890
  • Loc: Las Vegas
  • Status: Offline

Post 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?
  • littlephoenix
  • Graduate
  • Graduate
  • User avatar
  • Joined: Oct 31, 2006
  • Posts: 149
  • Status: Offline

Post November 30th, 2006, 5:21 pm

jargon



The ability to simplify means to eliminate the unnecessary so that the necessary may speak. ~Hans Hofmann
  • fallen faith
  • Newbie
  • Newbie
  • User avatar
  • Joined: Nov 30, 2006
  • Posts: 5
  • Status: Offline

Post December 1st, 2006, 12:52 am

Did you try jpegs , Quality 12?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 1st, 2006, 12:52 am

Post Information

  • Total Posts in this topic: 35 posts
  • Users browsing this forum: No registered users and 106 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.