IMG标签还是Background-image

今天遇到一个诡异的问题，一个PC端的网页，为了能在高清屏上显示不模糊，我统一使用了2倍大小图片，这样即使在设备像素比(device-pixel-ratio)为2的高清屏上也能清晰的看到。然而诡异的是，在普通屏上，使用2倍图片的文字反而不清晰，而使用1倍图却清晰。
最后没办法，把原来用img标签实现的图片替换为background-image，然后使用media query来查询设备的min-device-pixel-ratio超过1.5的时候使用2倍图，其他情形使用1倍图来作为背景图。以前一直觉得image标签和background-image差不多，现在发现，background-image在实现这种需要查询设备信息来更改图片时很方便实用。进一步我想查询比较二者的差别，在stackoverflow上找到了一个比较完整的答案，也算是解了多年的惑。

1. 是否可打印。当你打印网页的时候，默认会打印img，background-image的内容则不会，所以这取决于你设计网页的时候希不希望图片被打印出来。

2. SEO。img标签可添加alt属性，其语义能被浏览器理解，也可以被读屏软件识别。一般来说，如果你的图片是周围的文字内容的一部分，比如logo，图表，人等，那么用img，否则用background-image。

3. 文字占位-图片替换。使用类似text-indent:-9999的技巧将文字隐藏，当css加载失败仍然能显示文字，css成功加载则会显示图片，这时候应该使用背景图。

4. 使用background-image可以用到其他css属性，比如background-size，repeat等等，支持图片spirits, 以及动画：

    #some_div {
      background-image:url(image_1.jpg);
      -webkit-transition:background-image 0.5s;
      /* Other vendor-prefixed transition properties */
      transition:background-image 0.5s;
    }
   
    #some_div:hover {
      background-image:url(image_2.jpg);
    }
   

通过这几行css实现了鼠标hover时图片淡入淡出效果，比js方便很多。

简而言之，img标签能更好的SEO，而background-image更加灵活。此外，img属于html标签，代表文档内容，而background-image属于css，代表版式设计。所以，当我们同时可以使用这二者的时候，我们不妨问自己，如果把css统统拿掉，页面呈现的内容都属于文档内容吗？当你发现有些东西和内容无关，属于设计版式的时候，考虑将img改成background-image。

参考文章
stackoverflow img and background-image