HTML 影像

我們如何將影像放到網頁上？

為了將影像放到網頁上，我們使用 <img> 元素。這是一個 空元素（意味著它不能有任何子內容，也不能有結束標籤），它需要兩個屬性才能有用：src 和 alt。src 屬性包含一個指向您要嵌入頁面中的影像的 URL。與 <a> 元素的 href 屬性一樣，src 屬性可以是相對 URL 或絕對 URL。如果沒有 src 屬性，img 元素將無法載入任何影像。

alt 屬性在下面描述。

例如，如果您的影像名為 dinosaur.jpg，並且它與您的 HTML 頁面位於同一目錄中，則可以像這樣嵌入影像

<img src="dinosaur.jpg" alt="Dinosaur" />

如果影像位於 images 子目錄中，該子目錄與 HTML 頁面位於同一目錄中，則可以這樣嵌入影像

<img src="images/dinosaur.jpg" alt="Dinosaur" />

以此類推。

您還可以使用其絕對 URL 嵌入影像，例如

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

但是，不建議透過絕對 URL 連結。您應該託管您想在網站上使用的影像，在簡單設定中，這意味著將網站的影像儲存在與 HTML 相同的伺服器上。此外，在維護方面，使用相對 URL 比絕對 URL 更高效（當您將網站移動到不同的域名時，您無需更新所有 URL 以包含新域名）。在更高階的設定中，您可能會使用 CDN（內容分發網路） 來分發您的影像。

如果您沒有建立這些影像，您應該確保您有權根據其釋出的許可證條件使用它們（有關更多資訊，請參閱下面的 媒體資產和許可）。

前面的程式碼片段，無論是使用絕對 URL 還是相對 URL，都將給出以下結果

替代文字

接下來我們將要看的是 alt 屬性。它的值應該是一個影像的文字描述，用於在影像無法看到/顯示或由於網路連線緩慢而需要很長時間才能渲染的情況下。例如，我們上面的程式碼可以這樣修改

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

測試 alt 文字最簡單的方法是故意拼錯檔名。例如，如果我們的影像名稱拼寫為 dinosooooor.jpg，瀏覽器將不會顯示影像，而是顯示 alt 文字

那麼，你為什麼要看到或需要 alt 文字呢？它可以在許多方面派上用場

• 使用者視力受損，正在使用 螢幕閱讀器 為他們朗讀網頁。事實上，為影像提供 alt 文字對大多數使用者都很有用。
• 如上所述，檔案或路徑名的拼寫可能錯誤。
• 瀏覽器不支援影像型別。有些人仍然使用純文字瀏覽器，例如 Lynx，它會顯示影像的 alt 文字。
• 您可能希望提供文字供搜尋引擎利用；例如，搜尋引擎可以將 alt 文字與搜尋查詢匹配。
• 使用者已關閉影像以減少資料傳輸量和干擾。這在手機上以及頻寬有限或昂貴的國家/地區尤其常見。

您應該在 alt 屬性中寫些什麼？這取決於影像最初的目的。換句話說，如果您的影像沒有顯示，您會失去什麼

• 裝飾。 您應該為裝飾性影像使用 CSS 背景影像，但如果必須使用 HTML，請新增一個空白的 alt=""。如果影像不是內容的一部分，螢幕閱讀器不應浪費時間閱讀它。
• 內容。 如果您的影像提供了重要資訊，請在簡短的 alt 文字中提供相同的資訊——或者更好的是，在每個人都能看到的主文字中提供。不要編寫多餘的 alt 文字。如果所有段落都以冗餘的方式在主要內容中重複兩次，對有視力使用者來說會多麼煩人？如果影像已由主要文字主體充分描述，則可以直接使用 alt=""。
• 連結。 如果您將影像放在 <a> 標籤內，將影像變成連結，您仍然必須提供 可訪問的連結文字。在這種情況下，您可以將其寫入同一個 <a> 元素內，或者寫入影像的 alt 屬性內——具體取決於哪種方式最適合您的情況。
• 文字。 您不應將文字放入影像中。例如，如果您的主標題需要陰影，請使用 CSS 而不是將文字放入影像中。但是，如果您實在無法避免這樣做，則應在 alt 屬性中提供文字。

