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

  • CADALYST
  • Born
  • Born
  • CADALYST
  • Posts: 4

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • CADALYST
  • Born
  • Born
  • CADALYST
  • Posts: 4

Post 3+ Months Ago

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
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

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.
  • CADALYST
  • Born
  • Born
  • CADALYST
  • Posts: 4

Post 3+ Months Ago

Thanks, that answers my question about the greyscale
  • littlephoenix
  • Graduate
  • Graduate
  • User avatar
  • Posts: 147

Post 3+ Months Ago

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
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

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
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

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:
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

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
  • Posts: 147

Post 3+ Months Ago

hey ScienceOfSpock, im starting to think your objective is to disagree with people intentionally. :lasergun:
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

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
  • Posts: 147

Post 3+ Months Ago

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
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

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
  • Posts: 147

Post 3+ Months Ago

jargon



The ability to simplify means to eliminate the unnecessary so that the necessary may speak. ~Hans Hofmann
  • fallen faith
  • Newbie
  • Newbie
  • User avatar
  • Posts: 5

Post 3+ Months Ago

Did you try jpegs , Quality 12?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Quote:
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


Why would I stick with GIF when the largest headache about PNG is Internet Explorer versions less than 7 ?

35% of my visitors used IE < 7 for the month of November 2006.
The rest use browsers capable of understanding a 32bit PNG.
Microsoft hasn't even released IE7 in an Automated Update yet as far as I know.

I can do things with PNG that simply are not posible with GIF.
If you use caches correctly, the added filesize of a PNG shouldn't matter.
Same with Javascript/CSS to temprarily patch them in a dying browser.

Graphics Interchange Format needs to be put in a nursing home in the Bahamas, let Portable Network Graphics take over.
  • littlephoenix
  • Graduate
  • Graduate
  • User avatar
  • Posts: 147

Post 3+ Months Ago

yes, actually GIF will in the near future begone, I am not disagreeing at all, but for now, Ill take file size and page load time over 1% of sharper image, which the faint eye misses regardless.

good luck
  • imgtube
  • Novice
  • Novice
  • User avatar
  • Posts: 16

Post 3+ Months Ago

i have never used PNG, I perfer GIF.
  • CADALYST
  • Born
  • Born
  • CADALYST
  • Posts: 4

Post 3+ Months Ago

WOW! Thankyou for the responses but let me reiterate, I am NOT using alpha transperancy, I am merely substituting GIFs for PNGs, so will I have a problem of customers seeing my PNG images (NO TRANSPERANCY) on my website?

NOTE: I am talking about true color PNG-24 format
  • littlephoenix
  • Graduate
  • Graduate
  • User avatar
  • Posts: 147

Post 3+ Months Ago

yes, you will have a % of people that will not see your image, although most browsers now support png, but stick with gif for vector style art, and of course you want to use jpg for any roster based image ;)
  • jfrasier
  • Beginner
  • Beginner
  • User avatar
  • Posts: 56
  • Loc: Palm Beach Gardens, Florida

Post 3+ Months Ago

Littlephoenix Spock is absolutely right in his post, and provides a really original procedure. I never thought to use PHP and thestylesheet Spock!

Pngs are a powerful tool, and viewed properly in all browsers if you know how to set them up. The GIF format really should never be used for images, only simple objects such as text. To tell someone to use that as the img format for a pic will garauntee low picture quality and high file size.
  • littlephoenix
  • Graduate
  • Graduate
  • User avatar
  • Posts: 147

Post 3+ Months Ago

if you read in my earlier post jfrasier, you will see that i stated JPG is for roster based and GIF is vector based. If anything you should learn something from what i have to say, I have been in the field long enough to know what I am talking about.
right now, it is NOT a good idea to use PNG, even if you code it with CSS, right now you would have absolutely NO reason to use PNG on the web only for the exception of displaying your original rendered high quality photograph, artwork, 3D rendered object, and what have you, even then you wont see that much difference.

