JPEG color renders inconsistently across browsers

Question

The logo I am working with is being rendered differently across browsers. The specific image is available here and on this Twitter page.

Below is a screenshot of the image on Chrome, Firefox and Safari on my Mac OS X 10.11.5, graphics card Intel HD Graphics 6000 1536 MB. Notice how Chrome and Firefox incorrectly display the logo with a brighter red.

How can I make sure that my JPEGs are displayed consistently across browsers?

Answer 1

I believe this may be partly caused by a long standing issue with chromium (https://bugs.chromium.org/p/chromium/issues/detail?id=44872). Just one possibility.

My advice would be to make sure that all of the images have identical colour profiles. Safari supports v2 and v4 ICC profiles out of the box. Firefox supports ICC v4 color profiles, however I believe the option is off by default (can be turned on in about:config). Chrome doesn't support colour profiles at all. So in the end, each of these browsers will display colours differently, it is not your fault that they look noticeably different.

Just ensure that the images you are using all use the same colour profile and the rest is up to the browsers.