圖片與多媒體

圖片不只是給眼睛看的

網頁上的圖片有很多種角色：社團海報傳達活動資訊、長條圖呈現數字、波浪線只是裝飾。 看得到畫面的人一眼就能分辨，但下面這些「讀者」看不到圖片：

這一課學三件事：

1. 寫好替代文字，讓沒看到圖的人也拿到同樣的資訊。
2. 讓圖片載入得又快又穩：預留空間、晚點再載入、依螢幕大小給適合的檔案。
3. 放影音與嵌入內容：音訊、影片、字幕，以及 iframe。

img 與替代文字 alt

圖片用 <img>，它和第 3 課的 <br> 一樣是空元素，沒有結束標籤：

<img src="/images/poster.svg" alt="吉他社期初招生海報：9 月 20 日社團博覽會，B 區 12 號攤位">

• src（source）：圖片檔的網址，路徑的寫法和第 4 課的連結相同。
• alt（alternative text）：圖片無法被看到時，用來代替圖片的文字。

alt 要寫什麼，取決於這張圖在頁面上做什麼用：

alt="" 和完全不寫 alt 不一樣：

• alt="" 告訴螢幕閱讀器「這張圖是裝飾，跳過就好」。
• 沒有 alt 時，有些螢幕閱讀器會改唸檔名，使用者會聽到「divider 點 svg」這種沒有意義的聲音。

所以每一張 img 都要有 alt，只是有些 alt 是空的。替代文字也不用寫「圖片」「照片」開頭，螢幕閱讀器本來就會說這是一張圖。

width、height 與 loading="lazy"

網頁的文字通常比圖片先下載完。如果瀏覽器不知道圖片多大，就會先把空間當成 0， 等圖片下載好再把下面的內容整個往下推，正在閱讀或準備點按的人就會被「跳」到別的位置（版面位移）。

在 img 上寫出圖片原本的寬與高，瀏覽器就能先算出長寬比、預留空間：

<img src="chart.svg" alt="…" width="600" height="360">

img { max-width: 100%; height: auto; }   /* 窄螢幕時縮小，但維持 600:360 的比例 */

width、height 寫的是圖片的原始像素大小，數字不加 px。實際顯示多大交給 CSS（第 9 課起）。

頁面很長、圖片很多時，可以讓畫面外面的圖片晚一點再下載：

<img src="chart.svg" alt="…" width="600" height="360" loading="lazy">

loading="lazy"（延遲載入）讓瀏覽器等使用者捲動到附近才下載，目前主流瀏覽器都支援。 但一打開就看得到的圖（例如頁面最上面的主視覺）不要加，否則反而會晚一點才出現。

圖片格式怎麼選

另外還有更新的 AVIF，壓縮率更好，但支援度還不如 WebP，使用時要準備備用格式（下一段的 picture 可以做到）。

判斷的順序可以是：能畫成向量就用 SVG；照片用 WebP 或 JPEG；需要透明又不能失真的截圖用 PNG。 這一課的海報、圖表與分隔線都是 SVG，「活動地點」的插畫是 WebP。

srcset、sizes、picture 與 figure

手機螢幕寬 360 像素，下載一張 2000 像素寬的圖很浪費流量。srcset 可以列出同一張圖的好幾種大小，讓瀏覽器挑：

<img src="campus-480.webp"
     srcset="campus-480.webp 480w, campus-960.webp 960w"
     sizes="100vw"
     alt="學生活動中心外觀插畫">

• 480w、960w：每個檔案真正的寬度（w 是 width 的意思）。
• sizes：這張圖在畫面上會顯示多寬。100vw 是整個視窗寬（vw 是 viewport width，第 9 課會再介紹）；不寫時預設也是 100vw。
• 瀏覽器用「顯示寬度 × 螢幕的像素密度」算出需要多少像素，再挑一個夠用的檔案；src 留給不認得 srcset 的瀏覽器。

srcset 是同一張圖換大小。如果窄螢幕要換成不同裁切的圖（寬橫幅在手機上字太小，改用方形版），用 picture：

<picture>
  <source media="(max-width: 600px)" srcset="banner-narrow.svg">
  <img src="banner-wide.svg" alt="社團博覽會，9 月 20 日在學生活動中心廣場">
</picture>

瀏覽器從上到下看 source，第一個條件成立的就用它；都不成立就用最後的 img。 alt 寫在 img 上，picture 一定要包一個 img。source 也可以用 type="image/avif" 提供新格式，瀏覽器不支援時自動跳過。

圖片需要圖說時，用 figure 把圖與說明包成一組，說明放在 figcaption：

<figure>
  <img src="campus-480.webp" alt="學生活動中心外觀插畫">
  <figcaption>學生活動中心一樓廣場，從正門進來直走就到。</figcaption>
</figure>

figcaption 是看得到的說明，alt 是看不到圖時的替代，兩個不一樣，不要寫成一模一樣的句子。

音訊、影片、字幕與 iframe

<audio controls src="tuning-a440.wav"></audio>

<video controls width="320" height="180" poster="video-poster.svg">
  <source src="strum.mp4" type="video/mp4">
  <source src="strum.webm" type="video/webm">
  <track kind="subtitles" src="strum.zh-Hant.vtt" srclang="zh-Hant" label="中文" default>
  你的瀏覽器無法播放這段影片，<a href="strum.mp4">下載影片</a>。
</video>

WebVTT 字幕檔是純文字，每一段寫出開始與結束時間：

WEBVTT

00:00:00.000 --> 00:00:01.000
第 1 拍：往下刷

兩個提醒：

• autoplay（自動播放）：主流瀏覽器通常會擋下有聲音的自動播放，加上 muted（靜音）才比較確定會自動播放；突然出聲的頁面很干擾人，盡量讓使用者自己按播放。
• 有對白或重要聲音的影片要提供字幕；只有聲音的內容（例如 podcast）可以在旁邊附上逐字稿。

iframe：把別的頁面嵌進來

iframe（inline frame）在頁面裡開一個框，顯示另一個網頁，常見的是嵌入影片平台的播放器或地圖：

<iframe src="https://example.com/map" width="480" height="270"
        title="社辦位置地圖" loading="lazy"></iframe>

• title：說明框裡是什麼。螢幕閱讀器進入 iframe 時會唸出它，沒有 title 時使用者只知道「有一個框架」。
• loading="lazy"：和圖片一樣，畫面外的 iframe 可以晚點載入。
• 嵌入別人的網站等於在你的頁面執行對方的內容；只嵌入你信任的來源。很多網站也會拒絕被別人嵌入。

練習沙箱有兩個安全限制：載入不了另外的字幕檔，所以字幕只在上面的範例說明；也連不到外部網站，所以下面的 iframe 用 srcdoc 屬性直接把一小段 HTML 寫在框裡，代替 src 的網址，title 的寫法完全一樣。

重點整理

• 每張 img 都要有 alt：寫出圖要傳達的資訊；當連結時寫目的地；純裝飾寫 alt=""。
• 寫上 width、height 讓瀏覽器預留空間；畫面外的圖加 loading="lazy"，一打開就看得到的圖不要加。
• 向量圖用 SVG，照片用 WebP 或 JPEG，透明又不能失真的截圖用 PNG。
• srcset＋sizes 給同一張圖的不同大小；picture＋source media 在不同螢幕換不同的圖；figure＋figcaption 加圖說。
• audio、video 記得加 controls；影片用 poster 設定封面，用 track 提供字幕；iframe 要有 title。

下一課講表格：怎麼標出欄與列的標題、合併儲存格，以及什麼內容不該用表格。