DSE ICT｜多媒體與網頁製作備課指引（導師用）｜檔案大小、格式取捨、無障礙

2026-11-02

1200×800 的 24 位元圖片，未壓縮要 2.75 MiB；學生次次都答「因為大所以慢」，但答唔出大幾多、點計出來。呢一堂就係教佢計。

本堂目標　學生能夠：① 用「闊×高×位元深度÷8」算出 1200×800 的 24 位元圖片大小（2.75 MiB），並算出 12:1 壓縮後約 234 KiB；② 按用途在點陣圖與向量圖之間取捨，講出兩個理由；③ 為 1 張圖的網頁寫出 alt 文字與標題層級，符合基本無障礙要求。

01　先備知識（開課前 3 分鐘快檢）

以下任何一項未過關，本堂就會卡住，先補該項：

技能	快檢題	過關標準
單位換算	1 KiB 等於幾多位元組	1,024 位元組
二進位	8 位元可以表示幾多種顏色	2 的 8 次方，即 256 種
基本 HTML	圖片的標籤同屬性叫什麼	img 標籤，src 與 alt 屬性

02　課堂流程（60 分鐘）

時間	環節	導師做什麼	學生做什麼
0–8 分	單位熱身	由 1 KiB 數到 1 MiB	換算三條全對
8–22 分	檔案大小計算	示範闊×高×深度÷8	算出 2.75 MiB
22–34 分	格式取捨	同一張圖比較三種格式	講出兩個取捨理由
34–46 分	網頁無障礙	示範 alt 文字與標題層級	每張圖都有 alt
46–54 分	限時練習	四條計算＋一條解釋	全部做完
54–60 分	離場檢查	三題快問快答	三題全對才下課

03　講解腳本（照著說就可以）

第一幕：檔案大小係計出來，唔係估出來

公式：闊 × 高 × 位元深度 ÷ 8，單位是位元組。
1200 × 800 × 24 ÷ 8 = 2,880,000 位元組 = 2.75 MiB。
要學生自己按一次計數機，唔好只抄答案；考試改數字就即刻見真章。

要學生講：位元深度由 24 位加到 32 位，檔案大小會變成幾倍。

第二幕：壓縮係用質素換空間，要講清代價

12:1 壓縮後約 234 KiB，即省 92%；代價是細節模糊，尤其文字邊緣。
網頁預算 500 KiB、圖片佔 60%，即 300 KiB，只夠放約 1 張這種圖。
向量圖用數學描述，40 個節點約 1280 位元組，放大唔失真，但影相做唔到。

要學生講：logo 同相片分別應該用邊種格式，為什麼。

第三幕：無障礙唔係加分項，係基本要求

每張有意義的圖要有 alt 文字，寫「圖片說明」而唔係「image」；純裝飾圖用空 alt。
標題層級要順序：h1 一個，然後 h2、h3，唔可以跳級。
對比度與字型大小同樣影響可讀性，唔止 alt 一項。

要學生講：一張用作按鈕的圖，alt 應該寫什麼。

04　必教題型與步驟

題型	例子	步驟	答案
計算	圖片檔案大小	闊×高×深度÷8，再換算單位	2.75 MiB
計算	壓縮後大小	原大小÷壓縮比	234 KiB
解釋	格式取捨	講用途、質素、檔案大小三點	每點一句
實作	網頁圖片標記	img 加 src、alt，配標題層級	alt 非空且具體

合理性檢查（一定要教）：計完要反向檢查：把答案乘 8 除回闊高深度，睇返係唔係原本數字；單位要寫清楚 KiB 定 MiB，唔寫單位等於錯。

05　獨立練習三題

題目	答案	想觀察什麼
算出 1200×800 的 24 位元圖大小	用公式逐步寫	2.75 MiB
同一張圖 12:1 壓縮後幾大	原大小÷壓縮比	234 KiB
為三張圖寫 alt 文字	具體描述內容與功能	三句都非空
解釋為什麼 logo 用向量圖	放大不失真、檔案細	兩個理由

06　學生常見錯誤與糾正句

錯誤	學生通常這樣寫	導師這樣說
忘記除以 8	把位元當位元組，答案大 8 倍	「位元深度係位元，唔係位元組。」
單位混淆 KiB 與 KB	答案數量級錯	「1,024 同 1,000 唔可以撈埋。」
只講「大所以慢」	解釋題拿不到分	「大幾多？用數字講。」
alt 寫成 image	無障礙分全失	「alt 要講內容，唔係講佢係一張圖。」

07　家課建議（直接指到練習卷題號）

三條檔案大小計算題　練習卷第 1 至 3 題
一題格式取捨解釋　練習卷第 5 題
為一個四圖網頁寫 alt 與標題層級　練習卷第 6 題

08　離場檢查（最後 5 分鐘）

題目	答案	判定
圖片大小的公式是什麼？	闊×高×位元深度÷8	記得除 8
1200×800×24 位元等於幾大？	2.75 MiB	約 2812 KiB
alt 文字應該寫什麼？	描述內容或功能	唔可以寫 image

09　導師常問

學生計數經常漏除 8，點教？

要求每次寫公式，並用反向檢查驗算。

要唔要背所有格式？

背三種就夠：JPEG 相片、PNG 透明、SVG 圖示。

無障礙會唔會考？

會，alt 與標題層級屬常考解釋題。

立即免費搵導師導師登記 →

本頁為 TutorZone 導師備課指引，內容由 TutorZone 團隊編寫；題目與流程為原創，並非任何學校或出版社的教材。