圖片替換主要是指將文字替換成圖片的技術，即在html語句中使用文字，瀏覽器顯示時用對應的圖片顯示。其意義在於便於做網站優化（SEO），文字才是搜索引擎尋找的主要對象。
經典的替換方法：
- Fahrner圖片替換法（FIR）
源碼：
Html：
<h1 id="fir"><span>Fahrner Image Replacement</span></h1>
CSS：
#fir {
width: 287px;
height: 29px;
background: url(fir.gif) no-repeat;
}
#fir span {
display: none;
}
解釋：
首先添加一個<span>標簽，然后使用<span>標簽的display屬性把文字隱藏起來，最后指定<h1>的背景圖片。
優點：使用CSS而不是標記語法提供圖片，更改圖片只需更改CSS。
缺點：（1）需要一組不具備任何語義的<span>標簽才能運作（2）display屬性影響屏幕閱讀器使用者（3）關閉瀏覽器顯示圖片，同時啟用CSS支持時，文字圖片均不可顯示。
2. Leahy/Langridge圖片替換法（LIR）
源碼：
Html：
<h1 id="lir">Leahy/Langridge Image Replacement</h1>
CSS：
#lir {
padding-top:image height;
overflow:hidden;
background:url(lir.gif) no repeat;
height:0 !important; //針對大多數瀏覽器
height:image height; //針對IE5
}
解釋：
首先將padding-top設置為圖片高度，將h1高度設置為0（IE5下設置為圖片高度），根據盒子模型可知，文字內容將被排擠到指定高度之外，同時設置overflow：hidden將溢出文字隱藏。
優點：（1）去掉冗余的<span>標簽（2）不影響屏幕閱讀器使用者
缺點：（1）關閉瀏覽器顯示圖片，同時啟用CSS支持時，文字圖片均不可顯示（2）要為IE5 for Windows使用盒模型Hack。
3. phark圖片替換法
源碼：
Html：
<h1 id="phark">The Phark Method</h1>
CSS：
#phark {
height: image height;
text-indent: -5000px;
background: url(phark.gif) no-repeat;
}
解釋：設置text-indent屬性為很大的負值，將文字顯示在屏幕之外，達到隱藏的效果。
優點：（1）不需要額外標簽（2）不影響屏幕閱讀器使用者
缺點：關閉瀏覽器顯示圖片，同時啟用CSS支持時，文字圖片均不可顯示