圖片部分可用HTML或CSS的background-image功能來加入，不過今天先以使用HTML為主。
以下是今天會學到的幾種教學:

• 新增圖片
• 圖片的高度與寬度
• 圖片插入的位置
• 圖片格式與解析度
• 圖片的說明

通常圖片的部分都有版權，建議使用圖庫影像才不會為自己帶來麻煩。
如果要從無到有建構出一個網站，建議製作一個資料夾存放網站所使用的圖片。

新增圖片

要在網頁上加入影像時，會需要使用<img>元素，此元素為空白元素，沒有結束標記。
<img>元素必須包含下列兩個屬性:
src
這個屬性是一個相對URL，指向自己站內的圖片。
例如:

<img src="image/logo.jpg" />

alt
這個屬性提供了該圖片的文字敘述，如果圖片失效時，就會顯示此段敘述，若是圖片顯示正常，此段文字敘述就不會顯示。
如果圖片不需要使用文字敘述，建議還是使用alt屬性，內容留空不寫。
例如:

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

title
這個屬性是用來提供關於該圖片的額外資訊，滑鼠移到影像上方時，會在提示視窗中顯示出此屬性的內容。
例如:

<img src="image/logo.jpg" alt="logo" title="形象商標" />

圖片的高度與寬度

height: 指定圖片高度，單位為像素。
width: 指定圖片寬度，單位為像素。
例如:

<img src="image/logo.jpg" alt="logo" width="600" height="400" />

註:也可使用CSS來替代HTML指定圖片尺寸，在之後的文章內會提到。

圖片插入原始碼的位置

圖片元素放在原始碼的位置會影響到顯示出來的方式，以下為說明:

1. 圖片元素放在文字段落之前(文字元素前)，文字段落會從圖片的下一行開始。

2. 圖片元素放在段落開頭(文字元素後)，文字的第一行會與圖片底部對齊。

3. 圖片元素放在文字段落之間，圖片會顯示在原始碼所對應的位置中間。

圖片格式與解析度

網頁主要使用的圖像格式為jpeg、gif、png，每種格式都有不同的特性，JPEG適合使用在多色系的圖片上，而gif與png則比較適合用在少量顏色的圖片。

而網路用途的圖片解析度應該儲存為72ppi，色彩必須使用RGB模式，影像解析度越高檔案則越大，電腦顯示器限制在72ppi內，所以不
需要使用太高解析度的圖片，反而只會造成讀取網頁速度變慢。

當影像圖片是線條畫時(例如LOGO、插畫、圖表等等)，也可使用向量格式製作，向量格式的優點是可以直接將影像尺寸放大，也不會影響到圖片品質。

圖片的說明

<figure>元素為HTML5的新元素，用來包含圖片與其說明，方便將兩者連結在一起，只要說明內容相同，此元素內也可以放置一張以上的圖片。
<figcaption>元素也是HTML5的新元素，用來加入圖片的文字說明。
以下為範例:

<figure>
   <img src="image/logo.jpg" alt="Logo" />
   <br />
   <figcaption>此圖為公司新註冊商標</figcaption>
</figure>

參考來源:
<figure>：可附标题内容元素
HTML img title 與 img alt 的差別
網頁前端工程入門：基礎 HTML 教學 By 彭彭
書籍:HTML&CSS 網站設計建置優化之道