（一）<img>元素特性(大多數特性都可通過CSS實現，建議棄用相應特性)
1. src特性用於指明圖像來源，由於網站所用圖像大多來自本地，建議使用相對地址：src="logo.gif"
2. alt特性用於對圖片進行描述，當瀏覽器無法加載圖片時會用該文字替代圖片；利於屏幕閱讀器和搜索引擎工作。
3. height和width特性用於控制圖像的高度和寬度（通常用像素值指定圖片大小，百分比可能造成圖像扭曲;應該儘量保證圖片大小與網站上預留空間大小一致，否則任意指定圖片大小也會造成圖片扭曲）
4. align特性（棄用）用於在網頁中對其圖像（或指定文本相對於圖像的環繞方式），其值可以有：top、middle、bottem、left和right
5. border特性（棄用）用於爲圖片添加邊框，值單位爲像素點：border=“2”
6. hspace和vspace特性（棄用）用於指定圖像周圍應該預留的空白空間，值單位爲像素。（hspace表橫向，vspace表縱向）
7. name和id特性，用於在網頁中標識圖片。
（二）使用圖像做鏈接
只需在<a>標籤中放置圖片，則點擊圖片即可實現相應跳轉。
<a href="網址"><img src="圖片來源" alt=“圖片描述” /></a>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta charset="utf-8" />
<base href="/testsmarty/templates/"></base>
<title>圖像學習</title>
</head>
<body>
<table border="1" align="center">
<caption>圖像使用</caption>
<tr>
<td><a href="http://www.baidu.com" title="鏈接到百度"><img src="picture/test1.jpg" width="200" height="350" border="2" hspace="5" vspace="10" /></a></td>
<td><a href="http://www.google.com.hk" title="鏈接到谷歌"><img src="picture/test2.jpg" width="200" height="350" border="5" hspace="5" vspace="10" /></a></td>
</tr>
</table>
</body>
</html>
（三）圖片選取
正確的選取圖像格式以及合理安排圖像的保存方式能夠提高網頁加載速度，這裏簡單討論下圖片的存儲格式。
網站上大多數靜態圖是位圖圖像BMP，由像素組成，並指定每個像素的顏色，常見格式包括JPEG、GIF、TIFF、PNG等。屏幕上每平方英寸中像素的數量稱爲圖像分辨率，通常，在web上使用的圖像應保存爲每英寸72個像素點。瀏覽器通常支持3中位圖圖形格式：GIF、JPEG和PNG。
GIF（圖形交換格式）圖像：使用256色的調色板創建GIF圖像圖像每個像素是256中顏色中的一種，這256色的調色板由保存圖像的程序從1600多萬種顏色中選出。GIF圖像的調色板存儲在查找表中，每個像素參考查找表中的顏色信息。優勢在於：如果許多像素使用相同顏色，圖像不需要保存重複的顏色信息，從而使文件較小。該圖像格式適用於顏色較單一的圖形圖像，而不適用於照片。當圖像顏色少於256色時，該圖像是不失真的；但多於256色的情況下，使用抖動技術來替代該像素顏色。
GIF動畫：GIF圖像能夠在一個文件中存儲多個幀或圖像副本，這使得GIF圖像能夠在不同版本間循環，從而可以創建簡單的動畫。
JPEG圖像：可以存儲和壓縮具有很多種顏色的圖像。壓縮JPEG圖像的過程包括拋棄人們無法感知的顏色數據，比如微小的顏色變化，由於該圖像格式拋棄了這些數據而無法還原到最初版本，被稱爲有損壓縮。由於JPEG格式設計用於操作類似於照片的真實圖像，故不適用於存儲具有大量單調顏色或者有較高對比度硬邊線的圖像。
PNG（可移植網絡圖形）圖像：PNG格式有兩個版本，8位的PNG與8爲GIF有相同限制，僅有256中顏色，且每個像素或爲透明或者不透明。24位PNG則不受顏色數量限制，不會丟失任何顏色數據；而且使用映射爲每個像素提供不同顏色的透明度。PNG的壓縮比好於相應的GIF格式。
總結：網站圖像應保持較小的文件尺寸；JPEG格式保存具有許多細節的逼真圖像；GIF和PNG保存具有單調顏色或硬邊線的圖像。
