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.

Answer 2

I would recommend instead of using jpg to use png as it was specifically designed for transferring images on the web. I've never encountered the specific issue you have, but suspect png will resolve the problem.

Answer 3

Your problem seems to be related to the associated sRGB color profile. It seems you need to either correct the gamma or select another color profile

The article i quote from relates to pngs and sRGB but overall addresses the sRGB issues (and also mentions jpgs earlier in article). This is what is says

Making the Color Spaces Match In theory, one could try to use the color management features of PNG to make the colors match with CSS colors. However, in practice this does not work and can even make matters worse, because what is said about color in the specifications is not generally implemented. sRGB When you touch the issue of color values in a formal specification, you are supposed to somehow define the meaning of the values. The easy way to describe the meaning of color values would be this: “The color values are passed to the Windows graphics API. Authors should pick the color values in such a way that the intended appearance is achieved on an average PC.” Of course, that definition wouldn’t look good in a specification that is supposed to be precise and platform-neutral. It would look much better if there were a normative reference to a formal color space definition. Some people working with color issues realized that it isn’t realistic to try to force Windows PCs to do color management. sRGB is a color space that models an average office PC with a usual mediocre CRT. When a Windows PC or a Linux box is said to be an “sRGB system”, it is important to realize that these device/software combinations are not explicitly engineered to conform to a specification called sRGB. Instead, the specification is designed to conform to the systems! However, not all PCs are the same, so it’s not like all PCs have an exact common color space. sRGB is just an approximation of an average case. Also, when it it said that a Mac is not an sRGB system, it is important to realize that a Mac can be configured to be one. It just might be that a Mac owner with a fancy Apple flat panel screen doesn’t necessarily want his/her display to emulate a mediocre office CRT. sRGB in the CSS and PNG Specifications According to the CSS2 specification, the CSS color values refer to the sRGB color space. In practice, however, all browsers except Mac IE 5 with ColorSync enabled (disabled by default) seem to just treat the CSS color values as values in whatever color space the system color space happens to be. Still, it would be reasonable to expect the colors of an sRGB-labeled PNG image to be treated consistently with CSS colors. Again, it just doesn’t work that way in practice. The PNG 1.0 specification, which is a W3C Recommendation, didn’t have an unambiguous way of indicating that the color space of an image is sRGB exactly. In theory, the result should be close if the gamma value of the image is set to 1/2.2. However, in practice the colors of images labeled that way do not match CSS colors in eg. Windows IE. The PNG 1.1 specification, which is not a W3C Recommendation, added an unambiguous way of indicating that the color space of an image is sRGB—the sRGB chunk. There are problems, however. In Mac IE 5 the colors of sRGB-labeled PNGs don’t match CSS colors when the ColorSync support is disabled as it is by default. Safari applies a gamma change to sRGB-labeled PNGs but not to CSS colors making the colors not match. The CSS2 specification doesn’t specify which ICC rendering intent should be used when mapping sRGB colors to the system color space. PNG 1.2, on the other hand, allows the rendering intent for the color space conversion to be defined. If a browser does color space conversion using ICC profiles and the rendering intent it uses for the CSS colors is different from the rendering intent defined in a PNG file, the resulting colors might differ even if the original colors were the same and in the same color space.

Answer 4

The logo is quite simple in coloring and pathing, have you tried a Scalable Vector Graphics (.svg) format? I would try find SVG files with similar colouring and try them cross browser.