網站的 logo 圖片用 img 標籤還是背景圖片合適?

01-03

建議看看 SO 上面的這個問題的討論：html - When to use IMG vs. CSS background-image?

先拋開實際操作中的問題，準則其實很簡單，如果一張圖片是網頁內容的一部分，就該用 &，否則就建議用 CSS 背景圖。但問題的核心在於「Logo 是否屬於網頁內容的一部分」。

從語義正確性角度個人傾向於用 &。

個人建議同時寫背景圖片和 img 標籤，兼顧SEO 的同時在高對比度模式下也可以正常顯示圖片。具體代碼晚些補上…

2年半了，代碼來了，你們先吃碗面，壓壓驚。

使用& 還有一個好處是，用戶可以很方便的右鍵保存 Logo 或者複製 Logo 圖片的鏈接。

&

`& & & &W3C& & &`
`.logo a { background: url(http://www.w3.org/2008/site/images/logo-w3c-screen-lg) no-repeat 0 0; display: block; width: 249px; height: 107px; position: relative; overflow: hidden; margin: 10px auto; }`
`.logo img { color: #fff; }`
`.logo .alt-logo { position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; padding-left: 22px; padding-top: 25px; font-size: 50px; color: #fff; background-color: #075F9F; }`
.alt-logo 的作用是當圖片載入失敗的時候可以顯示一個替代文本，如果只用兼容 IE8 以上，可以用 ::after 偽元素代替。
圖片載入失敗時的展現（Chrome）：

Demo：http://jsbin.com/cobaratofa/edit?html,css,output

應該用 img 標籤，除了可以設 alt 和被引擎抓取外，在 CSS 裸奔時也可以顯示。

背景圖片

文件管理起來方便一些。一般情況下JS/CSS/IMAGE都放在同一個靜態目錄下，CSS可以直接使用相對地址。當然，有的公司是使用的獨立域名存放圖片文件，這種情況下這種優勢不明顯；

CSS裸奔的時候也可以顯示。text-indent:-9999px；

對於retina屏幕，可以使用CSS直接適配不同圖片；

不太懂讓SEO抓到logo圖片有什麼好處，特別是像某些搜索引擎。

鍋爺邀請我應該是要我從SEO角度來分析吧

評論里已經有人說到了，如果要對SEO比較好的，就是 @Sven 說的 A標籤+CSS定義背景圖。知乎的logo用的就是這種方式，這種方式比IMG好就在於是個很好的錨文本鏈接，而且A標籤也可以添加title屬性，而IMG沒有錨文本，只有title屬性和alt文本。目前來說，搜索引擎對文本信息的識別要比alt中的文字友好的多。
註：此方法雖然有涉嫌隱藏內容的作弊嫌疑，但是因為現在有不少網頁設計人員都這麼用，同時也並沒有影響到用戶體驗，所以只要不是惡意堆砌關鍵字的話，我認為是沒有問題的。

我不是前端的，我不喜歡img，這個元素不好操作，控制不好，說到seo 其實div也可以alt的；

用img比較好，利於seo，也可以讓喜歡你網站的人保存你的logo。google圖片可能也會抓取你的logo的。

恩，應該用IMG，加ALT方便SEO

我傾向於使用background，目前在使用vue全家桶開發單頁應用，模板和樣式是分離的，個人不習慣在html模板中書寫大量的url，url還是寫在css里比較舒適。當然如果img需要根據屏幕寬高自適應且要保持縱橫比的時候，那還是用img標籤咯

推薦閱讀：