顛覆網路 35 天: 色彩校正

是的我拖稿。

說到色彩校正 (Color Correction) 功能，其實在 Firefox 3 時已經有基本的支援，只是預設是關閉的；Firefox 3.5 裡將校正的速度提升到 Firefox 3 的 5 倍快，也終於預設就開啟這項功能。現在就來看看色彩校正的威力：

不過網路上大部分的照片都沒有色彩校正資訊，所以其實你不見得可以感受得到差別就是。無論如何，多學習一下相關的知識也不壞囉！

所以色彩校正是啥？

如果你花很多時間在照相或影像處理等相關的事務上，那應該知道同樣的色彩在不同的輸出設備 (LCD 螢幕、CRT 螢幕、印表機等等) 上表現可能略有差異。JPG 跟 PNG 檔都支援色彩設定資訊，這些資訊可以幫助 Firefox 依據設備特性而顯示出正確的顏色；除了媒體檔本身之外，顯示設備也有自己的特性。假若某顯示裝置展示紅色的能力較展示藍色更為優秀，那麼這項裝置上的紅色 #ff0000 可能就要設定成 #f40301 才能顯示得跟螢幕一樣。總之這告訴我們，設備跟媒體檔案之間可能要經過兩次轉換才能顯現出正確顏色：一次先依據檔案本身所帶的色彩資訊、第二次則是依據設備的色彩資訊進行轉換。

所以，這關 CSS 什麼事？

網頁設計的世界中常會有需要搭配圖片及 CSS 混合排版的情形，如果你想要在圖片中繪上某個顏色、然後在與其搭配的 CSS 裡也指定一樣的色彩，或許實際出現的情形並無法如你所願 —— 因為 Firefox 裡會讓圖片經過色彩校正程序、但卻不處理 CSS，於是你看到的圖片經過校色之後、看起來跟 CSS 所設定的顏色就不見得相同，以下面這段紫色區塊為例：

在 Firefox 3 裡，你會看到一個紫色的長方形；在 Firefox 3.5 及 Safari 中，你看到的則是一個紫色邊框包覆著另一個紫色長方形 (除非你的系統色彩資訊為 sRGB 模式)。這是因為上方形成長方形的圖片部份經過色彩校正、而 CSS 部份則無。

未來的 Firefox 裡將讓使用者同時為圖片及 CSS 開啟色彩校正功能，這功能現在就可以依照 Mozilla Developer Center 上的說明來試試看，只要將色彩校正切換為「完整色彩管理」模式即可。

圖片格式支援與相關工具

PNG 檔的色彩資訊可以用三種不同方式標註：首先，可以利用 iCCP 區段嵌入 ICC 資訊；第二，可以利用 sRGB 區塊將圖片明確指定為以 sRGB 模式處理；最後，您還可以嵌入 gAMA 及 cHRM 資訊，描述圖片的 gamma 及亮度值等。這三種方式都可以讓 Firefox 利用色彩校正功能調整圖片色彩。

此外，您也可以利用 pngcrush 來移除所有色彩資訊，讓圖檔恢復為未標註的樣子：

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png

您也還可以利用 TweakPNG 手動刪除這些資訊。