數位圖像導論

1. 摘要

這份教材完全不談數位影像的『實體輸出』。 因此我們也就不介紹關於噴墨或雷射彩色印刷的概念、原理與技術。 有志於在此領域發展的聽眾，將來會發現『實體輸出』是一門相當複雜的學問和技術， 不過基礎的原理已經在這份教材裡面了。

2. 數位圖像的像素

先解釋像素。一張像這個小丑圖的數位圖像，其實是由一堆小粒小粒的色彩排出來的。 每一小粒色彩代表一個單一的顏色，這些不同的顏色湊在一起， 被我們看到，就在腦袋裡產生了意義，因而認出來這是一個化了妝的小丑。 每一小粒色彩，用一個、兩個、或三個數來紀錄，稱為一個「像素」。

所謂 320 x 200 的圖，就是寬有 320 個像素、高有 200 個像素的圖， 想像那些像素排成一個矩形，總共有 64,000 個像素。 230 x 200 的像素矩形太大了，所以我們故意把它縮小成一張 40 x 25 的圖。 如果覺得它太小了看不見，可以放大八倍 (寬和高各放大 8 倍) 來看看。

這張圖片屬於『256 色』圖，也就是說整張圖片上只有不超過 256 種不同的顏色。 『256 色』圖的每個像素用一個數表示，每個數介於 1 和 256 (其實是 0 和 255) 之間。 對於這張小圖，我們可以看到 40 x 25 總共 1,000 個像素所對應的數。

3. 256 色圖

所謂色盤就是一張表格，每一列定義一個顏色，定義的方法就是用 RGB 三原色光的亮度。 第一列就是 1 號色、第二列就是 2 號色、依此類推。 我們看到小丑圖的色盤顏色和色盤表格，看得出來， 色盤上的顏色基本上是依照色彩的亮度來排序的。

現在我們把前面學過的概念全部放在一起，對照看一遍。

縮小的小丑圖是一張『256 色』圖，寬有 40 個像素、高有 25 個像素。 每個像素用一個介於 1 和 256 之間的數表示， 但是其實這張圖的色盤上只有 81 種不同的顏色，編號 1 到 81， 所以像素的數值都介於 1 和 81 之間。 每一張『256 色』圖所採用的 256 種顏色 (或者更少) 都不盡相同， 所以每一張『256 色』圖都含有它自己的色盤。

隨便挑一小塊區域出來，看看像素的數值，比對色盤上的顏色，再比對圖片上的顏色。 希望這樣能確實體認：影像就是不同顏色在人的心智中產生的印象。

4. 灰階圖

『灰階』圖不需要另外儲存色盤，每個像素直接紀錄那個位置的灰色亮度。 因為電腦知道，譬如說 64 號亮度的 RGB 亮度就是 (64, 64, 64)。 為了能夠列出像素的數值，我們還是只看那張縮小的小丑圖 (黑白版)。 我們看到這些像素的數值跟原來的一樣， 只是電腦知道要把這些數值顯示成相應亮度的灰色而已。

5. 高彩圖

『高彩』圖的每個像素要用兩個數表示，每個數都介於 0 和 255 之間。 那個縮小的小丑圖，如果用『高彩』圖的形式呈現，那麼它的像素數值就如投影片所示。 只不過那些括號和逗點都是寫給人看得方便的，並不在像素裡面。

其實『高彩』圖在實用上已經不常見了，現在的電腦硬體都夠快夠大， 使得一般的數位圖像不是用『256 色』就是用『全彩』。

6. 全彩圖

只有那些含有很多很多像素，而且畫面需要很多很多細微差異的顏色的圖， 才會需要『全彩』。一般來說，數位相片都用全彩，但是人們用繪圖軟體創造的藝術， 就通常不需要全彩。

『全彩』圖的每個像素要用三個數表示，每個數都介於 0 和 255 之間。 那個縮小的小丑圖，如果用『全彩』圖的形式呈現，那麼它的像素數值就如投影片所示。 只不過那些括號和逗點都是寫給人看得方便的，並不在像素裡面。

