html中图片显示方式-----img与background的区别
一、从解析机制看
img属于html标签，background是css办法。一个页面由html、css、js组成，依照阅读器解析机制，html标签优先解析。大家都知道css文件会放在head加载，但是这并不料味着它会马上施行，而是在html加载完后才施行的。所以重要的元素，如logo就应当使用img。
假如仅仅是为了显示一张图片，比方banner、广告图等，倡议采纳background方式。由于不重要的主动往后排，幸免占用带宽，造成数据堵塞。
假如图片许多，这里又显现一个新的问题，不一样的阅读器支撑的并发加载数目是不一样的，（最新测试）IE是10个，FF是10个，图片多，就会显现严峻的延迟或者404，由于图片加载慢会影响到页面主要数据显现，那么让会员看到的都是空白，你好意思让他连续等下去吗！所以，假如不采纳lazyload还是采纳background比力好。
img标签长处是自闭和，可以幸免空标签显现（空标签也是w3c验证的内容之一）。采纳background方式就会显现空标签，bootstrap中的icon都是用i标签参加的，而i标签中是空内容，这样就发生了空标签（并不是说这样做不好，利弊等会聊）。
二、从SEO角度看
方才说了，img标签是自闭和的，不克不及增加文本内容，但是，img有一个alt属性，并且这个属性在w3c标准中，要求必需有，这样做的长处还是许多的。
第一，图片比力大，或者会员网速比力窝火的时候，加载失败了，至少还有文字提醒告诉会员这里是个什么内容的图片。假如会员非要看这个图，那就多刷几次去加载。别的，alt属性有益于辅助阅读，特别是对盲人伴侣，他们使用阅读器阅读页面，假如没有文本提醒，就太不厚道了。
第二，alt属性有益于SEO，搜索引擎实现很好的图像识别还是有一段路要走。
当然缺陷也是有滴：
第一，Img加载的图片是通过src拿到的，假如HTML代码不同意修改，那如何换图，只要同名文件更换，但是有大概碰到304状态，需要效劳器端做响应的设定。这时background的长处就出来了，换皮肤就是这个栗子。
第二，假如图片显示区域空间大小是预留的，那么图片必需和预留的空间一致，不然图片要末被拉伸要末被紧缩，都不是等比例操纵。当然，幸免这种问题就需要前端和视觉设计师遵照必然的标准。
三、语义化角度
background和语义化不沾边了，img是HTML标签，语义明白。
倡议：重要的需要优先加载的图片最好采纳img。不重要的图片最好采纳background。
做SEO是最利便的还是background，图片是放在背景上的，前景写内容，两不误。假如不想让内容显示出来，就加text-indent， -99999你懂的。（之前有这种弄法，是搜索引擎算法简单的年代，关键字比重高 排行就靠前）。
方才提了一下bootstrap的background办法，bootstrap的做法是用background设定icon，icon的使用太灵敏了，所以必需模块化，语义化先靠边站，鱼与熊掌不成兼得。PS：bootstrap v3之后采纳了icon font
其次icon的重要性真不高，放在最后加载还减少了带宽占用量，提高PV速度。
img标签语义很明白不克不及乱用，所以bootstrap采纳无语义的i标签来设定icon也挺好。PS：本人项目中使用无语义标签要留意可否向前兼容，要关注HTML5中的定义
以上就是html中图片显示方式-----img与background的不同的具体内容，更多请关注百分百源码网其它相关文章！
