css - Div 背景图片或使用 IMG 标签

Question

我想知道，使用带有 IMG 标签的图像或用作 DIV 背景有什么区别吗？它会影响网站性能、谷歌搜索等吗？

Answer 1

没有真正的性能差异或 SEO 差异（尽管我认为img具有指定属性的元素alt对于 SEO 来说可能比背景图像稍微好一点，只是因为它需要抓取更多的文本）。

区别主要是语义上的。 IMG元素应该用于图像/照片等（例如，如果您将照片放在博客文章、新闻文章或其他任何内容中，以及通常不属于严格视觉布局元素的图标等内容），而background-image用于，嗯，背景。这个想法是背景图像对于理解页面内容并不重要，而图像是。爬虫不关心背景图像或其他纯视觉元素（他们关心其中的内容），但他们确实关心为内容增加意义的图像，无论是作为链接图形、内容补充等。

还有一些使用注意事项 - 例如，您可以IMG通过将元素设置为其父容器元素的百分比宽度来轻松缩放元素，这在响应式设计和视网膜显示器的 144 dpi 替代方案中很重要（其中您有一个媒体查询，例如，将 300 像素的正方形图像放在视网膜显示器上的 150 像素的正方形容器中），background-image由于依赖于许多较新的 CSS3 功能，因此并不那么简单或被广泛支持。

一般来说，除非存在支持使用其中一个或另一个的功能问题，否则请选择最符合语义的选择。与此相关的事实是，通常您的网站越语义化，就越容易访问，并且爬虫和索引器更容易准确地解释您的内容。

Answer 2

我能想到的3个区别：

• div 必须是图像的确切大小。在 HTML/CSS中调整图像大小不利于性能
• 用户无法右键单击 > 保存图像
• 你没有替代文字

Answer 3

是的，有区别。您不能在 IMG 标签上放置文本 - 您必须作弊 ;-) 带有背景图像的 DIV 允许您这样做。

性能应该差不多。根据浏览器引擎，由于加载过程，IMG 或 DIV 可能是首选。

谷歌搜索也存在差异。如果 IMG 作为背景图像“隐藏”在 DIV 中，则很难找到它。

如果是图像 -> 如果是背景，则将其视为 IMG -> 将其视为背景。