Why doesn't my image color match background color in FireFox?

Question

Hi, I think I could be doing something wrong in photoshop. I'm trying to create a banner for my website.

I created a new image in photoshop, then filled the background with a color I picked #E06205

I then saved the image as a jpeg.

On my webpage, I created a div and gave it a background color background-color:#E05206;

When I open the page in Safari and Chrome it's beautiful. Matches perfectly.

However, when I open the page in FireFox, the colors don't match. I can't figure out why that is.

By the way, this is definitely a problem with the image I created. When I compare the same image side by side, Firefox gives me the 'wrong' color

Answer 1

Your issue is in the color profile you are using for the image. Make sure when you save the image you use Save for Web & Devices…

To read more if you want you could travel to this website: http://css-tricks.com/color-rendering-difference-firefox-vs-safari/

Answer 2

You should save your images with "Save for Web & Devices" option of "File" menu in Photoshop. You can get many options and image types in this option as per your requirement.