Div背景图像或使用IMG标记

Question

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

Answer 1

没有真正的性能差异或搜索引擎优化的差异（虽然我认为指定img属性的alt元素对于搜索引擎优化而言可能比背景图像稍微好一点，只是因为它更多的文字到爬行）。

差异主要是语义上的。 IMG元素应该用于图像/照片等（例如，如果您将照片放在博客文章，新闻帖或其他任何内容中，以及通常像图标等不严格的视觉布局元素） background-image适用于那些背景很好的事情。这个想法是背景图像对于理解页面内容和图像的内容并不重要。爬行者不关心背景图像或其他纯粹的视觉元素（他们关心其中的内容），但他们关心的是增加内容含义的图像，无论是作为链接图形，内容补充，等等。

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

一般情况下，除非有支持使用其中一个的功能性问题，否则请选择最具语义性的选项。与此相关的是，一般来说，您的网站越具有语义性，它就越容易访问，抓取工具和索引器就越容易准确地解释您的内容。

Answer 2

我能想到的3个不同之处：

• div必须是图像的确切大小。调整HTML / CSS is bad中的图像以获得性能
• 用户无法右键单击＆gt;保存图片
• 您没有替代文字

Answer 3

是的，有差异。 你不能把文字放在IMG标签上 - 你必须作弊;-) 具有背景图像的DIV允许您这样做。

性能应该几乎相同。根据浏览器引擎的不同，IMG或DIV可能会因加载过程而受到优先考虑。

Google搜索也存在差异。如果它在DIV中被“隐藏”为背景图像，那么你的IMG很难找到。

如果是图像 - ＆gt;将其视为IMG 如果是背景 - >把它当作背景。