本質上，關鍵是提供可用的體驗，即使無法看到影像。這確保了所有使用者都不會錯過任何內容。嘗試在瀏覽器中關閉影像，看看效果如何。如果看不到影像，您很快就會意識到 alt 文字是多麼有用。

寬度和高度

您可以使用 width 和 height 屬性指定影像的寬度和高度。它們作為不帶單位的整數給出，表示影像的畫素寬度和高度。

您可以透過多種方式找到影像的寬度和高度。例如，在 Mac 上，您可以使用 Cmd + I 獲取影像檔案的顯示資訊。回到我們的示例，我們可以這樣做

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

這樣做有一個非常好的理由。頁面的 HTML 和影像是獨立的資源，瀏覽器會將其作為獨立的 HTTP(S) 請求獲取。一旦瀏覽器收到 HTML，它就會開始向用戶顯示。如果影像尚未收到（通常會發生這種情況，因為影像檔案大小通常比 HTML 檔案大得多），那麼瀏覽器將只渲染 HTML，並儘快收到影像後更新頁面。

例如，假設影像後有一些文字

<h1>Images in HTML</h1>

<img
  src="dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
  title="A T-Rex on display in the Manchester University Museum" />
<blockquote>
  <p>
    But down there it would be dark now, and not the lovely lighted aquarium she
    imagined it to be during the daylight hours, eddying with schools of tiny,
    delicate animals floating and dancing slowly to their own serene currents
    and creating the look of a living painting. That was wrong, in any case. The
    ocean was different from an aquarium, which was an artificial environment.
    The ocean was a world. And a world is not art. Dorothy thought about the
    living things that moved in that world: large, ruthless and hungry. Like us
    up here.
  </p>
  <footer>- Rachel Ingalls, <cite>Mrs. Caliban</cite></footer>
</blockquote>

一旦瀏覽器下載了 HTML，瀏覽器就會開始顯示頁面。

影像載入後，瀏覽器會將影像新增到頁面中。因為影像佔用了空間，瀏覽器必須將文字向下移動，以適應其上方的影像

這樣移動文字對使用者來說極其分散注意力，特別是如果他們已經開始閱讀它。

如果您使用 width 和 height 屬性在 HTML 中指定影像的實際大小，那麼瀏覽器在下載影像之前就知道它必須為影像留出多少空間。

這意味著當影像下載後，瀏覽器不必移動周圍的內容。

有關此功能歷史的優秀文章，請參閱 再次設定影像高度和寬度很重要。

影像標題

與連結一樣，您也可以向影像新增 title 屬性，以在需要時提供更多支援資訊。在我們的示例中，我們可以這樣做

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

這會在滑鼠懸停時顯示一個工具提示，就像連結標題一樣

然而，不建議這樣做——title 存在一些可訪問性問題，主要是因為螢幕閱讀器支援非常不可預測，並且大多數瀏覽器除非您用滑鼠懸停，否則不會顯示它（例如，鍵盤使用者無法訪問）。如果您對更多資訊感興趣，請閱讀 Scott O'Hara 的 Title 屬性的考驗和磨難。

最好將此類支援資訊包含在主文章文字中，而不是附加到影像上。

影像嵌入練習

現在輪到你玩了！此任務將讓你嵌入影像。

1. 單擊下面程式碼塊中的**“播放”**以在 MDN Playground 中編輯示例。

2. 編輯現有的 <img> 標籤，使其嵌入以下 URL 處的影像

   url

   https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg
   

   注意： 前面我們說過，未經許可，切勿熱連結到其他伺服器上的影像，但此影像位於我們的 GitHub 倉庫中，因此沒問題。

3. 為影像新增 alt 屬性。您可以透過暫時拼錯影像 URL 來檢查 alt 文字是否有效。

4. 設定影像的正確 width 和 height（提示：它寬 200px，高 171px），然後嘗試其他值，看看效果如何。

