裝飾性圖片,例如按鈕的背景漸層,或內容區段或整個頁面的背景圖片。 都是彼此的,且應與 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
。外觀圖示
例如房子的替代文字是 home
5 吋軟碟圖示的說明為 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
。
隨堂測驗
測試自己對圖片的瞭解。
前景圖片一律應具備哪兩項屬性?
alt
size
src