img和background-image的異同:
img是網頁結構層面上的標簽,頁面中多一個img標簽就會多一次http請求,且當我們瀏覽頁面時,img標簽作為網頁結構的一部分,會在瀏覽器加載結構的過程中加載。這樣有個缺點是,如果圖片很大,那么很可能在此圖片加載完成之前都不會顯示這張圖片。但,img標簽具有alt和title屬性可以協助搜索引擎蜘蛛識別圖片,用戶體驗度更好。
background-image沒有任何語義,更多是為頁面做裝飾效果,因此搜索引擎蜘蛛是無法識別背景圖也不會抓取背景圖的。不過backgrount-image會在頁面結構加載完整之后才開始加載,因此不會影響用戶瀏覽頁面內容。
如何選擇呢?
根據兩者的異同優缺點后,可以總結出兩者的主要使用環境如下:
1、圖片想讓蜘蛛抓取,收錄用alt,比如logo, 產品圖片,案例圖片,公司介紹圖(包括公司環境、地圖等),不過在使用img標簽時一定要添加圖片的alt屬性,否則不利於SEO,不利於蜘蛛識別抓取。
2、圖片沒有任何語義,僅僅是作為頁面裝飾效果建議用background-image來展示。尤其是一些小圖片、小圖標,比如聯系電話的圖標、友情鏈接的圖標,分享圖標......。當然如果圖片的展示會影響頁面內容完整度或者需要供用戶打印的話,也需要優先考慮使用img標簽。