所謂圖像的『資料量』就是一張數位圖像在電腦內所佔有的記憶體空間。 資料量越大的圖像，通常在螢幕上看起來越大，色彩也越豐富， 但是它佔用的電腦記憶體就越多，通常用今天的電腦來看一張大圖片的時候， 也感覺不出來差異，但是在傳輸的時候，就會有感覺了：比較慢。 但是網路上傳輸的並非圖像本身，稍後再談。

視覺上我們認為數位圖像有兩個維度：寬 (Width) 和高 (Height)。 現在要接受一個新的概念：數位圖像其實有三個維度： 除了寬度和高度之外，還有『深度』或者『厚度』。 而數位圖像的資料量，就是這三個維度的乘積，也就是體積。

7. 數位圖像的深度

近來因為電腦硬體的容量和速度都提高，已經有些軟體開始提供更多色彩選擇， 譬如說 48-bit 的色彩，就是把 R, G, B 三種光的強度都等分成 2¹⁶ 份， 每個座標用 2 拜紀錄，總共就用了 6 拜。 對於這種圖像，深度就是 6。

8. 圖像的資料量

以一張 320 x 200 的『灰階』圖為例，其資料量就是 320 * 200 * 1 = 64,000 byte 也就是 62.5KB。

以一張 320 x 200 的『全彩』圖為例，其資料量就是 320 * 200 * 3 = 192000 byte 也就是 187.5KB。

一台高解析度的數位相機可以拍攝 2048 x 1536 的數位相片， 所以一張圖像就有 3,145,728 像素，也就是廣告上說的三百萬畫素。 如果這張圖又用全彩，那麼一張相片的資料量就是 9MB。 如果您使用容量為 128MB 的磁卡來儲存這些數位相片，則一張磁卡只能放 14 張照片。

但是經驗上似乎 128MB 容量的磁卡可以儲存不只 14 張數位照片。 一方面那是因為您沒有用最高解析度，另一方面是因為這些相片是先被壓縮才儲存的。 底下就要講壓縮。

9. 檔案與壓縮

檔案通常不會一五一十地儲存像素 (和色盤) 所對應的數值， 而是儲存經過壓縮的像素數值。 壓縮的過程其實是按照一種數學函數，把像素的數值按照函數規則映射到另一種數值。 我們使用電腦，應該已經知道每個檔案的性質之中，有所謂的『檔案大小』， 也是用 Byte 作單位來計量。 壓縮之後的數位圖像通常會變得比較小， 也就是說檔案大小應該會小於圖像的資料量。 變小的比率就是『壓縮比』。

『壓縮比』越高，檔案當然就越小，因此比較節省磁碟 (或磁卡) 的空間， 在網路上傳輸也就比較省時。

如果一張數位圖像被壓縮之後，再解壓縮，還原成完全一樣的圖像 (每個像素的數值都沒有改變、色盤也沒有改變)， 那個壓縮的方法就叫做『無失真壓縮法』(lossless compression)。 反之，如果一張數位圖像被壓縮之後，再解壓縮，跟原來的圖像只是「接近」 而不盡相同，那個壓縮的方法就叫做『破壞性壓縮法』(lossy compression)。

在 PC 中常用的 PK-ZIP 壓縮軟體，採用的是『無失真壓縮法』。 聽眾也許經常聽歌曲用的 MP3，採用的是『破壞性壓縮法』。

『無失真壓縮法』通常是應用離散數學這一類數學知識設計的。 『破壞性壓縮法』通常是應用微積分這一類數學知識設計的。

在這張表格上，我們看到，採用『破壞性壓縮法』的最主要優勢就是提高壓縮比。 所以理論上我們應該盡量採用『破壞性壓縮法』。 在實用上，人們手繪的圖像、像素較少的圖像、不同的色彩數量較少的圖像， 並不適合用『破壞性壓縮法』，因為稍微的破壞會使得整個圖像變得很難看。 相對地，拍攝自然景觀的相片、像素很多的圖像、高彩或全彩的圖像， 就可以利用『破壞性壓縮法』，因為稍微的破壞不影響人們觀看的品質。

