圖片

裝飾性圖片，例如按鈕的背景漸層，或內容區段或整個頁面的背景圖片。 都是彼此的，且應與 CSS 一起套用。圖片為文件提供背景資訊，且內容是內容，應該是 嵌入 HTML 中

納入圖片的主要方法是搭配 src 的 <img> 標記 屬性參照圖片資源，以及用於描述圖片的 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) 具有 .svg 副檔名 (或做為 data-uri) 的圖片，可以使用 <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 圖片說明

Alt 屬性應簡明扼要，提供圖片傳達的所有相關資訊，同時省略 與文件中的其他內容重複，或是不實用。撰寫文字時，語氣 反映網站的風格

要撰寫有效的替代文字，請試想您向看不見的使用者閱讀整個網頁內容。使用 語意 <img> 元素、螢幕閱讀器使用者和機器人均能掌握相關資訊 該元素是圖片請勿加入「這是圖片/螢幕截圖/相片」alt。使用者未 當然，圖片還是會有圖片，但他們確實需要知道圖片傳達哪些資訊。

一般情況下，系統不會顯示「這是一隻戴著紅色帽子的狗兒圖片。」相反地 相對於文件其餘內容；你傳達的訊息會因情境而異 以及周圍文字的內容

舉例來說，我們會依據情境，以不同方式描述狗的相片。如果 Fluffy 是 「alt="Fluffy"美味狗食」相關評論。

如果該相片出現在 Fluffy 動物收容所網站的採用網頁中，目標對象就是潛在的狗 父項。文字應描述圖片中與採用者相關的資訊，且不會重複 。建議使用較長的說明，例如 alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth"。採用頁面的文字通常包含可領養寵物的物種、品種、年齡、性別 就無需在 Alt 文字中重複這個步驟但狗在撰寫的簡介中盡量不包含髮長、顏色 或是玩具偏好請注意，我們不會描述圖片內容，因為可能的狗飼主並不知道狗是否 或是室內或室外的戶外空間 或是一顆紅色項圈和藍色有皮帶

使用圖片做為圖像圖像時，由於 alt 屬性會提供無障礙名稱、傳達圖示的意義， 並非圖片的說明。例如，放大鏡圖示的 Alt 屬性為 search。外觀圖示 例如房子的替代文字是 home5 吋軟碟圖示的說明為 save。如果有兩個圖示，畫面上出現了「毛茸茸星」 為指出最佳做法和反面模式，綠色貝殼裡微笑的小狗可以設定 alt="good"，而在鬧著的小狗 紅色的帽子可能會變為 alt="bad"。也就是說，請只使用標準圖像，且使用非標準圖示，例如 記得加上圖例，並確保圖示並不是傳達 UI 元素意義的唯一方式。

如果圖片是螢幕截圖或圖表，請寫下從圖片中學習到的內容，而不是描述外觀。 雖然一張圖片絕對勝過千言萬語，但說明應簡明扼要地傳達所學到的一切知識。

從情境中省略使用者已經知道的資訊，而在內容中收到其他相關資訊。例如： 如果您前往教學課程頁面，說明如何變更瀏覽器設定，而且前往的是 Chrome 瀏覽器的圖示， 限制 alt 僅使用現有的主題：如何變更設定。alt 可能是 「設定圖示位於搜尋欄位下方的導覽列中。」請勿加入「螢幕截圖」或「machinelearningworkshop」 因為使用者不必知道這是螢幕截圖，也無從得知技術作者撰寫郵件時在哪裡瀏覽。 操作說明。圖片說明會根據內容放在一開始的背景脈絡。

如果螢幕畫面擷取顯示了前往 chrome://version/ 找出瀏覽器版本號碼的方法，請在 網頁內容的操作說明，並提供空白字串做為 alt 屬性，因為圖片未提供任何資訊 沒有出現在周圍文字中

如果圖片未提供其他資訊或僅為裝飾，則屬性仍應繼續顯示，就像空白字串一樣。

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

MachineLearningWorkshop.com 有七張前景圖片，因此 7 張圖片具有替代屬性：復活節彩蛋開關 一個手動圖示、兩張 Hal 和 Eve 的傳記相片，以及三個混合器、一個吸塵器和烤麵包機的頭像。 前景圖片只有一篇純裝飾雜誌。頁面上也有 兩張背景圖片這些都是裝飾性質，因此透過 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> 元素和描述性語法的「Learn」章節。

其他效能功能

延遲載入

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> 之前經過剖析。但如未明確列出 height 或 長寬比即為 alt 文字的高度 (或寬度)。由於大多數開發人員只宣告寬度 收到及轉譯圖片會導致累計版面配置位移，並對網站體驗指標造成負面影響。 為解決這個問題，瀏覽器支援圖片顯示比例。在 <img> 中加入 height 和 width 屬性，可當做 大小提示：將顯示比例告知瀏覽器，允許向右 為最終圖片算繪預留的空間。在圖片中加入高度和寬度值後，瀏覽器 知道圖片的長寬比。當瀏覽器碰到單一尺寸 (例如 50% 的例子) 時，瀏覽器就能節省空間 圖片。

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

如果 CSS 設定正確，圖片就會獲得回應式圖片。是，隨附的無單位 CSS 會覆寫 height 和 width 的值。加入這些屬性的目的是為了保留 合適的顯示比例，減少版面配置位移有助於提升效能。網頁僅花費大約相同金額 但 UI 在圖片套用到畫面上時不會跳動

其他圖片功能

<img> 元素也支援 crossorigin、decoding、referrerpolicy 和 Blink 瀏覽器中的 crossorigin。 fetchpriority 屬性。很少使用；如果圖片是伺服器端地圖的一部分，請加入 ismap 布林屬性 以及在連結中為 <img> 建立巢狀結構，而不使用指標裝置

<input type="image" name="imageSubmitName"> 上無需或支援 ismap 屬性，做為 x 和 y 點擊位置的座標會在表單提交時傳送，並在輸入名稱中加上值 (如果有的話)。例如： 當使用者按一下圖片時，將會隨表單提交 &imageSubmitName.x=169&imageSubmitName.y=66 之類的圖片。 提交。如果圖片沒有 name 屬性，則傳送 x 和 y：&x=169&y=66。

隨堂測驗

測試自己對圖片的瞭解。