目前前端頁面顯示圖片的方式用兩類，一類是使用img標簽引入圖片，一類是使用background屬性來設置圖片背景，那么這兩類方法之間有區別嗎？到底什么地方應該使用background，什么地方應該使用img呢？今天萬章老師就從幾個方面給大家分享一下如何認識這個兩個標簽，並且如何使用
第一個方面：從加載速度角度看
img屬於頁面的標簽，background屬於元素的屬性，根據前端頁面加載順序，img標簽會優先加載，當HTML的標簽加載完成后才會執行元素的樣式。
很多人會以為style標簽在body加載所以background會先於img顯示圖片，其實頁面在加載完style標簽后並不會立即去執行它，而是當頁面結構加載完成后才會去執行CSS樣式。
所以從加載速度上看img要快於background。
第二個方面：從用戶角度看
img標簽顯示的圖片用戶可以右鍵保存至本地，而background顯示的用戶則無法保存。
當圖片加載錯誤時， img可以用alt的文字來告訴用戶頁面這張圖片區域應顯示的內容，但是background就無法做到。
使用img標簽並設置一個alt的文字，能夠幫助存在視覺障礙的讀者能夠通過屏幕閱讀器得知頁面的主要內容, 包括圖片內容 , 但是使用background就無法實現。
第三個方面：從SEO角度看
為了讓搜索引擎能夠將我們的網站盡可能的在搜索結果中靠前顯示，我們就需要搜索引擎能夠讀懂我們的網頁內容。我們現在的搜索引擎是無法直接獲取圖像所描述的內容的, img的alt屬性能夠很好地讓搜索引擎知道該圖片的信息, 而background無法做到讓搜索引擎直接讀懂圖片。
第四個方面：從語義上看
img表示的是頁面內容的一部分，而background只是一個樣式，樣式起的是一個修飾作用，所以當我們想顯示的圖片是網站想要展示給用戶的內容的一部分的時候, 如:產品介紹，新聞圖片，美照等等的時候， 我們需要使用img。 當這張圖片只起裝飾的作用時， 我們可以使用background。
雖說兩者最終顯示的效果相同，但根據不同的使用目的我們需要柔性的調整我們最終選擇哪種方法去。