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

      1.使用<img> 有一個好處是，用戶可以很方便的右鍵保存或者復制圖片的鏈接。

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

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

      3、 在網頁加載的過程中，以css背景圖存在的圖片會等到結構加載完成（網頁的內容全部顯示以后）才開始加載，而html中的<img>標簽是網頁結構（內容）的一部分會在
加載結構的過程中加載，換句話講，網頁會先加載<img>標簽的內容，再加載背景圖片，如果你用<img>引入了一個很大的圖片，那么在這個圖片下載完成之前，<img>之后的內容都不會顯示。而如果用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。