页面中图片以背景图形式展示好还是以img标签形式展示

img和background-image的异同：

img是网页结构层面上的标签，页面中多一个img标签就会多一次http请求，且当我们浏览页面时，img标签作为网页结构的一部分，会在浏览器加载结构的过程中加载。这样有个缺点是，如果图片很大，那么很可能在此图片加载完成之前都不会显示这张图片。但，img标签具有alt和title属性可以协助搜索引擎蜘蛛识别图片，用户体验度更好。

background-image没有任何语义，更多是为页面做装饰效果，因此搜索引擎蜘蛛是无法识别背景图也不会抓取背景图的。不过backgrount-image会在页面结构加载完整之后才开始加载，因此不会影响用户浏览页面内容。

如何选择呢？

根据两者的异同优缺点后，可以总结出两者的主要使用环境如下：

1、图片想让蜘蛛抓取，收录用alt,比如logo, 产品图片，案例图片，公司介绍图（包括公司环境、地图等），不过在使用img标签时一定要添加图片的alt属性，否则不利于SEO,不利于蜘蛛识别抓取。

2、图片没有任何语义，仅仅是作为页面装饰效果建议用background-image来展示。尤其是一些小图片、小图标，比如联系电话的图标、友情链接的图标，分享图标......。当然如果图片的展示会影响页面内容完整度或者需要供用户打印的话，也需要优先考虑使用img标签。