圖片

裝飾圖片 (例如按鈕上的背景漸層，或是內容區段或整個網頁的背景圖片) 屬於呈現元素，應使用 CSS 套用。如果圖片可為文件提供背景資訊，則屬於內容，應以 HTML 嵌入。

加入圖片的主要方法是使用 <img> 標記，並透過 src 屬性參照圖片資源，以及使用 alt 屬性描述圖片。

<img src="images/eve.png" alt="Eve">

<img> 上的 srcset 屬性和 <picture> 元素都提供方法，可納入多個圖片來源和相關聯的媒體查詢，每個來源都有備用圖片來源，因此系統能根據裝置的解析度、瀏覽器功能和可視區域大小，放送最合適的圖片檔案。srcset 屬性可根據解析度提供多個圖片版本，並搭配 sizes 屬性，根據瀏覽器檢視區塊大小提供圖片版本。

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

您也可以使用 <picture> 元素和 <source> 子項執行這項操作，這會將 <img> 設為預設來源。

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

除了這些內建的 HTML 回應式圖片方法，HTML 也可透過各種屬性提升圖片的算繪效能。<img> 標記 (因此圖形提交按鈕 <input type="image">) 可以包含 height 和 width 屬性，設定圖片的長寬比，減少內容版面配置位移。lazy 屬性可啟用延遲載入。

HTML 也支援直接使用 <svg> 納入 SVG 圖片，但使用 .svg 副檔名 (或做為 data-uri) 的 SVG 圖片可使用 <img> 元素內嵌。

每個前景圖片至少應包含 src 和 alt 屬性。

src 檔案是內嵌圖片的路徑和檔案名稱。src 屬性用於提供圖片的網址。瀏覽器接著會擷取資產，並將其轉譯至網頁。<img> 需要這個屬性。 如果沒有這個檔案，就無法算繪任何內容。

alt 屬性會提供圖片的替代文字，為無法看到畫面的使用者提供圖片說明 (例如搜尋引擎、輔助技術，甚至是 Alexa、Siri 和 Google 助理)，且如果圖片無法載入，瀏覽器可能會顯示替代文字。除了網路速度緩慢或頻寬受限的使用者之外，alt 文字在 HTML 電子郵件中也相當實用，因為許多使用者會在電子郵件應用程式中封鎖圖片。

<img src="path/filename" alt="descriptive text" />

如果圖片是 SVG 檔案類型，也請一併加入 role="img"，這是因為 VoiceOver 錯誤所致。

<img src="switch.svg" alt="light switch" role="img" />

撰寫有效的alt圖片說明

替代屬性應簡短扼要，提供圖片傳達的所有相關資訊，同時省略文件中其他內容多餘或無用的資訊。撰寫文字時，語氣應與網站的語氣一致。

如要撰寫有效的替代文字，請想像您正在向看不見網頁的人朗讀整個網頁。使用語意 <img> 元素，讓螢幕閱讀器使用者和機器人瞭解該元素是圖片。在 alt 中加入「這是『』的圖片/螢幕截圖/相片」是多餘的。使用者不需要知道有圖片，但需要瞭解圖片傳達的資訊。

一般來說，你不會說「這是戴著紅帽的狗，但圖片很粗糙」。而是要根據文件其餘部分的脈絡，傳達圖片的內容。您傳達的內容會根據周圍文字的情境和內容而有所不同。

舉例來說，系統會根據情境，以不同方式描述狗狗的相片。如果 Fluffy 是 Yuckymeat 狗食評論旁邊的虛擬人偶，alt="Fluffy" 就足夠。

如果這張相片是動物收容所網站上 Fluffy 領養頁面的一部分，目標對象就是有意領養狗狗的人。文字應描述圖片中與採用者相關的資訊，且這些資訊不會在周圍文字中重複出現。例如alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth" 。一般來說，收養頁面的文字會包含可收養寵物的品種、年齡和性別，因此不需要在替代文字中重複這些資訊。但狗狗的書面傳記可能不會包含毛髮長度、顏色或玩具偏好。

重要的是，我們並未完整描述圖片。潛在狗主人不需要知道狗狗是在室內還是室外，也不需要知道狗狗戴著紅色項圈和藍色牽繩。

