Div 背景图像或使用 IMG 标签

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

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

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

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

一般来说，除非存在支持使用其中之一的功能问题，否则请选择最具语义的选择。与此相关的事实是，一般来说，您的网站的语义越多，它就越容易访问，爬虫和索引器也就越容易准确地解释您的内容。