Background jpeg issue

[jhatter]

I am having an issue with a jpg not displaying correctly in certain browsers on certain platforms.

The site can be found at
http://www.kamillawabenger.com
the problem is the background colour of the large background KW logo jpeg on the homepage - it changes colour depending on different browser/platform combinations

Please also see the two screen grabs I have attached.

It displays perfectly on a Mac G4 PowerBook in both Safari 5.0.3 & Firefox 3.6.15. On a current MacBook Pro it doesn't display correctly in Safari. On a PC it displays perfectly in IE6 but on the same PC it doesn't display correctly in Firefox.

The correct colour should be #151515, which shows on the jpg on the server and my local hard drive. My colour set-up in Photoshop is the same as this:
http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift

Please can anyone suggest a solution? Is it a screen-resolution issue or browser issue or maybe a combination of both?

Thanks in anticipation

[Beverleyh]

I'm on a BlackBerry at the mo so I can't test anything but I'd guess its down to web-safe colours - some browsers struggle with an obscure hex value and so default to the closest web-safe colour.

In Photoshop, they're the ones that don't generate the little 3D cube in the selective colour palette. So if you choose a colour and the 3D cube shoes, click on it and the hexidecimal colour value will flick to a safe shade.

Hope that helps

[jhatter]

Thanks for your reply. I'll give it a go when I have the time and let you know if your suggestion solves the problem.

[djr33]

This may sound counter-intuitive, but my guess is that the image is actually always displaying "correctly". It's the other colors (for the background etc.) that are shifting. Macs and PCs have different gamma settings so that macs are known to be brighter than PCs. I'm not sure about the different browsers, but it seems like a similar situation.

In fact, this may apply the same way for web-safe colors. You can certainly try that, but I'm not sure it will fix it. Using the standardized colors is a good way to start though to see if that can help.

One solution would be to use a PNG with transparent background. (That won't work in older versions of IE, but that's not much of a problem now. You can even make the invisible background color set to that shade of gray so that if it does show it will be the right color, with the slight variation you have shown.)

[jhatter]

Thanks for your replies. I did a bit of long-winded testing to see what would solve the problem:

Using a .gif of the large background KW logo was less problematic than either a .png or a .jpg:
http://www.kamillawabenger.com/logo_test5.html

The gif version appears correctly in FF on a PC, IE6 on a PC, Safari on a Mac & FF on a Mac. The one thing I don't understand is that the background colour of the gif is #161616 and the body background of the page is #151515, but everything appears OK !!??!!

Whereas the original jpeg with a background colour of #151515 and body background of the page is #151515 does not show up OK on a PC in FF ???? (ie original problem)
http://www.kamillawabenger.com

The transparent png looked great and as you would expect there were no colour clashes. However, when viewed on a PC in IE6 the png shifted out of position (to top left of browser page)
http://www.kamillawabenger.com/logo_test.html
I can't figure this out, so I have ditched the idea of a png.

[djr33]

IE6 has known problems with pngs. If you google the subject you can find more information on fixing it. Additionally, it's now being used less and less so you don't need to worry too much. That will be the most consistent solution, PNG problems aside. You could attempt to substitute a gif image in IE6 if you'd like, probably using Javascript.

I'm not sure about the inconsistencies with the images, but again I'd guess that the images are displaying more reliably and the browsers are making decisions about the colors. Out of curiosity what would happen if you used named color likes "black" or "red" instead of hex values? That might standardize it, but it could also limit your color palette.

Also, the differences between JPG and GIF images is that GIFs have a color palette. This means, in simple terms, that each pixel refers to a numbered entry in a list of colors; this list of colors can be anything, but only up to 256 different entries. PNGs are a little complicated. Like GIF format, they are "lossless" in that the colors are represented exactly and aren't "compressed" as JPGs are. But they aren't limited to 256 colors. So in terms of how the images will be rendered, they may pattern with GIF or JPG or perhaps differently than both.
My guess is that when a browser receives an image with a palette it renders it using the colors, rather than displaying the "raw" image. But that's just a guess. You'd have to refer to the details of how these browsers handle images.

[jhatter]

Thanks for your detailed response. My preference is to use a png, but until I've had the chance to figure out why it's positioning is shifting around in IE6 then I'll put the .gif in its place.

[djr33]

Do you know about IE conditional comments? Basically you can provide separate content for IE6 and leave the rest as-is. That might help. Good luck.
(There's plenty of info on google if you do a search.)

[jhatter]

Do you know about IE conditional comments?

I'll Google it thanks and see what comes up.