Web - 第十章 | HTML 中的圖片

在一開始時，Web僅有文本，那真的是很無趣。幸運的是，沒過多久網頁上就能嵌入圖片和其他有趣的內容了。雖然還有許多其他類型的多媒體，但是從地位比較低的<img>元素開始是符合邏輯的，它常常被用來在網頁中嵌入一張簡單的圖片。在這篇文章中，我們將看到怎樣深入的使用它，包括基本的用<figure>來添加說明文字，以及怎樣把它和CSS背景圖片連結起來。

將圖片放置網頁上

我們可以用<img>元素來把圖片放到網頁上。它是一個空元素（它不需要包含文本內容或閉合標籤），最少只需要一個src（一般讀作其全稱source）來使其生效。src屬性包含了指向我們想要引入的圖片的路徑，可以是相對路徑或絕對URL，就像<a>元素的href屬性一樣。

1	<img src="J.J.Huang.png">

如果這張圖片存儲在和HTML頁面同路徑的images文件夾下（這也是Google推薦的做法，利於SEO /索引）

1	<img src="images/J.J.Huang.png">

絕對路徑，但是這種方式是不被推薦的，這樣做只會使瀏覽器做更多的工作，例如重新通過DNS 再去尋找IP 地址。通常我們都會把圖片和HTML 放在同一個伺服器上。

1	<img src="/images/other/J.J.Huang.png">

警告：大多數圖片是有版權的。不要在你的網頁上使用一張圖片，除非：
你是圖片版權所有者
你有圖片版權所有者明確的、書面上的使用授權
你有充分的證據證明這張圖片是公共領域內的
侵犯版權是違法並且不道德的。此外，在得到授權之前永遠不要把你的src屬性指向其他人網站上的圖片。這被稱為”盜鏈（hotlinking）”。同樣，盜取其他人的帶寬也是違法的。而且這會降低你的頁面的加載速度，而且圖片可能會在不受你控制的情況下被移走或用別的令人尷尬的東西替換掉。

注意：像<img>和<video>這樣的元素有時被稱之為替換元素，因為這樣的元素的內容和尺寸由外部資源（像是一個圖片或視頻文件）所定義，而不是元素自身。

替代文字

alt，它的值應該是對圖片的文字描述，用於在圖片無法顯示或不能被看到的情況。

1 2	<img src="images/J.J.Huang.png" alt="J.J.Huang 技術部落格">

替代文字的用途：

用戶有視力障礙，通過屏幕閱讀器來瀏覽網頁。事實上，給圖片一個備選的描述文本對大多數用戶都是很有用的。
你也許會把圖片的路徑或文件名拼錯。
瀏覽器不支持該圖片類型。某些用戶仍在使用純文本的瀏覽器，例如Lynx，這些瀏覽器會把圖片替換為描述文本。
你會想提供一些文字描述來給搜索引擎使用，例如搜索引擎可能會將圖片的文字描述和查詢條件進行匹配。
用戶關閉的圖片顯示以減少資料的傳輸，這在手機上是十分普遍的，並且在一些國家帶寬是有限且昂貴。

alt裡寫點什麼呢？
這首先取決於為什麼這張圖片會在這兒，換句話說，如果這張圖片沒顯示出來，會少了什麼：

裝飾：如果圖片只是用於裝飾，而不是內容的一部分，可以寫一個空的alt=””。例如，屏幕閱讀器不會浪費時間對用戶讀出不是核心需要的內容。實際上裝飾性圖片就不應該放在HTML文件裡，CSS background images才應該用於插入裝飾圖片，但如果這種情況無法避免，alt=””會是最佳處理方案。
內容：如果你的圖片提供了重要的訊息，就要在alt文本中簡要的提供相同的訊息，甚至更近一步，把這些訊息寫在主要的文本內容裡，這樣所有人都能看見。不要寫冗餘的備選文本（如果在主要文本中將所有的段落都重複兩遍，對於有視力障礙的用戶來說多煩啊！），如果在主要文本中已經對圖片進行了充分的描述，寫alt=””就好。
連結：如果你把圖片嵌套在<a>標籤裡，來把圖片變成連結，那你還必須提供無障礙的連結文本。在這種情況下，你可以寫在同一個<a>元素裡，或者寫在圖片的alt屬性裡，隨你喜歡。
文本：你不應該將文本放到圖像裡。例如，如果你的主標題需要有陰影，你可以用CSS來達到這個目的，而不是把文本放到圖片裡。如果真的必須這麼做，那就把文本也放到alt裡。

