圖片

裝飾性圖片 (例如內容區段或整個頁面上的按鈕背景漸層或背景圖片) 都是呈現的，而且應透過 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> 元素，以及以 <img> 做為預設來源的 <source> 子項完成這項操作。

<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> 加入可擴充向量圖形圖片，不過您可以使用 <img> 元素嵌入具有 .svg 副檔名的 SVG 圖片 (或以 data-uri 的形式)。

每張前景圖片至少須包含 src 和 alt 屬性。

src 檔案是嵌入圖片的路徑和檔案名稱。src 屬性是用來提供圖片的網址。瀏覽器會擷取素材資源，並算繪至頁面。<img> 需要這個屬性；如果沒有這項屬性，就不會算繪任何內容。

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

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

如果圖片是 SVG 檔案類型，請同時加入 role="img"，這是由於 VoiceOver bugs所致。

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

撰寫效果良好的 alt 圖片說明

Alt 屬性旨在簡短扼要，可提供圖片傳達的所有相關資訊，同時省略對文件中其他內容多餘或其他不實用的資訊。因此，輸入文字時，基調應反映網站調性。

如要撰寫有效的替代文字，請試想你閱讀的是整個網頁，而有些人看不見。透過使用 semantic <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 有七張前景圖片，因此 7 張圖片具有替代屬性：彩蛋燈光開關、手動圖示、兩張 Hal 和 Eve 的簡介相片，以及 3 張攪拌機、吸塵器和烤麵包機的顯示圖片。前景看起來像雜誌的前景圖片只有裝飾品。該網頁也有兩張背景圖片，這些圖片也相當裝飾性，而由於它們是用 CSS 新增，所以無法存取。

只是單純裝飾的雜誌，具有空白的 alt 屬性以及 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 時開始轉譯 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 設定正確無誤，圖片仍會回應式。是，系統會透過 CSS 覆寫內含的無單位 height 和 width 值。納入這些屬性的目的，是要以適當的顯示比例保留空間，減少版面配置位移來提升效能。網頁的載入時間大致不會改變，但在圖片繪製到螢幕畫面時，使用者介面不會跳轉。

其他圖片特色

<img> 元素也支援以 Blink 為基礎的瀏覽器中的 crossorigin、decoding、referrerpolicy 和 fetchpriority 屬性。很少用到，如果圖片是伺服器端地圖的一部分，請加入 ismap 布林值屬性，並將 <img> 嵌入在沒有指向裝置的使用者連結中。

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

隨堂測驗

測驗您對圖片的相關知識。

前景圖片應一律具備哪兩項屬性？

size
請再試一次。
alt
答對了！
src
答對了！