圖像的數碼呈現：KS3 電腦科學習筆記
歡迎閱讀這份關於電腦如何看見、儲存和顯示圖像的學習指南！你有沒有想過，寵物的照片或最喜愛的電子遊戲截圖，究竟是如何儲存在電腦裡面的？電腦並不能像我們的眼睛那樣看見顏色或形狀；它們只懂得二進制（即由 \(0\) 和 \(1\) 組成的數列）。在這一章中，你將會發現電腦科學家如何運用巧妙的方法，把數字轉化成美麗的數碼藝術作品。
即使一開始覺得數學和二進制有點抽象，也完全不用擔心。我們會用簡單的生活例子，一步一步為你拆解每個概念！
---1. 數碼圖像：像素與網格
甚麼是像素（Pixel）？
像素（Pixel）這個詞是 picture element（圖像元素）的縮寫。像素是數碼圖像中最小的單一色點。
你可以把數碼圖像想像成由微小方形瓷磚拼砌而成的巨大馬賽克。如果站在遠處看，你會看到一幅平滑完整的圖畫；如果用放大鏡仔細近看，就會看到每一塊獨立的方形瓷磚。在電腦科學中，每一塊方形瓷磚就是一個像素。
點陣圖（點陣圖形 / 光柵圖形）
點陣圖（Bitmap graphic，亦稱 raster graphic）是由微小像素組成的網格圖像。對於網格中的每一個像素，電腦都會儲存一組代表其顏色的二進制編碼。
黑白（單色）圖像
最簡單的圖像類型只使用兩種顏色：黑與白。因為只有兩個選擇，我們每個像素只需要 \(1\text{ bit}\)（1 位元）來儲存顏色：
• \(0 = \text{Black}\)（黑色）
• \(1 = \text{White}\)（白色）
（備註：有些系統可能會用 \(0\) 代表白色、\(1\) 代表黑色，但基本原理不變：\(1\text{ bit}\) 可以儲存 \(2^1 = 2\) 種不同的顏色。）
快速示例：
想像一個在 \(4\text{ pixels}\) 闊乘 \(4\text{ pixels}\) 高的網格上的微小心形圖案。電腦會把它儲存為一串二進制位元，例如：\(0110111111110110\)。當電腦讀取這個網格時，會把每個 \(0\) 變成黑色、每個 \(1\) 變成白色，從而在螢幕上繪畫出這個形狀！
重點歸納： 點陣圖是由像素組成的網格。在基本的黑白圖像中，每個像素只需佔用 \(1\text{ bit}\) 的儲存空間（\(0\) 或 \(1\)）。
---2. 色彩深度（位元深度）
甚麼是色彩深度（Colour Depth）？
黑白圖像雖然簡單，但全彩照片又該如何處理？為了顯示更多顏色，我們必須為每個像素使用更多的位元（bits）。色彩深度（Colour depth，亦稱位元深度 bit depth）是指用來表示單一像素顏色的位元數量。
可用顏色數量的計算公式
色彩深度每增加 \(1\text{ bit}\)，我們能夠顯示的可用顏色數量就會倍增。計算公式如下：
\(\text{Number of Colours} = 2^n\)
（其中 \(n\) 為每個像素的色彩深度，以位元 bit 為單位）
讓我們看看當每個像素的位元數增加時，顏色的數量會如何增長：
• \(1\text{ bit per pixel}\)： \(2^1 = 2\text{ colours}\)（單色 Monochrome）
• \(2\text{ bits per pixel}\)： \(2^2 = 4\text{ colours}\)（例如黑、白、紅、藍）
• \(3\text{ bits per pixel}\)： \(2^3 = 8\text{ colours}\)
• \(4\text{ bits per pixel}\)： \(2^4 = 16\text{ colours}\)
• \(8\text{ bits per pixel}\)： \(2^8 = 256\text{ colours}\)
• \(24\text{ bits per pixel}\)（全彩 / 真彩色 True Colour）： \(2^{24} = 16,777,216\text{ colours}\)
甚麼是 24-bit「全彩色」（True Colour）？
現今大部分智能手機、相機和電腦顯示器都採用 24-bit 色彩。這個系統是基於光學三原色：紅、綠、藍（RGB）。
• 紅色佔 \(8\text{ bits}\)（數值由 \(0\) 至 \(255\)）
• 綠色佔 \(8\text{ bits}\)（數值由 \(0\) 至 \(255\)）
• 藍色佔 \(8\text{ bits}\)（數值由 \(0\) 至 \(255\)）
• 總計 = \(8 + 8 + 8 = 24\text{ bits per pixel}\)
擁有超過 \(16.7\text{ million}\)（一千六百七十萬）種顏色，數碼照片在人眼看來就顯得極為自然逼真！
重點歸納： 色彩深度愈高，顏色就愈逼真，但每個像素佔用的儲存位元亦會愈多。
---3. 圖像解像度與尺寸
認識解像度（Resolution）
在初中（KS3）階段，解像度是指組成點陣圖的像素總數。通常表示為：
\(\text{Width (in pixels)} \times \text{Height (in pixels)}\)
例如，解像度為 \(100 \times 100\text{ pixels}\) 的圖像，總共包含 \(10,000\text{ pixels}\)。
顯示與打印密度
解像度亦可用來描述螢幕或紙張上像素排列的緊密程度，測量單位為 PPI（pixels per inch，每吋像素）或 DPI（dots per inch，每吋點數）。
解像度的權衡取捨
• 較高解像度： 圖像包含更多像素 \(\implies\) 圖像更清晰、細緻 \(\implies\) 檔案容量較大。
• 較低解像度： 圖像像素較少 \(\implies\) 細節較少，可能出現起格或模糊 \(\implies\) 檔案容量較小。
重點歸納： 解像度是像素網格的大小（\(\text{闊度} \times \text{高度}\)）。像素愈多，畫質愈好，但檔案亦愈大。
---4. 計算點陣圖的檔案大小
只要按照以下簡單步驟，就能輕鬆計算出未壓縮圖像的原始檔案大小。
主要計算公式
\(\text{File Size (in bits)} = \text{Width (pixels)} \times \text{Height (pixels)} \times \text{Colour Depth (bits)}\)
將位元（Bits）轉換為字節（Bytes）
由於以位元（bits）計算的檔案大小通常數值龐大，我們一般會轉換為字節（Bytes）、千字節（Kilobytes, KB）或百萬字節（Megabytes, MB）：
• \(1\text{ Byte (B)} = 8\text{ bits (b)}\)
• \(\text{File Size (Bytes)} = \frac{\text{File Size in bits}}{8}\)
• \(1\text{ Kilobyte (KB)} = 1,000\text{ Bytes}\)（或 \(1,024\text{ Bytes}\)）
• \(1\text{ Megabyte (MB)} = 1,000\text{ KB}\)
計算範例
題目： 一幅圖像的闊度為 \(10\text{ pixels}\)、高度為 \(20\text{ pixels}\)，色彩深度為 \(4\text{ bits}\)。請計算其檔案大小（以 Bytes 為單位）。
第 1 步：計算像素總數
\(\text{Total pixels} = 10 \times 20 = 200\text{ pixels}\)
第 2 步：乘以色彩深度以得出位元數（bits）
\(\text{File size in bits} = 200 \times 4\text{ bits} = 800\text{ bits}\)
第 3 步：將位元轉換為字節（Bytes）（除以 \(8\)）
\(\text{File size in Bytes} = \frac{800}{8} = 100\text{ Bytes}\)
重點歸納： 將 \(\text{闊度} \times \text{高度} \times \text{色彩深度}\) 即可算出位元數（bits），然後除以 \(8\) 就能得出字節數（Bytes）！
---5. 元數據（Metadata）：關於數據的數據
甚麼是元數據？
想像你收到一長串二進制數字，例如 \(0110010101...\)。如果沒有任何說明指引，電腦就無法知道圖像的闊度和高度是多少，或者每個像素由多少個位元組成！它甚至不知道一行像素在哪裡結束、下一行在哪裡開始。
元數據（Metadata）是與原始像素數據一同儲存在圖像檔案內的額外資訊，用以指示電腦如何正確重組並顯示該圖畫。
元數據包含甚麼？
• 圖像尺寸（Dimensions）： 以像素為單位的闊度與高度（例如 \(1920 \times 1080\)）
• 色彩深度（Colour Depth）： 每個像素的位元數（例如 \(24\text{ bits}\)）
• 解像度 / DPI： 用於確保正確打印與顯示
• 檔案格式（File Format）： 數據的編碼方式
• EXIF 數據： 拍攝日期與時間、相機型號裝置詳情，以及 GPS 定位資訊
重點歸納： 元數據就像是存放在圖像檔案內的「說明書」，讓軟件知道如何在螢幕上繪畫出這些像素。
---6. 點陣圖 vs 向量圖
電腦圖像並非全由像素網格組成。另一種重要的數碼圖形是向量圖（Vector graphic）。
向量圖（Vector Graphics）：幾何形狀與數學
• 運作原理： 向量圖並非儲存個別像素，而是由幾何形狀、線條、曲線和點組成，並由數學公式及屬性（例如起點／終點座標、線條粗細、填充顏色和半徑）定義而成。
• 縮放能力： 向量圖具備無限縮放的特性。你可以隨意放大或縮小，畫面永遠不會變模糊或起格，因為電腦只需重新計算數學公式！
• 最佳用途： 標誌（Logo）、圖示（Icon）、字體設計、圖表及卡通插圖。
點陣圖（Bitmap Graphics）：像素網格
• 運作原理： 由固定網格的個別像素組成。
• 縮放能力： 如果放大點陣圖，會出現像素化（Pixelation，即個別方形像素變得明顯可見，弧形邊緣呈現鋸齒狀及起格）。
• 最佳用途： 複雜、細緻且具有連續色調的圖像，例如數碼照片。
比較總結：
• 相機拍攝的照片 \(\implies\) 點陣圖（色彩變化豐富，由像素組成）
• 印在巨型廣告牌與名片上的公司標誌 \(\implies\) 向量圖（需要隨意縮放而不失清晰度）
重點歸納： 點陣圖使用像素網格（適合照片，但放大時會起格）。向量圖使用數學公式（適合標誌，在任何尺寸下都保持極致清晰）。
---7. 常見陷阱與溫習要點
小心避免以下常犯錯誤！
陷阱 1：混淆「每像素位元數」與「顏色數量」
錯誤觀念：「色彩深度為 \(4\text{ bits}\) 代表有 \(4\) 種顏色。」
正確觀念： 顏色的數量是 \(2^n\)。因此色彩深度為 \(4\text{ bits}\) 時，可提供 \(2^4 = 16\text{ colours}\)（16 種顏色）！
陷阱 2：計算 Bytes 時忘記除以 \(8\)
記住： 公式 \(\text{Width} \times \text{Height} \times \text{Colour Depth}\) 算出的答案單位是 bits。如果考試題目要求以 Bytes 作答，請必定要把答案除以 \(8\)。
陷阱 3：誤以為向量圖放大後會起格
記住： 只有點陣圖在放大時才會起格。向量圖會重新計算其數學路徑，隨時保持無比清晰。
本章快速溫習清單
• 像素（Pixel）是點陣圖中最小的色點。
• 色彩深度（Colour depth）是每個像素佔用的位元數（\(\text{Colours} = 2^n\)）。
• 解像度（Resolution）是像素網格的尺寸（\(\text{Width} \times \text{Height}\)）。
• 檔案大小（以 bits 計算） = \(\text{Width} \times \text{Height} \times \text{Colour Depth}\)。
• 元數據（Metadata）是關於數據的數據，指導電腦如何轉譯並渲染圖像。
• 點陣圖（Bitmap）由像素網格組成，適合相片；向量圖（Vector）由數學形狀組成，可隨意縮放而不損畫質。