Bruce Varner Photography BruceVarner.com


Seeing Image Color Correctly in Web Browsers
Or
Why do images look differently on different devices or in different browsers?

Because my site is a photography site, I have a vested interest in having the images displayed here being viewed with the correct colors.  I do not claim to be an expert on color management.  I do however know that the intent of an image can be ruined when seen in the wrong color profile.

Test your browser to see how it handles color gamut:  http://cameratico.com/tools/web-browser-color-management-test/

If  you really want to see images on the web displayed as close as possible to the true colors, see below.

Two Methods….

1.      Color manage your monitor + use only the correct browsers + tweak the browsers

2.      Use only the correct browsers + tweak the browsers

 Method 1: The hard method….But the most accurate

As expected this method requires the most changes and costs money to achieve.  It also requires continued re-calibration every few months.

Buy and Use Monitor Calibration Hardware/Software---

-Consists of software installed on the computer (Non-iOS devices) and a piece of hardware that sits on the front of the monitor during calibration.  The software runs the computer monitor through many different display colors and brightness’s.  Need to re-calibrate every few months.

-Monitor Calibration systems cost between $78 and $349 depending on vigorousness of the system.  I use such a system because in photography it is important that color rendition is correct!

 Use Only Safari or Firefox Web Browsers--

-Safari-  Install it and you are done!  Yes, Apple’s Safari web browser can easily be installed on a PC.  Safari (Apple) is the only browser developer that actually cares enough about color management to build it into the browser by default.

-Firefox-  Firefox web browser does NOT have color management turned on by default, but it is there for anyone who desires to make use of it.

-Instructions for activating color management in Firefox can be found here:
http://cameratico.com/guides/firefox-color-management/

-Caution!  Be careful not to make other changes while in about:config.  It can fowl up the browser……

 Method 2: The easier method….But not as accurate, and not expensive

 Don’t Buy Monitor Calibration Hardware/Software---

Use Only Safari or Firefox Web Browsers--

-Safari-  Install it and you are done!  Yes, Apple’s Safari web browser can easily be installed on a PC.  Safari (Apple) is the only browser developer that actually cares enough about color management to build it into the browser by default.

-Firefox-  Firefox web browser does NOT have color management turned on by default, but it is there for anyone who desires to make use of it.

-Instructions for activating color management in Firefox can be found here:
http://cameratico.com/guides/firefox-color-management/

-Caution!  Be careful not to make other changes while in about:config.  It can fowl up the browser……

 Reasoning & Explanations:

Safari functions very well on a PC

 Firefox changes are not hard.  Instruction just need to be followed to the letter

All the browsers base display of that image upon any embedded profile in that image.  That works to a point.  However, remember the "#TheDress" controversy?  This is the thing that we are trying to avoid…….

Safari and Firefox base display on monitor embedded profile + monitor calibration.

The others: IE, Chrome and Opera, do not even take calibrated monitors into consideration.  They rely solely on Microsoft color management system.

 iOS devices to not allow color management.  However they do seem to have perfected the method they use very well as colors are displayed acceptably.

The above will not fix web images that have no color profile embedded.  But more and more all digital images have some profile embedded.  Even standard cell phone images now use standard sRGB profiles.

 So, if you want the best color rendition in all circumstances, use monitor calibration software and use only Safari or Firefox browsers.  This does not ensure that all images you see on the web will look good, but at least you have the best chance of having the highest percentage look correct from a color standpoint.

 For many, this is overkill.  When I place images on my website I observe them in all the major browsers.  Much of the time there is no issues.  Remember that “much of the time” ranges from 51% or up to 99%.

 Bruce Varner

 References-

Test your browser to see how it handles color gamut:  http://cameratico.com/tools/web-browser-color-management-test/  This does not mean you will see all colors correctly, just that your browser can handle the color range.  Chrome seems for me to be the one that does not pass this test….

Tim Grey on color management:  https://www.youtube.com/watch?v=u42B__sfae4






 


 

hits
counter