Browsers & Color Management II – the Code

This post follows on the Browsers & Color Management I – Sending Color Patches in through the Web Browser with more details on the code used to drive images through the browser window. As one might have expected, three components were needed: html, css, and some sort of JavaScript. For the latter, I picked jQuery library (jquery-1.7.min.js) which is well suited for this task.

About the code:

jQuery code used in this project is essentially a slideshow script that works on the client side. That explains why we do not need any active connection to the Internet. It will run in our browser providing that JavaScript is enabled. Since it turns images into a slideshow, it can be used for many other purposes, e.g., to display photos on our personal web site. jQuery is free, open source software, dual-licensed under the MIT License or the GNU General Public License, Version 2 and it is included in the “js” folder inside the zip file.

If you have not done so before, download it here:

Patches1.0.1.zip v 1.01 Patches1.0.1.zip | Complete set of files. Fixed a minor error in the index increment and displaying full set of images. – [downloaded 1222 times]

The code below is just a sample of the whole script with associated files, shown only to outline the structure and logic of the script.

Read more..

mpatek December 23, 2011 Filed in: → Code, Color management, Software 3 Responses

Browsers & Color Management I – Sending Color Patches through the Web Browser

While writing my previous posts on color management and web browsers [1, 2], I realized that instead of guessing as to whether a browser understands how to manage colors, a few measurements of color patches would go a long way. Questions, such as, what will happen with untagged images in Chrome 11 or is it safe to use sRGB profile for photos displayed on a wide-gamut monitor would then be easier to answer. By all means, these questions are not trivial and would deserve an in-depth study of the browser documentation and perhaps many hours spent on Google. Unfortunately, with many browsers one would still be unclear on the exact way by which are the (un)tagged images processed.

To address browser color capabilities in the most straightforward way, we would just send images of RGB primaries through the browser and record their colorimetric values. In order to do that, we would need a set of images that are either untagged (no color space information is associated with them) or images that carry color space information in the form of icc/icm profile. After the measurement is done, a quick comparison with known CIE 1931 chromaticity coordinates of RGB primaries of standard color spaces (sRGB, Adobe98 RGB, Pro Photo RGB) would reveal any color processing done by the browser. To measure the radiometric output, we can use the same device that we use to calibrate our display.

To make measurement of colors from within a browser easier, I provide jQuery script that displays different color patches and allows measurement in a semi-manual manner. The script runs in any browser that has JavaScript enabled. Included are gray and RGB ramps in four different variants; untagged and tagged with sRGB, Adobe98 RGB, and ProPhoto RGB icc profiles. After measuring these patches directly from the browser, we can both judge its color management capabilities and also obtain display characteristics, such as, display gamma, color temperature and gamma values for each RGB channel. On that later (link).

The Upshot of the Script:

  • Inter-browser compatibility (IE, Chrome, Firefox, Safari, Opera, …)
  • No installation (all necessary files are included)
  • No need to be connected to the Internet
  • Simple navigation (NEXT, PREVIOUS, RESET)
  • Customizable (supply your own images)
  • Free

Read more..

mpatek November 27, 2011 Filed in: → Code, Color management, Software No Responses