瀏覽器之色彩管理大車拼

「為啥我NB明明把相片調整的鮮艷飽和許多了，怎麼到PC一看，每張調整過的相片都像畫了大濃妝一樣俗氣的要死？」這是在大約十年前，LCD色彩、品質還很差的時代，第一次讓我注意到色域與色彩管理的重要性。

對於色彩稍微敏感的使用者，應該也都有觀察到相同相片在不同電腦的確有可能呈現迥異的色調；由於每台電腦螢幕的品質參差不齊，就算品質相同，沒有經過校色，還是難免會有些微的差異，不過校色器不是人人都有，好螢幕更不是人人買得起，更何況，目前硬體上的差異只有色階、彩度、色溫等問題(明明很嚴重了!?)，但是軟體上卻又有著另一個不得不正視的問題-色域。

雖然大家都熟知，顏色不外乎三原色的混成，但是不同的頂點所圍成面積是不相同的，而相同的座標在不同定義的色域下，顏色也是會存在明顯的差別的，對方面有興趣的可以自己去google一下sRGB, Adobe RGB, CMYK等關鍵字，自然會有更完整的資料，這邊就直接討論整個影像取得一直到輸出呈現的過程。

整個影像的過程，可以從影像的取得開始(掃描器、相機、甚至電腦軟體繪圖)，接著進到電腦軟體(包涵秀圖軟體、影像處理軟體等任何可以看到影像的軟體)解讀，軟體將色彩解釋給系統(Windows、Mac、Linux...)，系統將色彩解釋給輸出硬體(螢幕、印表機等)，如此經過層層關卡，任何環節的詮釋有誤，都會造成最後呈現的差別，但是整個過程都是以相同的色域描述方式，扣掉校色問題後，最後的誤差應該都十分些微。但是中間若遇到不同的色域轉換，且詮釋過程中卻沒有良好的翻譯，可能就會得到如同台灣人把泰國的招呼語聽成三碗豬腳的窘境。

講個更常見更直接的例子，現在以Adobe RGB色域所描述圖片，丟到Adobe Photoshop開啟，顏色時非正常、漂亮，但是相同圖片以Windows秀圖程式開啟，顏色馬上出現了非常嚴重的色偏；由於Photoshop認得Adobe RGB色域，他將色彩的描述正確的告知系統，再轉譯給螢幕，所以整個過程溝通十分良好。而Windows秀圖程式則是土生土長的台灣人，只認得sRGB這個語言，當他看到Adobe RGB(泰國語)的色彩描述，直接以相同的"發音"套用在sRGB這個"語言"上，自然而然就出現了許多的誤會。

前面雜七雜八的交待了那麼多，其實重點只是要引出瀏覽器對於色彩描述檔的支援程度，下面例子比較IE、Firefox、Chrome、Safari與Opera這五種最常見的瀏覽器引擎，在我電腦螢幕上所呈現的結果(所以已經重新翻譯回sRGB描述)，若支援色彩描述(懂得多國語言之間的翻譯)，則三朵花應該會呈現相同的顏色。

Internet Explorer 8


Firefox 3.6


Chrome 7


Safari 4 (Windows版)


Opera 10


很明顯的，最常見的IE與最近竄起的Chrome，甚至跨平台到手機市場的高速瀏覽器opera，仍然欠缺色彩描述的支援，Firefox與Safari則可以忠實的演繹出圖片本身所希望呈現的色彩給作業系統。

再來進到更新一代的ICC V4規範

Internet Explorer 8


Firefox 3.6 ~ 9.01


Chrome 7 ~ 18


Safari 4 (Windows版)


Opera 10


四個象限分別是如圖片上標示的四種不同色域定義，很明顯的，只剩下最受美編工作者青睞的Apple Safari可以全數過關。下次瀏覽網路圖片，看網路相簿，發現顏色十分古怪的時候，不妨換個瀏覽器或軟體試試，可能會有全然不同的感受唷！

PS:上面的範例是動過手腳的色彩描述檔，一般常見的adobe RGB與sRGB雖然會存在色偏，但是不會出現像上面直接藍變綠之類如此嚴重的情形(其實就是小偏差才可怕，大偏差都會發現，小偏差只會覺得不對勁！)
PS:題外話，PDF之所以常被作為文件傳遞的標準，其內嵌色彩描述也是重要原因之一，所以像印刷校稿的對色彩較為講究的場合，直接傳遞圖片檔(不論是jpg,tif或者bmp)，不如轉成PDF再以免費的reader開啟，將可免除軟體演繹造成的誤會。

--
Internet Explorer 9已經支援色彩管理

2012.01.25更新