I have worked with PNG, JPG, TIFF, MBP, EPS, RAW, DIB, RLE you name it I have used it for well over 13 years. I am here on this forum to teach and educate, and to show people what the best, shortest and friendliest way of working with your computer and images on the world wide web. Listen to me or argue with me, at least i get y point across for the ones that actually want to listen and learn.

PS: PNG will overtake GIF in the near future, no argument there, maybe 2 years maybe 4. for now GIF stands tall for file size with transparent bg options specially.

Good luck as always
  • jfrasier
  • Beginner
  • Beginner
  • User avatar
  • Posts: 56
  • Loc: Palm Beach Gardens, Florida

Post 3+ Months Ago

Pheonix,

I too have been in this business for sometime, specifially web design and programming. The initial post was asking about png. Instead of saying don't use it at all it don't work (when that is indeed a mis-statement, they only don't work if you don't know how to work around them. If I asked about how to fix a png issue, and someone told me don't use it, well that isn't really much of a help is it? The info I stated about not using a gif for images was meant for the original poster, not to say you said different.

Instead of closing the door and saying, just use jpeg, spock offered a good solution providing a work around for the png. That was all I was saying. No reason to get huffy about it.

Is there issues in pngs, sure like anything else. But you can learn to work around them, and use the png as the powerful resource that it is.

Alot of people tend to not take the time to learn how to code properly, and that is always a mistake. The little things add up. All I was saying is that it was way more constructive to provide a way to use the png, as well as a interesting solution. I think that is more useful in the long run, then to say don't use them they don't work. You might as well learn how to get the alphas to work, since you never know what a client will want, and it could very well be a transparent image on a background. What then tell them sorry, I don't do that?

And to the original poster, take note of the solution, even if you choose not to use the png in this instance, it will come up in the future.

I have found that the easiest solution is find a pngfix script that works and hold on to it, add it to your javascript library and take use of it. I lost my good script, and now am back to having to hack through it again.

It is VERY frustrating, but in the long run the client will love the use of transparencies. Just stay away from drop shadows, that seriously jacks up your file size.

PS: I did read the entire post, and the replies.
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

I think that's awsome Spock. GJ. :)
  • littlephoenix
  • Graduate
  • Graduate
  • User avatar
  • Posts: 147

Post 3+ Months Ago

The ability to simplify means to eliminate the unnecessary so that the necessary may speak. ~Hans Hofmann
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

http://msdn.microsoft.com/vstudio/express/visualc/
That right there is having problems using PNG images in Windows::Forms, I've been forced to go with GIF for my treeview icons.

// Edit -- Actually, I'm an idiot & didn't realize that a) The color settings of my image list were incorrect & b) There was a base image behind my icons.
PNG works beautifully.
// Edit -- Definately not battin 1000 today, they returned to crapesque as soon as the project was closed and reloaded.
  • joejoe04
  • Born
  • Born
  • joejoe04
  • Posts: 2

Post 3+ Months Ago

ScienceOfSpock wrote:
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');


Thanks for this information. I'm still not entirely sure how you would use this though. Would you simply use this filter code exactly as it is, but just replace the png's file source? I would imagine that is how, but I want to make sure. But I guess my real question is, do you have to include this for every png image you use that has alpha transparency or do you just put this in your css one time? Thanks.
  • MusicGuru
  • Newbie
  • Newbie
  • MusicGuru
  • Posts: 14

Post 3+ Months Ago

png files are big in file size, i would not use it. and jpeg quality 12 is good fallen faith :)
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Wow, the year-long debate...

I say use pngs! They look about a million times better and are well worth any extra effort to display correctly in IE6.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Favoring an image format is kind of silly. IMO, all three image types (GIF, JPG and PNG) have distinct advantages under certain conditions. You should use the file type that is appropriate for the image, the needs of the situation and the quality to filesize ratio.

Broadband access has killed good technique in handling image compression. :P
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 35 posts
  • Users browsing this forum: No registered users and 64 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.