刚刚接触前端重构的小伙伴或许会遇到一个问题，网页中的图片是做背景（写在CSS中）好呢，还是写在HTML标签中好呢？其实呢不同的场景、不同的项目需求下，选择都会不一样。我们先来分析一下网友的一些结论，并适当吐槽下。

      1.使用<img> 有一个好处是，用户可以很方便的右键保存或者复制图片的链接。

      2.图片做为背景，在图片没加载的时候或者加载失败的时候，不会有个图片的占位标记，不会出现红叉。

      PS：一般图片下载站会希望访客、用户去下载站内的图片，一般的企业或者站长其实并不希望同行或者竞争对手下载并盗用网站上的图片。第二点出现红叉应该是古老的IE浏览器才会出现，而且随着宽带网速的提升，这种情况并不多见。

      3、 在网页加载的过程中，以css背景图存在的图片会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的<img>标签是网页结构（内容）的一部分会在
加载结构的过程中加载，换句话讲，网页会先加载<img>标签的内容，再加载背景图片，如果你用<img>引入了一个很大的图片，那么在这个图片下载完成之前，<img>之后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。这算比较大的区别之一。

      4.如果是装饰性的图片就写在css里面，如果是内容性的图片就写在html里面。 打个比方，你要做一个有漂亮边框的相册。那么修饰边框的图片就写在css里面，相框里面的内容照片就写在html里面。

      如下场景使用img标签比较合适：

      1、使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
      2、如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
      3、如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
      4、使用img代替有背景图像可以显著提高性能的动画背景。
      5、IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。

      如下场景使用background-image属性比较合适：

      1、如果图像不是内容的一部分时使用backgrond-image。
      2、当图像代替文本使用时使用backgrond-image（避免出现无语义化标签）。
      3、如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。
      4、如果你只需要展示图像的一部分通过CSS sprites，时使用backgrond-image。
      5、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。