在前端頁面的實現過程中，我們經常會遇到這個情況：有一個盒子，盒子裏面需要放一張圖片。這個時候，我們既可以通過添加image標簽來實現，也可以通過設置背景圖的形式實現，哪種更好呢？
一般情況下，可能就是哪種順手用哪個，因為都能實現需要的功能，但如果都是這樣的話，html也就沒必要做兩個標簽了。下面就來看一下兩者的區別：

從上面可以看出來，img更適合作為內容部分渲染到頁面裏面，即便樣式文件加載失敗，也要讓用戶可以看到的，屬於必須要的元素，特別適合作為廣告宣傳、產品展示類的使用。
而background則相對更適合做修飾類的，即便沒能正常加載也並不影響頁面整體的內容展示和用戶交互，屬於錦上添花類型的。

但是這兩種方式又都存在著表中所列出的一些問題，針對這些問題，可以做如下優化：
1、img標簽指定寬高尺寸，避免頁面回流重繪。指定alt屬性或者默認圖片，在圖片加載失敗的時候備用。
2、logo元素同時使用img標簽和background，並指定不同的圖片源，比如一個用資源服務器圖片，一個用base64編碼(合適的話)，避免那個元素加載不出來導致宣傳效果達不到。
 

其實說了這些，也還是要看個人的開發習慣和保證產品完整性需要，下回見吧

到底該用img還是background-image？