使用圖片做為圖示時，alt 屬性會提供可存取的名稱，因此請傳達圖示的意義，而非圖片的說明。舉例來說，放大鏡圖示的 alt 屬性為 search。這個圖示看起來像房子，替代文字為「home」。5 吋軟碟圖示的說明為 save。如果使用兩個 Fluffy 圖示來表示最佳做法和反模式，戴著綠色貝雷帽的微笑狗狗可能是 alt="good"，而戴著紅色貝雷帽的咆哮狗狗可能是 alt="bad"。不過，請只使用標準圖示，如果使用非標準圖示 (例如好和壞的 Fluffy)，請加入圖例，並確保圖示不是解讀 UI 元素意義的唯一方式。

如果圖片是螢幕截圖或圖表，請寫下從圖片中學到的內容，而非描述圖片外觀。雖然圖片確實能勝過千言萬語，但說明應簡潔地傳達所有學到的內容。

省略使用者已知的背景資訊，以及內容中已說明的資訊。舉例來說，如果您正在瀏覽有關變更瀏覽器設定的教學頁面，且該頁面說明如何在 Chrome 瀏覽器中點選圖示，那麼螢幕截圖中的頁面網址就不重要。限制 alt只能討論如何變更設定。

alt 可能是「設定圖示位於搜尋欄下方的導覽列中。」請勿加入「螢幕截圖」或「machinelearningworkshop」，因為使用者不需要知道這是螢幕截圖，也不需要知道技術作家撰寫操作說明時瀏覽的網頁。圖片說明會根據圖片的用途而定。

如果螢幕截圖顯示如何前往 chrome://version/ 找出瀏覽器版本號碼，請在網頁內容中加入該網址做為說明，並提供空字串做為替代文字屬性，因為圖片提供的資訊與周圍文字相同。

如果圖片未提供額外資訊或僅供裝飾，屬性仍應存在，只是以空字串的形式呈現。

<img src="svg/magazine.svg" alt="" role="none" />

MachineLearningWorkshop.com 有七張前景圖片，因此有七張圖片含有替代文字屬性：復活節彩蛋燈開關、手冊圖示、Hal 和 Eve 的兩張傳記照片，以及果汁機、吸塵器和烤麵包機的三個虛擬人偶。前景中看起來像雜誌的圖片是唯一純裝飾性的圖片。這個頁面也有兩張背景圖片。這些圖片是裝飾性圖片，以 CSS 新增，因此無法存取。

由於雜誌純粹是裝飾性，因此具有空白的 alt 屬性，且由於圖片是純粹的呈現 SVG，因此具有 role 的 none。如有意義，SVG 圖片應包含 role="img"。

<img src="svg/magazine.svg" alt="" role="none" />

頁面底部有三則評論，每則評論都附有海報圖片。通常 alt 文字是相片中人物的姓名。

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

但由於這是笑話網頁，您應向低視能使用者說明他們可能看不出來的內容，以免錯過笑點。我們使用原始機器功能做為 alt，而非使用角色的名稱：

<img src="images/blender.svg" alt="blender" role="img" />

老師的照片不只是虛擬人偶，而是個人簡介圖片，因此會獲得更詳細的描述。

如果是真實網站，您會提供老師的最低限度描述，讓潛在學生進入教室時能認出老師。

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

由於這是笑話網站，請提供笑話內容的相關資訊：

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

如果你在電話中朗讀網頁內容給朋友聽，他們不會在意紅點的樣子。在此情況下，電影參照的歷史記錄很重要。

撰寫說明文字時，請考量圖片傳達哪些對使用者重要且相關的資訊，並將這些資訊納入說明文字。請注意，圖片的 alt 屬性內容會因情境而異。圖片中所有與情境相關的資訊，都必須傳達給視障使用者，但不必提供額外資訊。簡短、精確且實用。

src 和 alt 屬性是內嵌圖片的基本規定。我們還需要討論其他幾個屬性。

回應式圖片

可視區域大小和螢幕解析度千變萬化，您不希望向行動裝置使用者放送寬度足以在大螢幕顯示器上顯示的圖片，浪費他們的頻寬，但您可能會想向解析度是一般螢幕解析度四倍的小型裝置放送高解析度圖片。您可以透過幾種方式，根據可視區域大小和螢幕解析度放送不同圖片。

<img> srcset 項屬性

srcset 屬性可建議多個圖片檔案，瀏覽器會根據多個媒體查詢 (包括可視區域大小和螢幕解析度) 選擇要要求的圖片。

每個 <img> 元素只能有一個 srcset 屬性，但該 srcset 屬性可連結至多張圖片。srcset 屬性接受以半形逗號分隔的值清單，每個值都包含資產的網址，後面接著一個空格，以及該圖片選項的描述元。如果使用寬度描述元，您也必須加入 sizes 屬性，並為最後一個以外的每個 srcset 選項提供媒體查詢或來源大小。建議閱讀「學習」專區中涵蓋回應式圖片與 srcset 和說明性語法的部分。