寬和高

你可以用寬度和高度屬性來指定你的圖片的高度和寬度。

<img src="images/J.J.Huang.png"
     alt="J.J.Huang 技術部落格"
     width="400"
     height="341">

然而，你不應該使用HTML屬性來改變圖片的大小。如果你把尺寸設定的太大，最終圖片看起來會模糊；如果太小，會在下載遠遠大於你需要的圖片時浪費帶寬。如果你沒有保持正確的寬高比，圖片可能看起來會扭曲。在把圖片放到你的網站頁面之前，你應該使用圖形編輯器使圖片的尺寸正確。

注意：如果你需要改變圖片的尺寸，你應該使用CSS而不是HTML。

圖片標題

類似於超連結，你可以給圖片增加title屬性來提供需要更進一步的支持訊息。

<img src="images/J.J.Huang.png"
     alt="J.J.Huang 技術部落格"
     width="400"
     height="341"
     title="J.J.Huang 技術部落格">

圖片標題並不必須要包含有意義的訊息，通常來說，將這樣的支持訊息放到主要文本中而不是附著於圖片會更好。不過，在有些環境中這樣做更有用，比如當沒有空間顯示提示時，也就是在圖片欄中。

然而，這並不是推薦的——title有很多易訪問性問題，主要是基於這樣一個事實，即屏幕閱讀器的支持是不可預測的，大多數瀏覽器都不會顯示它，除非你在鼠標懸停時（例如：title無法訪問鍵盤用戶）

用圖形和圖形標題註釋圖像

說到說明文字, 這裡有很多種方法讓你添加一段說明文字來搭配圖片。

<div class="figure">
  <img src="/images/other/J.J.Huang.png"
     alt="屬於J.J.Huang的技術筆記部落格，記錄著學習及實作的過程。"
     width="400"
     height="341">
  <p>J.J.Huang 技術部落格</p>
</div>

這是可以的，<p>中包含了你需要的內容，以及方便使用CSS的一種很好的風格。但是這裡有一個問題，從語義的角度上來講，<img>和<p>並沒有什麼聯繫，這會給使用屏幕閱讀的人造成問題，比如當你有50張圖片和其搭配的50段說明文字，那麼一段說明文字是和哪張圖片有關聯的呢？

有一個更好的做法是使用HTML5的<figure>和<figcaption>元素，它正是為此而被創造出來的：為圖片提供一個語義容器，在標題和圖片之間建立清晰的關聯。

<figure>
  <img src="/images/other/J.J.Huang.png"
     alt="屬於J.J.Huang的技術筆記部落格，記錄著學習及實作的過程。"
     width="400"
     height="341">
  <figcaption>J.J.Huang 技術部落格</figcaption>
</figure>

這個<figcaption>元素告訴瀏覽器和其他輔助的技術工具這段說明文字描述了<figure>元素的內容。

注意：從無障礙的角度來說，說明文字和alt文本扮演著不同的角色。看得見圖片的人們同樣可以受益於說明文字，而alt文字只有在圖片無法顯示時才這樣。所以，說明文字和alt的內容應該一樣，因為當圖片無法顯示時，它們會出現。嘗試讓你的圖片不顯示，看看效果如何。

注意<figure>裡不一定要是一張圖片，只要是一個這樣的獨立內容單元：

用緊湊、簡潔的方式表達意圖。
可以置於頁麵線性流的某處。
為主要內容提供重要的補充說明。

<figure> 可以是幾張圖片、一段代碼、音視頻、方程、表格或別的。

CSS背景圖片

你也可以使用CSS把圖片嵌入網站中（JavaScript也行，不過那是另外一個故事了），這個CSS屬性background-image和另其他background-*屬性是用來放置背景圖片的。比如，為頁面中的所有段落設置一個背景圖片。

1
2
3

p {
  background-image: url("images/J.J.Huang.png");
}

按理說，這種做法相對於HTML 中插入圖片的做法，可以更好地控製圖片和設置圖片的位置，那麼為什麼我們還要使用HTML 圖片呢？如上所述，CSS 背景圖片只是為了裝飾— 如果你只是想要在你的頁面上添加一些漂亮的東西，來提升視覺效果，那CSS 的做法是可以的。但是這樣插入的圖片完全沒有語義上的意義，它們不能有任何備選文本，也不能被屏幕閱讀器識別。這就是HTML 圖片有用的地方了。

總而言之，如果圖像對你的內容裡有意義，則應使用HTML圖像。如果圖像純粹是裝飾，則應使用CSS背景圖片。