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

Question

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

Answer 1

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

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

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

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