5. 設定影像的 title。

如果您犯了錯誤，可以使用 MDN Playground 中的重置按鈕清除您的工作。如果您真的卡住了，可以在程式碼塊下方檢視解決方案。

<img />

<img
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
  alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
  width="200"
  height="171"
  title="A T-Rex on display in the Manchester University Museum" />

媒體資產和許可

您在網上找到的影像（以及其他媒體資產型別）以各種許可型別釋出。在您構建的網站上使用影像之前，請確保您擁有它、有權使用它或遵守所有者的許可條件。

瞭解許可型別

讓我們看看您在網上可能遇到的一些常見許可類別。

保留所有權利

歌曲、書籍或軟體等原創作品的創作者通常在封閉版權保護下發布他們的作品。這意味著，預設情況下，他們（或其出版商）擁有使用（例如，顯示或分發）其作品的獨家權利。如果您想使用具有保留所有權利許可的受版權保護的影像，您需要執行以下操作之一

• 獲得版權所有者的明確書面許可。
• 支付許可費以使用它們。這可能是一次性費用，用於無限使用（“免版稅”），或者可能是“權利管理”，在這種情況下，您可能需要按時間段、地理區域、行業或媒體型別等支付每次使用的特定費用。
• 將您的用途限制在您管轄範圍內被視為 合理使用 或 合理交易 的範圍。

作者無需在其作品中包含版權宣告或許可條款。原創文學作品一旦以有形媒介創作，版權就自動存在。因此，如果您在網上找到一張影像，並且沒有版權宣告或許可條款，最安全的做法是假設它受版權保護並保留所有權利。

寬鬆許可

如果影像以寬鬆許可釋出，例如 MIT、BSD 或合適的 知識共享 (CC) 許可，您無需支付許可費或尋求許可即可使用它。但是，您仍然需要滿足各種許可條件，這些條件因許可而異。

例如，您可能需要

• 提供影像原始來源的連結並註明其建立者。
• 指明是否對其進行了任何更改。
• 根據與原始作品相同的許可分享使用該影像建立的任何衍生作品。
• 完全不分享任何衍生作品。
• 不在任何商業作品中使用該影像。
• 在任何使用該影像的釋出中包含許可證的副本。

您應查閱適用的許可證以瞭解您需要遵守的具體條款。

Copyleft 許可在軟體世界中佔有突出地位。基本思想是，使用 copyleft 許可專案程式碼構建的新專案（這被稱為原始軟體的“分支”）也需要根據相同的 copyleft 許可進行許可。這確保了新專案的原始碼也將可供他人研究和修改。請注意，一般來說，為軟體起草的許可（例如 GPL）不被認為是適用於非軟體作品的良好許可，因為它們在起草時沒有考慮非軟體作品。

瀏覽本節前面提供的連結，瞭解不同的許可型別以及它們指定的條件。

公共領域/CC0

釋出到公共領域的作品有時被稱為“無權利保留”——它不受版權保護，可以在未經許可和無需滿足任何許可條件的情況下使用。作品可以透過多種方式進入公共領域，例如版權到期或明確放棄權利。

將作品置於公共領域最有效的方法之一是根據 CC0 進行許可，這是一種特定的知識共享許可，為此目的提供了清晰明確的法律工具。

在使用公共領域影像時，獲取影像處於公共領域的證據，並儲存該證據以供記錄。例如，擷取原始來源的螢幕截圖，並清楚顯示許可狀態，並考慮在您的網站上新增一個頁面，列出所獲取的影像及其許可要求。

搜尋寬鬆許可的影像

您可以使用影像搜尋引擎或直接從影像庫中為您的專案找到寬鬆許可的影像。

使用您正在尋找的影像描述以及相關的許可條款來搜尋影像。例如，在搜尋“黃色恐龍”時，在搜尋查詢中新增“公共領域影像”、“公共領域影像庫”、“開放許可影像”或類似的術語。

