圖片

裝飾性圖片,例如按鈕的背景漸層,或內容區段或整個頁面的背景圖片。 都是彼此的,且應與 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">。 可加入 heightwidth 屬性,用來設定圖片的顯示比例,以減少內容版面配置位移。lazy 屬性會啟用「延遲載入」

HTML 也支援直接使用 <svg> 加入 SVG 圖片 (儘管 SVG) 具有 .svg 副檔名 (或做為 data-uri) 的圖片,可以使用 <img> 元素嵌入。

每張前景圖片都至少應包含 srcalt 屬性。

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 屬性,而圖片的 rolenone,因為圖片僅為裝飾內容 表達方式如果有意義,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 屬性內容會因情境而異。圖片傳達的所有資訊 需要傳達的內容,且與內容相關;什麼都不用做保持精簡、精確 且實用

srcalt 屬性是嵌入圖片的基本規定。我們還需要討論其他幾項屬性。

回應式圖片

可視區域的大小有很多種。且螢幕解析度也不同。不想浪費行動使用者的 提供頻寬更高的圖片,足以支援大螢幕的顯示器,不過您也可以提供較高的解析度 製作出一般螢幕解析度四倍的小型裝置圖片。有幾種方式可以提供不同的圖片 自動調整資源配置

<img> srcset 項屬性

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

每個 <img> 元素可以有一個 srcset 屬性,但該 srcset 可以連結至多張圖片。srcset 屬性接受以逗號分隔值的清單,每個值均含資產網址,後面加上一個空格,後面加上 該映像檔選項的描述元如果使用寬度描述元,您也必須加入含有媒體的 sizes 屬性 。srcset建議您參閱有關使用 srcset 的回應式圖片描述性語法的章節。

如果有相符的內容,系統會優先採用 srcset 圖片,而非 src 圖片。

<picture><source>

如要提供多個資源並允許瀏覽器顯示最適當的資產,您也可以使用 <picture> 元素。<picture> 元素是一個容器 元素,用於多個圖片選項 (數量不限的 <source>) 以及單一必要的 <img> 元素。

<source> 屬性包括 srcsetsizesmediawidthheightsrcset 屬性常用於 imgsourcelink,但在來源上通常略有不同 做為媒體查詢可以列在 <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> 元素一律支援無單位的 heightwidth 屬性。這些屬性 CSS 供應商CSS 可能會定義圖片尺寸,通常會設定單一尺寸,例如 max-width: 100%;,以便確保顯示比例。 由於 CSS 通常包含在 <head> 中,因此會在任何 <img> 之前經過剖析。但如未明確列出 height 或 長寬比即為 alt 文字的高度 (或寬度)。由於大多數開發人員只宣告寬度 收到及轉譯圖片會導致累計版面配置位移,並對網站體驗指標造成負面影響。 為解決這個問題,瀏覽器支援圖片顯示比例。在 <img> 中加入 heightwidth 屬性,可當做 大小提示:將顯示比例告知瀏覽器,允許向右 為最終圖片算繪預留的空間。在圖片中加入高度和寬度值後,瀏覽器 知道圖片的長寬比。當瀏覽器碰到單一尺寸 (例如 50% 的例子) 時,瀏覽器就能節省空間 圖片。

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

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

其他圖片功能

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

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

隨堂測驗

測試自己對圖片的瞭解。

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

src
size
alt