Img與background的區別

　　今天作項目中，用background顯示了二維碼和一些文字，但顯示到頁面上時，二維碼和圖片都變得模糊了。因而將圖片調整、放大，但在放大後，做爲背景圖片的它則顯示不全，無奈之下用了backgroung-size。但background-size在IE下不兼容，故最後使用了img+width+height的作法。

　　下面咱們就來看看img和bg的區別。

1、從解析機制看

    Img屬於html標籤，background是css方法。一個頁面由html、css、js組成，按照瀏覽器解析機制，html標籤優先解析。你們都知道css文件會放在head加載，可是這並不意味着它會當即執行，而是在html加載完後才執行的。因此重要的元素，如logo就應該使用img，我也犯了這個錯誤啊，改~~~。

    若是僅僅是爲了顯示一張圖片，好比banner、廣告圖等，建議採用background方式。由於不重要的自動日後排，避免佔用帶寬，形成數據阻塞。

    若是圖片不少，這裏又出現一個新的問題，不一樣的瀏覽器支持的併發加載數量是不同的，（最新測試）IE是10個，FF是10個，圖片多，就會出現嚴重的延遲或者404，由於圖片加載慢會影響到頁面主要數據呈現，那麼讓用戶看到的都是空白，你好意思讓他繼續等下去嗎！因此，若是不採用lazyload仍是採用background比較好。

    Img標籤優勢是自閉和，能夠避免空標籤出現（空標籤也是w3c驗證的內容之一）。採用background方式就會出現空標籤，bootstrap中的icon都是用i標籤加入的，而i標籤中是空內容，這樣就產生了空標籤（並非說這樣作很差，利弊等會聊）。

 

2、從SEO角度看

    剛纔說了，Img標籤是自閉和的，不能添加文本內容，可是，Img有一個alt屬性，並且這個屬性在w3c標準中，要求必須有，這樣作的優勢仍是不少的。

第一，圖片比較大，或者用戶網速比較窩火的時候，加載失敗了，至少還有文字提示告訴用戶這裏是個什麼內容的圖片。若是用戶非要看這個圖，那就多刷幾回去加載。另外，alt屬性有利於輔助閱讀，尤爲是對盲人朋友，他們使用閱讀器瀏覽頁面，若是沒有文本提示，就太不厚道了。

第二，alt屬性有利於SEO，搜索引擎實現很好的圖像識別仍是有一段路要走。

固然缺點也是有滴：

第一，Img加載的圖片是經過src拿到的，若是HTML代碼不容許修改，那怎麼換圖，只有同名文件替換，可是有可能遇到304狀態，須要服務器端作相應的設置。這時background的優勢就出來了，換皮膚就是這個栗子。

第二，若是圖片顯示區域空間大小是預留的，那麼圖片必須和預留的空間一致，不然圖片要麼被拉伸要麼被壓縮，都不是等比例操做。固然，避免這種問題就須要前端和視覺設計師遵照必定的規範。

 

3、語義化角度

    Background和語義化不沾邊了，Img是HTML標籤，語義明確。

 

建議：重要的須要優先加載的圖片最好採用img。不重要的圖片最好採用background。

 

作SEO是最方便的仍是background，圖片是放在背景上的，前景寫內容，兩不誤。若是不想讓內容顯示出來，就加text-indent， -99999你懂的。（之前有這種玩法，是搜索引擎算法單一的年代，關鍵字比重高 排名就靠前）。

 

剛纔提了一下bootstrap的background方法，bootstrap的作法是用background設置icon，icon的使用太靈活了，因此必須模塊化，語義化先靠邊站，魚與熊掌不可兼得。PS：bootstrap v3以後採用了icon font

其次icon的重要性真不高，放在最後加載還減小了帶寬佔用量，提升PV速度。

img標籤語義很明確不能亂用，因此bootstrap採用無語義的i標籤來設置icon也挺好。PS：本身項目中使用無語義標籤要注意是否向前兼容，要關注HTML5中的定義。