一些搜尋引擎提供工具來幫助您查詢具有寬鬆許可的影像。例如，在使用 Google 時，轉到“影像”標籤搜尋影像，然後點選“工具”。在結果工具欄中有一個“使用許可權”下拉選單，您可以在其中選擇專門搜尋知識共享許可下的影像。

影像庫網站，例如 Flickr、ShutterStock 和 Pixabay，都提供搜尋選項，允許您僅搜尋寬鬆許可的影像。一些網站專門分發寬鬆許可的影像和圖示，例如 Picryl 和 The Noun Project。

遵守影像釋出的許可證是一個查詢許可證詳細資訊、閱讀來源提供的許可證或說明頁面，然後遵循這些說明的問題。信譽良好的影像庫會清楚明瞭地說明其許可證條件。

使用圖表和圖表標題註釋影像

說到標題，有很多種方法可以為影像新增標題。例如，沒有什麼能阻止你這樣做

<div class="figure">
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

這樣沒問題。它包含您需要的內容，並且可以使用 CSS 很好地進行樣式設定。但這裡有一個問題：沒有什麼能夠語義化地將影像與其標題關聯起來，這可能會給螢幕閱讀器帶來問題。例如，當您有 50 張影像和標題時，哪個標題與哪個影像匹配？

一個更好的解決方案是使用 HTML <figure> 和 <figcaption> 元素。它們正是為此目的而建立的：為圖表提供一個語義容器，並明確將圖表與標題關聯起來。我們上面的示例可以這樣重寫

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>

<figcaption> 元素告訴瀏覽器和輔助技術，標題描述了 <figure> 元素的其他內容。

圖表不一定是影像。它是一個獨立的內容單元，它

• 以簡潔易懂的方式表達您的意思。
• 可以出現在頁面線性流程中的多個位置。
• 提供支援主文字的基本資訊。

圖表可以是多張影像、程式碼片段、音訊、影片、方程式、表格或其他內容。

建立圖表

在此任務中，我們希望您將上一個任務的完成程式碼作為起點，並將其轉換為圖表

1. 單擊下面程式碼塊中的**“播放”**以在 MDN Playground 中編輯示例。
2. 將 <img> 元素包裹在 <figure> 元素中。
3. 將 title 屬性中的文字複製出來，將其放入 <img> 元素下方的 <figcaption> 元素中，然後刪除 title 屬性。

如果您犯了錯誤，可以使用 MDN Playground 中的重置按鈕清除您的工作。如果您真的卡住了，可以在程式碼塊下方檢視解決方案。

<img
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
  alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
  width="200"
  height="171"
  title="A T-Rex on display in the Manchester University Museum" />

<figure>
  <img
    src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
    alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
    width="200"
    height="171" />
  <figcaption>
    A T-Rex on display in the Manchester University Museum
  </figcaption>
</figure>

CSS 背景影像

您還可以使用 CSS 將影像嵌入網頁（以及 JavaScript，但那是完全不同的故事）。CSS background-image 屬性以及其他 background-* 屬性用於控制背景影像的放置。例如，要在頁面上的每個段落上放置背景影像，您可以這樣做

p {
  background-image: url("images/dinosaur.jpg");
}

由此產生的嵌入影像可以說比 HTML 影像更容易定位和控制。那麼為什麼要使用 HTML 影像呢？如上所述，CSS 背景影像僅用於裝飾。如果您只是想為頁面新增一些漂亮的東西以增強視覺效果，那沒問題。但是，此類影像完全沒有語義意義。它們不能有任何文字等效項，對螢幕閱讀器不可見，等等。這正是 HTML 影像的亮點！

總結：如果影像在內容方面具有意義，則應使用 HTML 影像。如果影像純粹是裝飾，則應使用 CSS 背景影像（我們將在核心模組中詳細介紹這些）。

總結

暫時就這些了。我們已經詳細介紹了影像和標題。

在下一篇文章中，我們將為您提供一些測試，您可以使用它們來檢查您對我們提供的 HTML 影像資訊的理解和記憶程度。

• 上一頁
• 概述：使用 HTML 構造內容
• 下一頁