圖片 <img>

使用 <img> 是 HTML 裡的圖片元素，使用時只要在 src 屬性裡填入圖片的網址，或是圖片的 base64 編碼，就可以在網頁中顯示圖片，這篇文章會介紹 <img> 圖片元素的用法。

認識 <img>

<img> 是 HTML 裡建立圖片的元素，圖片格式支援常見的 jpg、gif、png、svg，另外目前大部分的瀏覽器，也支援像是 webp 類型的圖片格式，甚至是使用 base64 編碼的圖片內容。

• <img> 屬於「空元素」，只需要「起始標籤」。
• <img> 顯示類型為「inline-block 行內元素裡包覆塊級元素」，預設不會強制換行，寬度超過父元素寬度才會換行。
• <img> 通常會搭配 src 屬性使用，並強烈建議加入 alt 屬性。
• 如果 <img> 具有 usemap 屬性，則不可以是 <a> 或 <button> 的子孫元素。
• 如果 <img> 具有 ismap 屬性，則必須是 <a> 的子孫元素。

例如下方的 HTML 開啟後，在網頁中會放入一個 <img>，指定 src 屬性為圖片網址後就會顯示圖片，同時，這張圖片會具有 alt 和 title 屬性，當圖片無法顯示時會出現 alt 屬性的內容，滑鼠移到圖片上會出現 title 的內容。

<img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg"  alt="這是圖片" title="oxxo">

除了放入圖片網址，也可以使用 base64 位元的方式顯示圖片，例如下方的 HTML 執行後，網頁裡會出現一個紅色正方形小點 ( 這種做法會造成網頁過大且不容易修改圖片，通常不建議採用這種方式 )。

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="小紅點">

<img> 支援屬性

<img> 除了支援「全域屬性」以及「可見元素的事件屬性」 ( 參考「HTML 元素屬性」)，也會使用下方的專門屬性 ( 通常只會使用 src、alt、title )：

<img> src 屬性

src 是 <img> 的必須屬性，可以使用圖片網址，或 base64 內容。

<img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg"  alt="這是圖片" title="oxxo">

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="小紅點">

<img> alt 屬性

alt 屬性表示圖片替代文字 ( alternate text )，當圖片無法顯示時，瀏覽器會顯示此文字，如果要進行網站的最佳化，通常會建議加入 alt 屬性，幫助搜尋引擎辨識這張圖片的內容。

<img src="test.jpg" alt="這是測試圖片">

<img> title 屬性

title 屬性可以設定一段文字，在當滑鼠在圖片上方時，會自動顯示這段文字。

<img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" title="這是測試圖片">

<img> width 和 height 屬性

width 和 height 屬性可以使用「像素 px」為單位，定義圖片寬度和高度，設定這個屬性後，瀏覽器會預留這個寬高給圖片使用 ( 不然瀏覽器會在載入圖片之後，再分配寬高，造成版面出現跳動的狀況 )。

<img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg"
    width="100px"
    height="100px;">

<img> srcset 屬性和 sizes 屬性

srcset 屬性是針對「響應式網頁」的屬性，定義該屬性後，可以替圖片元素提供多個不同解析度或尺寸的圖片來源，讓瀏覽器根據使用者的裝置解析度或螢幕大小，自動載入最適合的圖片，實現響應式圖片 ( responsive images ) 的效果，下方列出基本語法：

<img src="oxxo.jpg" 
    srcset="oxxo-small.jpg 480w, oxxo-medium.jpg 800w, oxxo-large.jpg 1200w" 
    sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px" 
    alt="範例圖片">

在語法中，srcset 屬性會呈現圖片 URL 以及在哪種尺寸下可用這張圖片。

• oxxo-small.jpg 480w：需要 480 像素寬的圖片時可以使用這張圖。
• oxxo-medium.jpg 800w：需要 800 像素寬的圖片時可以使用這張圖。
• oxxo-large.jpg 1200w：需要 1200 像素寬的圖片時可以使用這張圖。

sizes 屬性告訴瀏覽器在不同情況下 ( 例如螢幕寬度 ) 圖片會顯示多大寬度，讓瀏覽器根據資訊選擇最適合的圖片。

• (max-width: 600px) 480px：如果螢幕寬度 ≤ 600px，使用寬度 480px 的圖片。
• (max-width: 900px) 800px：如果寬度 ≤ 900px，使用 800px 的圖片。
• 1200px：其他狀況都使用 1200px 的圖片。

撰寫時也可以不使用 sizes 屬性，單純使用 srcset 屬性。

• 1x 裝置載入普通圖。
• 2x 裝置（如 Retina）載入高解析圖。

<img src="oxxo-image-1x.jpg"
 srcset="oxxo-image-1x.jpg 1x, oxxo-image-2x.jpg 2x"
 alt="範例圖片">

<img> loading 屬性

設定「loading="lazy"」的圖片，會延遲載入尚未出現於顯示畫面的圖片，當圖片快要出現時才會載入圖片 ( 例如在很長的網頁中，位置在比較下面的圖片 )，增加網站瀏覽的速度。

<img src="oxxo.jpg" loading="lazy">

<img> usemap 屬性

設定 usemap 屬性表示該圖片為「影像地圖」，需要搭配 <map> 一同使用，並需要定義「座標」，影像地圖在過去的網頁很常見，也就是將一張大圖分割成許多小圖，加快載入速度，但隨著網頁技術的進步，越來越多功能都能使用 CSS 取代，影像地圖也就越來越少看到。

<img src="shop.jpg" alt="shop" usemap="#shop" width="400" height="300">

<map name="shop">
  <area shape="rect" coords="20,50,240,330" alt="apple" href="apple.htm">
  <area shape="rect" coords="190,170,230,240" alt="orange" href="orange.htm">
  <area shape="circle" coords="330,200,40" alt="ball" href="ball.htm">
</map>

<img> ismap 屬性

ismap 屬性是一個「布林值」屬性，如果有這個屬性表示該圖片為影像地圖的一部分，沒有這個屬性表示是單純的圖片。

<img src="oxxo.jpg" alt="oxxo" ismap>

<img> 預設樣式

下方列出 <img> 的預設樣式：

詳細樣式教學可參考：CSS 教學

img {
  display: inline-block;
}

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～