剛剛接觸前端重構(gòu)的小伙伴或許會(huì)遇到一個(gè)問題，網(wǎng)頁中的圖片是做背景（寫在CSS中）好呢，還是寫在HTML標(biāo)簽中好呢？其實(shí)呢不同的場景、不同的項(xiàng)目需求下，選擇都會(huì)不一樣。我們先來分析一下網(wǎng)友的一些結(jié)論，并適當(dāng)吐槽下。

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

      2.圖片做為背景，在圖片沒加載的時(shí)候或者加載失敗的時(shí)候，不會(huì)有個(gè)圖片的占位標(biāo)記，不會(huì)出現(xiàn)紅叉。

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

      3、 在網(wǎng)頁加載的過程中，以css背景圖存在的圖片會(huì)等到結(jié)構(gòu)加載完成（網(wǎng)頁的內(nèi)容全部顯示以后）才開始加載，而html中的<img>標(biāo)簽是網(wǎng)頁結(jié)構(gòu)（內(nèi)容）的一部分會(huì)在
加載結(jié)構(gòu)的過程中加載，換句話講，網(wǎng)頁會(huì)先加載<img>標(biāo)簽的內(nèi)容，再加載背景圖片，如果你用<img>引入了一個(gè)很大的圖片，那么在這個(gè)圖片下載完成之前，<img>之后的內(nèi)容都不會(huì)顯示。而如果用css來引入同樣的圖片，網(wǎng)頁結(jié)構(gòu)和內(nèi)容加載完成之后，才開始加載背景圖片，不會(huì)影響你瀏覽網(wǎng)頁內(nèi)容。這算比較大的區(qū)別之一。

      4.如果是裝飾性的圖片就寫在css里面，如果是內(nèi)容性的圖片就寫在html里面。 打個(gè)比方，你要做一個(gè)有漂亮邊框的相冊(cè)。那么修飾邊框的圖片就寫在css里面，相框里面的內(nèi)容照片就寫在html里面。

      如下場景使用img標(biāo)簽比較合適：

      1、使用IMG(alt文本)圖像有一個(gè)重要的語義時(shí),比如一個(gè)警告圖標(biāo)。這將確保圖像的意義可以很好的和user-agents溝通,包括屏幕閱讀器。
      2、如果你依賴于瀏覽器縮放圖像比例并且可以呈現(xiàn)不錯(cuò)的效果時(shí)使用IMG。
      3、如果配合 z - index 伸展背景圖像來填補(bǔ)它的整個(gè)窗口時(shí)使用IMG。
      4、使用img代替有背景圖像可以顯著提高性能的動(dòng)畫背景。
      5、IMG會(huì)首先加載因?yàn)閟rc在html文件本身中而在有背景圖像源是樣式表中引入的圖像，加載樣式表加載后,延遲加載的網(wǎng)頁。

      如下場景使用background-image屬性比較合適：

      1、如果圖像不是內(nèi)容的一部分時(shí)使用backgrond-image。
      2、當(dāng)圖像代替文本使用時(shí)使用backgrond-image（避免出現(xiàn)無語義化標(biāo)簽）。
      3、如果需要縮短下載時(shí)間通過CSS sprites 時(shí)使用backgrond-image。
      4、如果你只需要展示圖像的一部分通過CSS sprites，時(shí)使用backgrond-image。
      5、如果你需要為不同的屏幕分辨率展示不同的圖像使用 media查詢時(shí)使用backgrond-image。