HTML - 请你谈一谈img标签图片和background背景图片的区别

 难度级别：中级及以上                                 提问概率：65%

---

面试官当然不会问如何使用img标签或者background来加载一张图片，这些知识点都很基础，相信只要从事前端开发一小段时间以后，就可以轻松搞定加载图片的问题。但很多人习惯用img标签，很多人习惯用background背景，那么在加载图片的时候，他们有哪些区别呢，什么情况下该用哪一个呢？

1 对容器的要求

虽然两种方式都能显示图片，但日常开发中，img标签即便在不设置宽高的情况下，依然可以将图片渲染出来，只不过我们为了更完美的布局，为其设置一定的显示区域。而background背景图片更依托于DOM元素，如果元素是行内元素，或者未设置宽高，图片则不能被渲染出来。

另外，img标签的宽高设置可以直接改变图片的显示大小，但background背景属性则需要依赖更多的CSS属性设置。但属性复杂也为我们的网页渲染带来了更多的效果，例如background-size可以设置图片的尺寸，或者相对于自身DOM元素的宽高适应情况；例如background-repeat可以设置图片是否平铺渲染；例如background-position可以设置图片的渲染坐标等，这些功能都是img标签所不具备的，这也使得background这个CSS复合属性具有更加灵活的功能，在网页开发中，更加灵活可用的功能，不正是我们所需要的嘛。

2 对页面渲染的影响

img标签属于DOM元素，而background这个CSS属性最终会做为CSS文件，嵌入网页中。我们知道网页的渲染，是DOM树和CSS样式的结合，所以，如果使用img标签来渲染图片的话，很显然，不需要等待CSS的加载，浏览器从上到下解析到img标签的时候，再请求图片即可完成这项任务；但如果是background背景图片的话，则需要先下载CSS文件，然后浏览器解析CSS文件，而后找到对应的图片链接，再请求图片，还要做CSS样式与DOM元素的对接，从而完成这项任务。

这样看来，使用background背景图片的方式，比直接使用img标签渲染图片过程要复杂的多。尤其是遇到弱网情况，使用img标签来加载图片要更有优势。

3 不希望用户轻松获取图片

相信大家都有这样的经历，我们在访问网页的时候，遇到自己喜欢的图片，使用img标签渲染的图片，可以用鼠标轻松拖动到桌面，这也就实现轻松实现了图片的下载；但使用background背景渲染的图片，却无法将图片用鼠标拖动到桌面。

这样就可以为我们的网页图片做一种保护手段，来决定是否可以让用户轻松获取图片。但这恐怕只能做为一种针对外行人员的保护手段，因为我们知道，通过F12打开浏览器的控制台，还是可以看到图片链接的。

4 对SEO的影响

大家不断对网站进行SEO优化，是希望自己的网站更容易被搜索引擎抓取，从而使自己获得更多的流量。在SEO优化手段中，图片优化也是一个重要环节。而搜索引擎更喜欢抓取静态的网页片段，相比之下，如果你想对网页做图片SEO优化，background背景图片做为一种样式，属于后期动态与DOM树结合起来渲染到网页中的图片，并不能被搜索引擎抓取到。即便是使用Javascript动态为img标签的src属性赋值也不行，搜索引擎更喜欢在网页初始化的时候，img标签与src的链接一起被加载出来。这样看来，在SEO优化层面，img标签会比background背景图片更有优势，同时img标签加载图片的方式也更符合HTML语义化标准。

5 样式与数据的区分

在前端开发的世界里，图片既可以做为一种样式，同时也可以被理解为一种数据的展示。当做为样式的时候，更建议使用background背景图片的方式，例如常见的小图标、弹框背景图、按钮背景装饰图、登录页背景图等，这些图片都是为了起到一定的装饰作用，为了锦上添花；而做为数据的时候，更建议使用img标签的方式，例如logo、轮播图、商品封面、广告图片等，这些图片都占有非常重要的地位，用户可以根据这种图片第一眼感知到商家想要表达的意思，所以这种图片更是以一种数据元素出现的，而非装饰元素。

经过以上对比，分析出了img图片和background背景样式图片各自适用的场景，所以并不能一概而论哪种方式更好，更不能在开发中一直单一的使用某一种方式，需要根据不同的场景来综合决定哪种方式更适用。

---

刷题思考

    这道题还不像iframe那道题，而是从加载图片入手。这属于典型的知识点常用到延伸的题目，面试官一般会先从常用的知识点入手，逐渐延伸性的去考察周边相关的问题，这体现了一名中级及以上级别的开发工程师，在日常开发工作以外，是否有总结和思考的好习惯。

---

类似考点

    这道题说到了加载图片，其实前端网页之所以绚烂多彩，图片功不可没，所以与图片相关的题目一定要多准备，例如请你说一说，你是如何在网站中使用懒加载的？例如请说一说你所知道的图片格式，分别用于哪种场合更适合等。