圖片 <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 屬性

srcset 屬性是針對「響應式網頁」的屬性，定義該屬性後，可以根據特定解析度，使用特定圖片，例如 retina 螢幕解析度的像素密度 ( pixel density ) 為 2x 或 3x，就可以指定 2x 時使用 2x 的圖片，3x 時使用 3x 的圖片，寫法是一個 pixel density 數字後面接 x，srcset 和 sizes 屬性只能選擇一個使用 ( 通常使用 srcset 後就不會出現 src 的圖片，除非無法讀取 srcset 的內容 )。

假設寬度是 1000px，則 x 的算法為：1x = 1x1000 = 1000px，2x = 2x1000 = 2000px，依此類推。

<img srcset="oxxo-3x.jpg 3x" src="oxxo.jpg">

如果不使用 x 作為單位，也可以使用 w 作為計算瀏覽器「寬度」的像素單位，以下方的 HTML 為例，會在瀏覽器寬度為 240px、480px、720px 和 1024px 時，分別載入不同的圖片，如果大於 1024 則使用 src 定義的圖片。

注意，w 是一個換算的單位，使用後圖片會隨著視窗大小而有所不同，例如在 1024px 解析度設定 1024w，圖片實際尺寸為「圖寬 x 視窗寬 / 1024」，如果在 1920px 螢幕寬度狀態下設定 192w，則圖片實際尺寸為「圖寬 x 視窗寬 / 192」。

<img srcset="oxxo-720.jpg 720w" src="oxxo.jpg">

<img> sizes 屬性

sizes 屬性是針對「響應式網頁」的屬性，定義該屬性後，可以根據特定尺寸，使用特定圖片，使用的單位是 vw，表示可視範圍的寬度 ( view width )。

假設可視寬度是 1000px，則 vw 的算法為：100vw = 1000x100% = 1000px，50vw = 1000x50% = 500px，依此類推。

<img srcset="oxxo-480.jpg 50vw,
            oxxo-960.jpg 100vw"
    src="oxxo.jpg"
>

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

<a> 預設樣式

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

img {
  display: inline-block;
}

意見回饋

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