經過失真壓縮之後，即使重新用無失真壓縮再壓一次，也無法提高圖像的品質。 除非還保存著原來的圖像，否則經過一次失真壓縮之後，失去的品質就再也回不來 (除非設法修補，那就另當別論了)。

在這張表格上，我們看到常見的圖像檔案格式， 以及它們所採用的壓縮法。

回顧最前面展示的小丑圖，它只有 64,000 個像素，只有 81 種不同的顏色， 所以不適合採用『破壞性壓縮法』，因此我們選用壓縮比低一些的『無失真壓縮法』。 在常見的『無失真壓縮法』檔案格式中，我們選用 PNG，因為它沒有版權上的問題。

綜合以上的解釋，讓我們再展示一次圖像、軟體和檔案之間的關係示意圖， 這次包含了壓縮和解壓縮的程序在內。

10. 圖像的呈現

在這個可愛的動畫裡面，我們提示： 是監視器『跑去拿』VRAM 裡面的指示，而不是電腦將指示從 VRAM 『送給』監視器。 監視器每隔一小段時間就去電腦裡面拿 VRAM 裡面的指示， 然後按照只是在螢幕上掃射各種不同的顏色。 因為它掃得很快，我們的眼睛因為視覺暫留的關係， 就覺得那個畫面是靜止的。 一台所謂掃描頻率為 90Hz 的監視器，就是每 90 分之一秒掃描一遍。 掃描頻率越高的監視器，通常看起來越穩定、比較不傷眼睛。

不過，以上所說，並不適用於新式的液晶螢幕或電漿螢幕。 這些新技術的細節，就不在此詳述了。

所以，現在您應該知道，如果電腦沒反應，打螢幕是不公平的！

像素和光點之間的對應，正常的時候是 1 對 1， 也就是一個像素就對應一粒光點。 讓我們重溫縮小版的小丑圖，當像素與光點是正常地 1:1 的時候， 實在是很小，看不見。 如果有必要的話，軟體可以讓一個像素對應更多粒光點，例如 1:64。 這就是『強迫放大』一張圖像的效果。 雖然圖像的畫面是放大了，不過一點也沒有變得比較清楚。

所謂監視器的『解析度』就是每列有幾個光點、一共有幾列光點。 例如 800 x 600 的解析度就是在監視器上， 每列有 800 個光點、一共 600 列。

在同樣大小的監視器屏幕上，解析度越高，當然每粒光點的面積就越小。 所以同樣的圖像，在不同解析度的監視器上看起來大小不同。 這時候，請讀者用自己的電腦實驗。 不論您使用哪一種作業系統，只要是圖形操作介面， 就一定有調整監視器解析度的方法。例如 MS-Windows 是透過在桌面上按滑鼠右鍵， 選擇 [內容] 選單，就能調整。

11. 銘謝

接著要感謝我的工作群：張宗彥出力最多，除了提供三份範例之外， 第一部份的許多圖例是委託他製造的。 周恩冉撰寫了兩份 Java 工具軟體，讓我輕鬆地展示 RGB 和 HSV 色彩座標。 陳柏成做了最後的兩道手續：製造了 36 份 60x60 的小圖標， 當作每份教材網頁的港口圖案； 然後將此 HTML 文件改編成 DOC 文件交付總計畫匯集印刷。

高雄餐旅管理學院的修課學生、中央大學第四屆網路多媒體創作的學生、 東華大學的修課學生，分別成為這份講稿的第一、第二和第三批實驗聽眾， 我在講完第三次之後才決定現在的這份講稿。

最後，感謝巡迴講座計畫的助理彭家鳳小姐， 她總是給我適當的壓力。 也感謝參與此案的四所大學之協力教師與助理同仁們， 很高興認識您們。

課外讀物：
[1] James Murray & van Ryper, "Encyclopedia of Graphics File Formats," O'Reilly, 1994.
[2] 單維彰，”在非藝術院校提供數位藝術創作課程的經驗” http://shann.idv.tw/Teach/liberal/CMW/cmw.html