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

标签 css image html

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

最佳答案

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

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

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

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

关于css - Div 背景图片或使用 IMG 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17090853/

相关文章:

javascript - 我的 h1 标签字体系列突然从它在 css 中的原始字体系列改变了

jquery - 奇怪的问题 : Variable is not defined on touchscreen

CSS:如何定位表格内的特定单元格?

css - 使用CSS更改图像的颜色?

html - 初学者在 Bootstrap 中与平板电脑大小的图像网格作斗争

image - 将多个图像打包成 GOLANG 二进制文件

javascript - Vue.js 简单脚本不起作用

javascript - CSS/JS 滚动一个较低的 z-index div

javascript - 如何进行 worker 与 worker 的沟通?

javascript - JQuery-UI 选项卡的样式菜单选项卡