Welcome to the MacNN Forums.

post_break · Apr 20, 2007, 10:24 PM

Ok I have wasted about 2 weeks trying to get this png to show up correctly in more than one browser. I am working on a new banner for my site and the PNG will not show up correctly in firefox but will look perfect in safari (and vise versa). I read somewhere that I need to embed the color profile. Can anyone please hold my hand and show me how to do this exactly? I am using a PNG because the image has some transparent parts.

Old Toad · Apr 20, 2007, 10:48 PM

PNG files are not color managed. If you need transparency try converting it to a gif unless the limited number of colors available in gifs make that not a good option.

Visnaut · Apr 21, 2007, 09:18 AM

Judging by the troubles you're having, you're probably using Photoshop to output those PNGs, and it throws a bunch of data in there that simply isn't suitable or necessary for web work.

What I do is use a PNG optimization tool such as Ping, GammaSlamma, or PNGCrusher to clean your PNGs before using them on a site. If I happen to be using a Windows machine, I use PNG Gauntlet.

Try that, and also when you're doing any sort of web work in Photoshop, I would not use any sort of colour profiles or proofing (except maybe the screen gamma proofing) which will minimize any issues you'll have with colour profiles and what not.

post_break · Apr 21, 2007, 09:43 AM

Ill give some of those programs a try. Thank you guys for your help so far.

Sourbook · Apr 21, 2007, 11:15 AM

I found this to be an informative site for properly displaying RGB color spaces in web browsers.

sRGB Correct ColorSpace Tutorial for the Internet The PROOF! www.gballard.net

Thorzdad · Apr 21, 2007, 07:22 PM

You should post some screenshots from the two browsers so that we can see what the difference is. I've never had problems with PNGs between browsers.

andi*pandi · Apr 21, 2007, 08:03 PM

I've also heard opening pngs with graphic converter and resaving will remove the photoshop profiles. But we don't use too many pngs because they show up for crap in IE6 and we still support that. :/

Visnaut · Apr 21, 2007, 09:23 PM

Originally Posted by andi*pandi

But we don't use too many pngs because they show up for crap in IE6 and we still support that. :/

The numerous free solutions out there to enable transparent PNG usage in Explorer 6 work formidably well. I was able to convince a company to go with PNGs in a site redesign with this simple line of reasoning: If Google can use transparent PNGs reliably in IE6, then so can we. Said redesign and rollout has gone out without incident.

post_break · Apr 22, 2007, 02:45 AM

So far I havent had a chance to try the png fixer programs but the browser in the back is firefox and the one in the front is safari.

Now that I look at it the banner is the correct color and the side bar is incorrect.

Thorzdad · Apr 22, 2007, 07:43 AM

What's your process for saving the .png?
Of course, you should convert the color space to sRGB.
Especially in the case of PNGs, you should use Pshop's "Save for Web" option. I would never just do a "Save as..." for anything destined for the web. That's the sure way of getting a bloated file.