前面有介紹了關於 logo 圖片取代文字 background、img 標籤差異，此篇主要針對在 background、img 設置圖片如何選擇以及有什麼差異。

下方會透過以下三點來針對 background、img 來介紹差異性

• Accessibility 可訪問性
• 螢幕列印
• 圖片載入

img

如果圖片屬於內容的一部分，則適合使用 img 標籤。

<div href="#">
    這是一段內容，以及包含對應的圖片
    <img src="https://fakeimg.pl/300/" alt="範例圖片">
</div>

background

background-image 適合存放與內容無關的圖片，比較像是為了符合網站風格（設計稿）而使用，且對於在響應式切換不同圖片、隱藏圖片非常有幫助。

<div class="exampleImage"></div>

.exampleImage {
    height: 100px;
    background: url("https://fakeimg.pl/300/") no-repeat center/cover;
}

Accessibility 可訪問性

img

• img 標籤 alt、title 屬性，提供閱讀器或輔助技術的使用者讀取內容。
• google search 索引，透過 img 標籤位置來爬取圖片。
• google 爬蟲透過 img 標籤 alt、title 屬性來暸解圖片內容。

background

• 蝦咪隆謀。

從 可訪問性 來看 img 標籤完勝。

圖片載入

img

• 使用 img 標籤的 requests 是在 解析 HTML 時發出的，因此載入圖片前，使用者還是可以正常瀏覽其他網頁內容。

background

• 使用 background 設置了過多的圖片，會造成瀏覽器需要花費更多時間來解析 CSS 檔案以及 pull down 圖片，這會導致載入速度變慢。

圖片多使用 img 標籤載入會勝過於 background，但圖片少兩者則沒有太大差異。

從下方兩張 Imgur、Pinterest 瀑布流佈局的圖片，可以觀察出皆是使用 img 標籤。

螢幕列印

img

• img 標籤預設會顯示在螢幕列印中。

background

• background 屬於 CSS 樣式，則不會出現在螢幕列印中。

下方透過網站截圖，來觀察對於螢幕列印有什麼影響。

• logo、banner 圖片皆為 background 因此沒有顯示在螢幕列印中。
• nav 設置的 background-color 沒有顯示在螢幕列印中。
• 下方「單一價個」、「20 分鐘即可取件」為 img 標籤因此有顯示在螢幕列印中。

conclusion

抉擇要使用 img 或 background 可以專注在圖片是否為內容的一部分。

• 如果圖片屬於 內容的一部分 則適合使用 img 標籤，並且設置 alt、title 幫助使用閱讀器或輔助技術的使用者，能更加理解圖片含義。
• 如果圖片與 內容無關 則適合使用 background。