圖片可以說明概念、展示產品、傳達資料，或裝飾網頁。
使用 HTML 的 <img> 元素嵌入圖片：
<img
src="images/classroom.jpg"
alt="學生在課室內練習 HTML"
width="800"
height="450"
>瀏覽器會從 src 指定的位置取得圖片，並在網頁內顯示。
選擇用途清晰的圖片，提供適當的替代文字，並保持合理的檔案大小。
15.1 <img> 元素
<img> 是空元素（void element），不包含子元素，也沒有結束標籤。
正確：
<img src="images/course-banner.jpg" alt="HTML 入門課程">錯誤：
<img src="images/course-banner.jpg">
HTML 入門課程
</img>重要屬性包括：
| 屬性 | 用途 |
|---|---|
src | 圖片 URL |
alt | 替代文字 |
width | 預期寬度，以 CSS 像素表示 |
height | 預期高度，以 CSS 像素表示 |
srcset | 可供選擇的圖片資源 |
sizes | 使用寬度候選圖片時的預期顯示尺寸 |
loading | 載入提示 |
decoding | 解碼提示 |
15.2 圖片位置與路徑
src 可以使用相對或絕對 URL。
相對路徑
<img
src="images/library.jpg"
alt="公共圖書館內的書架"
>上一層資料夾路徑
<img
src="../images/library.jpg"
alt="公共圖書館內的書架"
>絕對 URL
<img
src="https://example.com/images/library.jpg"
alt="公共圖書館內的書架"
>相對路徑會根據文件的基底 URL 解析，通常就是 HTML 網頁的 URL。
URL 應使用正斜線。不要連結至 C:\Pictures\library.jpg 等本機電腦路徑。
外部圖片也會帶來可用性、私隱及使用權限方面的考慮。自行託管獲授權的副本，可以提供更大的控制權。
15.3 撰寫替代文字
alt 屬性為無法感知圖片的人提供文字替代，包括使用螢幕閱讀器的讀者。
替代文字應配合圖片在目前內容中的用途，不只是描述外觀。
<img
src="images/practice-session.jpg"
alt="學習者正在瀏覽器中檢查 HTML 網頁"
>好的替代文字通常會：
- 傳達相關資訊。
- 避免不必要的細節。
- 不會無故重複附近文字。
- 避免「這是一張……的圖片」等字句，除非圖片類型本身很重要。
- 不會以檔案名稱作為描述。
同一圖片在不同語境中，可能需要不同的替代文字。
例如，課室照片可以用來展示學習活動，也可以用來說明課室的無障礙設施。這些用途需要不同的描述。
15.4 裝飾性圖片
如果圖片沒有增加資訊，只用作裝飾，應使用空的替代文字：
<img src="images/decorative-divider.svg" alt="">空的 alt 告訴輔助技術，這張圖片不需要被宣讀。
不要直接省略 alt：
<!-- 一般裝飾性圖片應避免這種寫法。 -->
<img src="images/decorative-divider.svg">沒有替代文字時，螢幕閱讀器可能會宣讀檔案名稱或 URL。
裝飾圖片也可以透過 CSS 套用：
.page-banner {
background-image: url("../images/abstract-pattern.svg");
}CSS 背景圖片沒有 HTML 替代文字。不要將它們作為傳達重要資訊的唯一方式。
15.5 功能性圖片
當圖片用作連結或控制項時，替代文字應傳達目的地或操作。
只有圖片的首頁連結：
<a href="index.html">
<img
src="images/learning-centre-logo.svg"
alt="學習中心首頁"
width="160"
height="48"
>
</a>圖示旁邊已有可見的連結文字：
<a href="downloads/course-guide.pdf">
<img src="images/download.svg" alt="" width="20" height="20">
下載課程指南
</a>可見文字已說明連結用途，因此圖示可以使用空的替代文字。
避免「按此」或「按鈕圖片」等含糊描述。
15.6 複雜圖片與文字圖片
圖表、示意圖及地圖可能包含太多資訊，無法以短句 alt 完整表達。
應提供簡潔的替代文字，並在附近加入更完整的說明：
<figure>
<img
src="images/course-enrolment.png"
alt="比較三個課程報讀人數的棒形圖"
width="800"
height="500"
aria-describedby="enrolment-summary"
>
<figcaption id="enrolment-summary">
HTML 有 40 位學員，CSS 有 30 位，JavaScript 有 25 位。
</figcaption>
</figure>對更詳細的圖表，可以加入表格或較長的文字說明，提供相關資料及關係。
如果一般 HTML 文字已能滿足需要，就不要將重要文字放在圖片內。HTML 文字更容易放大、翻譯、選取及調整。
如果圖片包含重要字句，應確保替代文字或附近內容也提供這些字句。
15.7 寬度、高度與版面穩定性
知道圖片尺寸時，應加入 width 和 height：
<img
src="images/classroom.jpg"
alt="設有無障礙工作站的空置課室"
width="1200"
height="800"
>屬性值是數字，不包含單位。
對一般圖片而言，使用與檔案相符的尺寸，可以向瀏覽器提供長寬比例資訊，讓它在圖片載入前預留空間。
這有助減少非預期的版面移動。
使用 CSS 讓圖片配合不同螢幕：
img {
max-width: 100%;
height: auto;
}圖片可以縮小以配合容器，同時保持比例。
15.8 使用 CSS 裁切圖片
某些設計需要圖片填滿一致的框架：
.course-thumbnail {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}object-fit: cover 會保持圖片比例並填滿框架，但可能裁掉部分內容。
其他實用值包括：
| 值 | 行為 |
|---|---|
contain | 顯示完整圖片，可能留下空白 |
cover | 填滿框架，可能裁切圖片 |
fill | 填滿框架，可能扭曲比例 |
可以調整裁切位置：
.course-thumbnail {
object-fit: cover;
object-position: center top;
}應檢查裁切是否移除了重要內容、人物面孔、標籤或指示。
15.9 使用 <figure> 與 <figcaption> 加入圖說
<figure> 適合圖片連同圖說等可以獨立理解的內容：
<figure>
<img
src="images/html-workshop.jpg"
alt="學員在工作坊中互相比較製作的網頁"
width="900"
height="600"
>
<figcaption>
學員正在檢視他們的第一個 HTML 網頁。
</figcaption>
</figure><figcaption> 提供可見圖說，必須是所屬 <figure> 的第一個或最後一個子元素。
圖說與替代文字的職責不同：
- 替代文字：代替圖片所傳達的相關資訊。
- 圖說：提供可見的背景說明、評論或來源標示。
有圖說不代表可以省略適當的 alt。
不是每張圖片都需要 <figure>。例如，按鈕內的小圖示通常不需要。
15.10 選擇圖片格式
應按圖片內容及所需的瀏覽器支援選擇格式。
| 格式 | 常見用途 |
|---|---|
| JPEG | 照片及連續色調圖片 |
| PNG | 無損點陣圖片及透明效果 |
| WebP | 使用高效率壓縮的照片或圖形 |
| AVIF | 許多照片類圖片的高效率壓縮 |
| SVG | 可縮放圖示、標誌及示意圖 |
| GIF | 簡單動畫及較舊的圖形 |
沒有一種格式最適合所有圖片。
應比較畫質及檔案大小。現代格式不一定對每張來源圖片都產生更小的檔案。
對來自不可信來源的 SVG，應進行適當的安全檢查。以圖片方式嵌入的 SVG，與直接插入文件的 SVG，具有不同限制。
15.11 使用 srcset 提供響應式圖片
srcset 提供多個候選圖片，讓瀏覽器選擇適當資源。
像素密度候選圖片
對預期以固定尺寸顯示的圖片：
<img
src="images/logo.png"
srcset="
images/logo.png 1x,
images/logo-2x.png 2x
"
alt="學習中心"
width="160"
height="48"
>第二個檔案應包含高像素密度螢幕所需的額外像素。
寬度候選圖片
對顯示寬度會改變的圖片：
<img
src="images/classroom-800.jpg"
srcset="
images/classroom-400.jpg 400w,
images/classroom-800.jpg 800w,
images/classroom-1200.jpg 1200w
"
sizes="(max-width: 50rem) 100vw, 50rem"
alt="學員在課室內合作學習"
width="800"
height="450"
>在這個例子中：
400w、800w和1200w表示各檔案的實際像素寬度。sizes描述不同條件下的預期顯示寬度。- 瀏覽器會考慮螢幕像素密度及其他因素，選擇候選圖片。
sizes 應與實際版面一致，包括內邊距及欄位寬度。
不要在同一個 srcset 中混合使用 w 和 x 描述符。
15.12 使用 <picture>
<picture> 可以提供不同圖片格式，或不同的裁切與構圖版本。
格式替代方案
<picture>
<source srcset="images/classroom.avif" type="image/avif">
<source srcset="images/classroom.webp" type="image/webp">
<img
src="images/classroom.jpg"
alt="學員在課室內合作學習"
width="800"
height="450"
>
</picture>瀏覽器會使用第一個符合條件的來源。<img> 提供預設備援圖片及替代文字。
配合螢幕調整構圖
如果窄螢幕需要不同的裁切或構圖，可以使用媒體條件：
<picture>
<source
media="(max-width: 40rem)"
srcset="images/workshop-close-up.jpg"
>
<img
src="images/workshop-wide.jpg"
alt="導師正在向一組學員示範 HTML"
>
</picture>確保所有版本都傳達替代文字所描述的意義。
如果不同版本的比例不同，應提供適當尺寸或 CSS，讓版面預留正確空間。
15.13 載入與效能
大型圖片可能拖慢網頁載入，並消耗大量頻寬。
實用做法包括：
- 將來源圖片調整至符合實際顯示需要的尺寸。
- 壓縮圖片，同時保持可接受的畫質。
- 按需要提供響應式候選圖片。
- 加入尺寸，減少版面位移。
- 為適合的畫面外圖片使用延遲載入。
例如：
<img
src="images/workshop-gallery.jpg"
alt="學員正在展示完成的網頁"
width="900"
height="600"
loading="lazy"
decoding="async"
>loading="lazy" 讓瀏覽器延遲取得圖片，直到它接近可視區域。
decoding="async" 提示瀏覽器，圖片解碼不應阻礙其他內容的下一次呈現。
不要自動為首屏的主要圖片使用延遲載入。
對已確認的重要圖片，fetchpriority="high" 可能有用，但不應套用至每張圖片。
15.14 完整範例：無障礙圖片與圖說
以下獨立範例將 SVG 插圖嵌入圖片 URL，因此不需要外部圖片檔案。它示範替代文字、尺寸、響應式大小，以及可見圖說。
id: hong-kong-html-images
name: 圖片 — 無障礙插圖與圖說
type: html
content: |-
<!doctype html>
<html lang="zh-Hant-HK">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圖片 | HTML 學習指南</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
color: #222;
background: #f5f7fa;
font-family: system-ui, sans-serif;
line-height: 1.8;
}
main {
max-width: 48rem;
margin-inline: auto;
padding: 2rem 1rem;
}
h1,
h2 {
color: #005ea8;
line-height: 1.4;
}
.image-card {
margin-block: 1.5rem;
margin-inline: 0;
overflow: hidden;
border: 1px solid #767676;
border-radius: 0.5rem;
background: white;
}
.image-card img {
display: block;
width: 100%;
height: auto;
}
figcaption {
padding: 1rem 1.25rem;
}
.note {
padding: 1rem;
border-inline-start: 4px solid #005ea8;
background: #eaf2f8;
}
</style>
</head>
<body>
<main>
<h1>有意義的圖片</h1>
<p>
插圖可以輔助說明。
無法感知圖片時，替代文字會提供相關資訊。
</p>
<figure class="image-card">
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%23eaf2f8'/%3E%3Crect x='170' y='65' width='460' height='290' rx='16' fill='%23222'/%3E%3Crect x='190' y='85' width='420' height='245' rx='4' fill='%23fff'/%3E%3Crect x='220' y='115' width='210' height='22' rx='4' fill='%23005ea8'/%3E%3Crect x='220' y='160' width='350' height='12' rx='4' fill='%23767676'/%3E%3Crect x='220' y='186' width='300' height='12' rx='4' fill='%23767676'/%3E%3Crect x='220' y='225' width='350' height='75' rx='4' fill='%23eaf2f8'/%3E%3Cpath d='M145 355H655L700 390H100Z' fill='%23565f69'/%3E%3Crect x='325' y='365' width='150' height='10' rx='4' fill='%23cbd5df'/%3E%3C/svg%3E"
alt="手提電腦插圖，螢幕上的網頁包含標題、文字及以背景色突出的區塊"
width="800"
height="450"
>
<figcaption>
簡單的網頁插圖。
圖片用來輔助課程說明，指引則保留為一般 HTML 文字。
</figcaption>
</figure>
<section aria-labelledby="image-checklist">
<h2 id="image-checklist">圖片檢查清單</h2>
<ul>
<li>選擇能配合內容的圖片。</li>
<li>按圖片用途撰寫替代文字。</li>
<li>加入準確的 width 及 height 值。</li>
<li>讓圖片可以配合較小螢幕。</li>
<li>將重要字句保留為文字內容。</li>
</ul>
</section>
<p class="note">
替代文字應描述圖片在目前內容中的用途。
純裝飾圖片則應使用空的 alt 屬性。
</p>
</main>
</body>
</html>在這個範例中：
<img>嵌入插圖。alt描述相關內容。width和height提供比例資訊。- CSS 讓圖片縮小而不變形。
<figcaption>提供可見說明。- 沒有 JavaScript 時，網頁仍然有用。
嵌入圖片資料方便這個示範使用。較大的專案通常使用獨立圖片檔案，更容易維護及快取。
15.15 排解問題與負責任地使用圖片
如果圖片沒有顯示：
- 檢查路徑、檔案名稱、副檔名及大小寫。
- 確認檔案存在。
- 檢查瀏覽器的 **Network（網絡）**面板。
- 檢查 CSS 是否隱藏圖片，或設定了不適當的尺寸。
- 確認檔案有效，而且使用支援的格式。
- 檢查安全政策及外部託管限制。
發布圖片前，應確認你有權使用。遵守授權及來源標示要求，並考慮可識別人物的私隱。
15.16 常見錯誤
| 錯誤 | 較好的做法 |
|---|---|
為一般圖片省略 alt | 提供有意義的文字或 alt="" |
| 不必要地描述裝飾圖片 | 使用空的替代文字 |
| 只描述功能圖示的外觀 | 描述操作或目的地 |
| 以為圖說可以取代替代文字 | 讓兩者各自履行適當職責 |
| 將圖片拉伸至比例失真 | 保持長寬比例 |
| 裁掉重要資訊 | 在不同尺寸檢查裁切結果 |
| 上載過大的檔案 | 適當調整尺寸及壓縮 |
| 為主要可見圖片使用延遲載入 | 及時載入重要圖片 |
提供不準確的 srcset 寬度描述符 | 配合檔案的實際像素寬度 |
| 不必要地將重要文字製成圖片 | 優先使用一般 HTML 文字 |
| 將隱藏圖片視為私人內容 | 不要傳送機密內容至瀏覽器 |
| 未檢查使用權便複製圖片 | 核實權限及來源標示要求 |
本章總結： 使用 <img> 嵌入圖片，按用途撰寫替代文字，並在圖說能增加背景資訊時使用它。保持圖片比例、優化載入，並確保重要資訊仍然可以被存取。
