I have a graphic for my site that is split into 2 parts, for file size reduction. The outer border is a transparent PNG and the inner section is a jpg.
When I split the image and loaded both parts up in Paint.NET and pasted them into 1 image, the colours matched perfectly. But when I viewed the results in Firefox, the PNG border was darker for some reason, so you could tell the image had been split. So, I adjusted the brightness levels on the frame until it looked right in Firefox, but now it doesn’t look right in IE!
I guess it has something to do with how different browsers render PNGs vs. JPGs.
Is the issue maybe with the ‘paint’ graphic software that I’m using, and will using Photoshop fix this issue?
I also compress my PNGs and JPGs in punypng.com, so maybe that’s where the issue creeps in.
The PNG can have additional ancillary data chunks that contain colour profiles and so forth you might have altered them when you tried optimising the image. Obviously the JPG is also doesn’t do transparency.
I actually agree with you on that one. As far as I know, PNG isn’t fully supported by the IE line yet, which may be the reason for your problem. You can just use a single image type to solve this one.
That’s only IE6 (and lower). All the newer versions do understand PNG-24 with alpha channel.
And the problem here doesn’t sound to be related to that but rather what xhtmlcoder said: there is a color profile or something else stored in the PNG which makes it render in a different color than one would expect.
its not only the IE issue you will also see the difference on different platforms like windows and mac. if you are exporting JPG in photoshop using “Optimize for web” then do export the PNG using “optimize for web” option as well. simply saving the image as png will produce different result.
Normally JPG on 80% quality and PNG 32 bit gives identical results. but the ultimate solution is to use same format for both images
