#FIREFOX VS CHROME VS SAFARI MAC PROFESSIONAL#

These profiles are used to tune the image to your display to better reproduce the original scene, a must for amateur and professional photographers, clothing and fabric related e-stores, paint, food, and mostly everywhere a true representation of color is important. To check whether your browser honors color profiles (and how well), check out the ICC page on the subject. This will ensure that the site, at least color-wise, renders the same from browser to browser. The purpose of these color profiles is something I could into another time, but the important thing to remember to avoid problems like Norm’s is to make sure all your images were exported in the same way and so they either don’t have a color profile or all have the same color profile. It wasn’t Firefox being super-smart, it was actually being dumb and just looking smart.

If you “ Save for Web & Devices…” the “sRGB” (best for the web) color profile will be automatically applied (in CS3 anyway). If you “ Save As…” from the file menu, you will have the opportunity to save your color profile along with the image. This is likely caused by saving the images from Photoshop in different ways. The top image indeed was exported differently, it’s using a “Calibrated RGB Colorspace” while the body background image was using “sRGB”. A quick “Get Info” glance at the two images reveals the true problem: I remembered that Safari is one of the only browsers that actually supports color profiles of images. I really should have thought of this right away, but sometimes simple answers are the most elusive. Then it struck me… Ah ha, it’s color profiles! Since both the images are JPG’s, and color indexing only happens with GIF and PNG, this is not the case.

Since the top image has a much wider variety of colors it is dealing with, if the images were color indexed the top image would have much less colors to dedicate to the tans which could explain a tone variation. It matches perfectly! Hmmm… So it seems like if both of the files were originally created from this original file, then something happened while exporting the top header image that is changing the tone of it somehow. I opened this original file and placed the body background square over this, and… I thought I would compare the live graphic files to this to see if that would uncover any information. Norm offered to send me the original file that he created both the header and the body images from. So what the heck is happening in Firefox?! Does it have some kind of super-genius color-matching abilities? The images clearly have different shades of that tan color so the clash makes sense. That explains what is going on in Safari. On the lower right there, you can see the body image square plain as day. Check out what happens when I drop the body image square on top of the header image: Here is the header image and here is the body image. My first thought is to find both of the images and take a closer look at them in Photoshop. See the color clash below the photographs and before the first post? Yikes. Here is a screenshot of them side by side: I opened his site in both Safari and Firefox and indeed, I saw the same problem.

Do you have any idea on how I can avoid these differences in safari? The header and main page background are pulled from the same original graphic and in Firefox the header and body match up fairly well (I still need to do a little work to get the patterns to match up better) but in Safari the shade of brown looks completely different between the header and body creating a seam where they meet. I have a graphical question about my test site. CSS-Tricks reader Norm writes in to ask me about a problem he is having with color on a new site he is designing:

Firefox vs chrome vs safari mac