本文轉載自：http://www.bangju.com/design_50.html 感謝分享

剛剛接觸前端重構的小夥伴或許會遇到一個問題，網頁中的圖片是做背景（寫在CSS中）好呢，還是寫在HTML標籤中好呢？其實呢不同的場景、不同的專案需求下，選擇都會不一樣。我們先來分析一下網友的一些結論，並適當吐槽下。

1.使用</> 有一個好處是，使用者可以很方便的右鍵儲存或者複製圖片的連結。

2.圖片做為背景，在圖片沒載入的時候或者載入失敗的時候，不會有個圖片的佔位標記，不會出現紅叉。

PS：一般圖片下載站會希望訪客、使用者去下載站內的圖片，一般的企業或者站長其實並不希望同行或者競爭對手下載並盜用網站上的圖片。第二點出現紅叉應該是古老的IE瀏覽器才會出現，而且隨著寬頻網速的提升，這種情況並不多見。

3、 在網頁載入的過程中，以css背景圖存在的圖片會等到結構載入完成（網頁的內容全部顯示以後）才開始載入，而html中的標籤是網頁結構（內容）的一部分會在
載入結構的過程中載入，換句話講，網頁會先載入標籤的內容，再載入背景圖片，如果你用引入了一個很大的圖片，那麼在這個圖片下載完成之前，之後的內容都不會顯示。而如果用css來引入同樣的圖片，網頁結構和內容載入完成之後，才開始載入背景圖片，不會影響你瀏覽網頁內容。這算比較大的區別之一。

4.如果是裝飾性的圖片就寫在css裡面，如果是內容性的圖片就寫在html裡面。 打個比方，你要做一個有漂亮邊框的相簿。那麼修飾邊框的圖片就寫在css裡面，相框裡面的內容照片就寫在html裡面。

如下場景使用img標籤比較合適：

1、使用IMG(alt文字)影象有一個重要的語義時,比如一個警告圖示。這將確保影象的意義可以很好的和user-agents溝通,包括螢幕閱讀器。
2、如果你依賴於瀏覽器縮放影象比例並且可以呈現不錯的效果時使用IMG。
3、如果配合 z - index 伸展背景影象來填補它的整個視窗時使用IMG。
4、使用img代替有背景影象可以顯著提高效能的動畫背景。
5、IMG會首先載入因為src在html檔案本身中而在有背景影象源是樣式表中引入的影象，載入樣式表載入後,延遲載入的網頁。

如下場景使用background-image屬性比較合適：
1、如果影象不是內容的一部分時使用backgrond-image。
2、當影象代替文字使用時使用backgrond-image（避免出現無語義化標籤）。
3、如果需要縮短下載時間通過CSS sprites 時使用backgrond-image。
4、如果你只需要展示影象的一部分通過CSS sprites，時使用backgrond-image。
5、如果你需要為不同的螢幕解析度展示不同的影象使用 media查詢時使用backgrond-image。