如果相符，系統會優先採用 srcset 圖片，而非 src 圖片。

<picture>和<source>

如要提供多個資源並允許瀏覽器轉譯最合適的資產，可以使用 <picture> 元素。<picture> 元素是容器元素，可容納無限數量的 <source> 元素中列出的多個圖片選項，以及單一必要 <img> 元素。

<source> 屬性包括 srcset、sizes、media、width 和 height。 srcset 屬性是 img、source 和 link 的常見屬性，但一般會在來源上略有不同，因為媒體查詢可以改為列在 <srcset> 的媒體屬性中。<source> 也支援 type 屬性中定義的圖片格式。

瀏覽器會考量每個子 <source> 元素，並從中選擇最合適的元素。如果找不到相符項目，系統會選取 <img> 元素 src 屬性的網址。可存取的名稱來自巢狀 <img> 的 alt 屬性。 建議您也閱讀「學習」部分，瞭解 <picture> 元素和指示性語法。

其他成效功能

此外，還有許多圖片功能可提升網站效能。

延遲載入

loading 屬性會告訴啟用 JS 的瀏覽器如何載入圖片。預設 eager 值表示系統會在剖析 HTML 時立即載入圖片，即使圖片位於可視區域外也是如此。只要設定 loading="lazy"，系統就會延後載入圖片，直到圖片可能進入可視區域為止。瀏覽器會根據圖片與可視區域的距離，判斷圖片是否「可能」會顯示。這個值會在使用者捲動時更新。延遲載入功能可節省頻寬和 CPU，為大多數使用者提升效能。如果停用 JavaScript，基於安全考量，所有圖片預設都會顯示 eager。

<img src="switch.svg" alt="light switch" loading="lazy" />

顯示比例

瀏覽器會在收到 HTML 時開始算繪，並在遇到資產時提出要求。也就是說，瀏覽器在遇到 <img> 代碼並發出要求時，已經在轉譯 HTML。圖片可能需要一段時間才能載入。根據預設，瀏覽器不會為圖片保留空間，只會保留算繪 alt 文字所需的大小。

<img> 元素一律支援無單位的 height 和 width 屬性。這些屬性已不再使用，改用 CSS。CSS 可能會定義圖片尺寸，通常會設定單一尺寸 (例如 max-width: 100%;)，確保顯示比例維持不變。

由於 CSS 通常會納入 <head>，因此系統會在遇到任何 <img> 之前剖析 CSS。但如果沒有明確列出 height 或長寬比，預留空間就是 alt 文字的高度 (或寬度)。

如果開發人員只宣告寬度，圖片的接收和算繪會導致累計版面配置位移，進而影響網頁指標。如要解決這個問題，瀏覽器必須支援圖片長寬比。在 <img> 上加入 height 和 width 屬性，可做為大小提示，將顯示比例告知瀏覽器，以便預留適當空間，供最終圖片算繪使用。當瀏覽器遇到單一尺寸 (例如我們的 50% 範例) 時，會為圖片保留空間，並遵守 CSS 尺寸，而其他尺寸則會維持寬高比。

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

如果 CSS 設定正確，圖片就會是回應式。可以，內含的無單位 height 和 width 值會遭到 CSS 覆寫。加入這些屬性的目的是保留正確長寬比的空間，減少版面配置位移，進而提升效能。網頁載入時間大致相同，但圖片繪製到畫面上時，使用者介面不會跳動。

其他圖片功能

<img> 元素也支援 crossorigin、decoding、referrerpolicy 屬性，以及 Blink 架構瀏覽器中的 fetchpriority 屬性。如果圖片是伺服器端地圖的一部分，請加入 ismap 布林值屬性，並將 <img> 巢狀結構嵌入連結中，供沒有指標裝置的使用者使用。

在 <input type="image" name="imageSubmitName"> 上，ismap 屬性並非必要，甚至不支援，因為系統會在表單提交期間傳送點擊位置的 x 和 y 座標，並將值附加至輸入名稱 (如有)。舉例來說，使用者點選圖片並提交表單時，系統會一併提交類似 &imageSubmitName.x=169&imageSubmitName.y=66 的內容。如果圖片沒有 name 屬性，系統會傳送 x 和 y：&x=169&y=66。

隨堂測驗

測試你對圖片的瞭解程度。