搜尋

圖片 <img>

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

HTML 教學 - 圖片 <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">

HTML 教學 - 圖片 <img>

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

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

HTML 教學 - 圖片 <img> - base64

<img> 支援屬性

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

屬性 說明
src 圖片網址,或 base64 內容。
alt 圖片替代文字 ( alternate text ),當圖片無法顯示時,瀏覽器會顯示此文字。
title 設定一段文字,在當滑鼠在圖片上方時,會自動顯示這段文字。
width、height 圖片寬度和高度 ( 像素 ),設定這個屬性後,瀏覽器會預留這個寬高給圖片使用。
srcset 根據特定解析度,使用特定圖片 ( 適用於響應式網頁 )。
sizes 根據特定尺寸,使用特定圖片 ( 適用於響應式網頁 )。
loading 延遲載入圖片 ( 當圖片尚未出現在瀏覽器畫面中時,不會載入圖片 )。
usemap 指定圖片為影像地圖。
ismap 該圖片為影像地圖的一部分。

<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="這是測試圖片">

HTML 教學 - 圖片 <img> - alt 屬性

<img> title 屬性

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

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

HTML 教學 - 圖片 <img> - title 屬性

<img> width 和 height 屬性

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

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

HTML 教學 - 圖片 <img> - width 和 height 屬性

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

意見回饋

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

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

彈出視窗

alert() 警告視窗 confirm() 確認視窗 prompt() 輸入視窗

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片 嵌入 Canva 簡報 嵌入 Scratch 創作