前幾天，我們提到怎麼在網頁中加入連結、清單與表格。

接下來，我們要介紹怎麼幫網頁加上圖片。

在網頁中加入圖片有幾種方式。除了HTML的元素，也可以透過設定CSS的background-image屬性來達成。

不過因為之後才會開始介紹CSS，這邊就先不討論。

今天要先說明，怎麼透過常見的<img>元素加上圖片。

<img>元素簡介

在網頁中添加圖片的常見方式，是使用HTML的<img>元素。
元素名稱的img，就是image的縮寫。

<img>元素是空元素，只由一個標籤組成。以下由MDN提供的範例，示範了基本的使用方式：

<img alt="image" src="penguin.jpg" />

範例中的<img>元素設定了兩種屬性。

前面的alt屬性用於設定圖片因故沒有顯示於網頁時，會代替圖片顯示於網頁中的替代文字；
另一個src屬性，則是用來設定圖片檔案的路徑。我們之前介紹<script>元素時有提過。

使用<img>元素時，必須要指定圖片的替代文字跟檔案路徑。

替代文字由alt屬性設定。可能有填入文字，也可能只是空字串；
檔案路徑可以用src屬性設定，也可以用另外的srcset屬性設定，但至少要有一種。

關於srcset屬性，明天會再多做說明，這邊就先帶過～

設定適當的替代文字

透過<img>元素添加的圖片，可能出於某些錯誤，無法順利顯示於網頁。包括檔案路徑設定錯誤；或是檔案本身已毀損；或是瀏覽器不支援檔案格式。

也可能因為使用者的瀏覽方式，沒有顯示出來或被看到。像是為了節省網路用量而選擇不顯示圖片；或是使用純文字瀏覽器瀏覽網頁；或是使用者本身就看不到。

基於種種原因，圖片沒有顯示出來的時候，透過alt屬性設定的替代文字就會代替圖片顯示於網頁中。而以朗讀等無障礙功能瀏覽網頁時，這些替代文字也會代替圖片被唸出來。

因此需要設定適當的替代文字。如果設定得當，可以說明圖片傳達的訊息，幫助使用者理解網頁內容。如果設定不當，可能會造成使用者的困擾。

一般來說，要避免設定成「圖片」等只是說明有照片存在的文字，而應以簡潔的文字說明圖片的意義。但有時候也可能會設定為空字串，像是圖片只是裝飾用，或是在內文已經說明過圖片內容。[1]

實際上要怎麼做呢，可以參考以下由MDN提供的範例。範例中將替代文字設定為"A Penguin on a beach."，相比原先的"image"更能傳達圖片的意義。

<img alt="A Penguin on a beach." src="penguin.jpg" />

作為連結的圖片

之前我們提到圖片也可以當作連結的載體，只要在<img>外面另外以<a>元素包裹就好。可以參考由MDN提供的範例：

<a href="https://developer.mozilla.org">
  <img
    src="/shared-assets/images/examples/favicon144.png"
    alt="Visit the MDN site" />
</a>

為了讓使用者在圖片未顯示出來時，也可以正常使用連結，在建立圖片連結時會建議設定替代文字。如此，即便沒有顯示圖片，也會讓連結以文字連結的形式呈現。

以width、height屬性預留圖片位置

有時候可能網路比較慢，瀏覽網頁時只有看到文字，圖片還沒有載入。為了避免圖片載入後擠掉我們原本正在看的文字，可以透過設定圖片的width跟height屬性，幫他們預留位置。[1]

width用於設定圖片的固有寬度，height用於設定固有高度。兩者皆以像素（pixel）為單位，需填入整數。

但設定width跟height屬性時要注意他們的比例以免圖片變形。也要避免用這兩個屬性調整圖片尺寸。

以下由MDN提供的範例中，width跟height屬性分別設為400跟341，沒有另外加上單位。

<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" />

以<figure>添加標題或說明

如果要幫圖片新增標題或說明，可以另外加上<figure>和<figcaption>這兩個元素。

這兩個元素需搭配使用。以下由MDN提供的例子中，便將代表圖片的<img>包在<figure>裡面。在<img>後面則用<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>

定義圖片與標題/說明的關係

雖然圖片的標題或說明也可以透過<p>元素等其他方式來添加，但這麼做無法表達圖片與其標題或說明之間的關聯。

相較之下，透過<figure>和<figcaption>這樣的語意化元素，可以明確定義圖片與其標題或說明之間的對應關係。

除了圖片之外，<figure>還可以用來裝其他的內容，像是程式碼、引文或表格等。因為不是今天的重點，這邊就先帶過～

標題/說明與替代文字的差別

跟透過alt設定的替代文字不一樣。不管圖片有沒有顯示於網頁中，透過<figure>和<figcaption>元素設定的圖片標題或說明都會顯示出來。

由於這樣的標題或說明，在圖片顯示出來時也會一併顯示。如果設定妥當的話，能協助使用者理解圖片內容。

但在圖片沒有顯示出來的情況下，這樣的標題或說明，跟alt設定的替代文字就會同時存在。因此設定時要區別兩者的定位。避免將兩者設定為同樣的值，不然會重複同樣的內容。

小結

今天介紹了怎麼透過<img>元素在網頁中加上圖片。

我們提到src屬性用來設定圖片的檔案路徑，alt屬性用來設定圖片的替代文字。

還有透過width跟height屬性可以在網頁中預留圖片的位置，避免載入圖片後讓原先的網頁內容位移。

最後也提到可以用<figure>和<figcaption>元素，為圖片添加標題或說明。

不過這樣子的圖片，在不同尺寸或解析度的螢幕中會有不同的顯示效果。可能在其他裝置上會太小。

為了讓不同裝置的使用者都能好好享受圖片，我們還需要另外再做設定。

不過時間不多了，讓我們下集待續～

參考資料

[1]: MDN, HTML images