1、 是否占位

background-image是背景图片,是css的一个样式,不占位

<img />是一个块状元素,它是一个图片,是html的一个标签,占位

2、否可操作

background-image是只能看的,只能设置background-position, background-attachment,  background-repeat

<img />是一个document对象,它是可以操作的。比如更换img src的路径可以达到更换图片的目的,也可以移动它的位置,从document中移除等等操作。所以如果是装饰性的图片就使用background-img,如果和文体内容很相关就使用img。

3、 加载顺序不同

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

4、从解析机制看

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标签中是空内容,这样就产生了空标签(并不是说这样做不好,利弊等会聊)。

5、从SEO角度看

刚才说了,Img标签是自闭和的,不能添加文本内容,但是,Img有一个alt属性,而且这个属性在w3c标准中,要求必须有,这样做的优点还是很多的。

第一,图片比较大,或者用户网速比较窝火的时候,加载失败了,至少还有文字提示告诉用户这里是个什么内容的图片。如果用户非要看这个图,那就多刷几次去加载。另外,alt属性有利于辅助阅读,尤其是对盲人朋友,他们使用阅读器浏览页面,如果没有文本提示,就太不厚道了。

第二,alt属性有利于SEO,搜索引擎实现很好的图像识别还是有一段路要走。

当然缺点也是有滴:

第一,Img加载的图片是通过src拿到的,如果HTML代码不允许修改,那怎么换图,只有同名文件替换,但是有可能遇到304状态,需要服务器端做相应的设置。这时background的优点就出来了,换皮肤就是这个栗子。

第二,如果图片显示区域空间大小是预留的,那么图片必须和预留的空间一致,否则图片要么被拉伸要么被压缩,都不是等比例操作。当然,避免这种问题就需要前端和视觉设计师遵守一定的规范。

6、语义化角度

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中的定义。

<img>和background-img区别的更多相关文章

  1. ImageView的src和background的区别

    参考资料: http://blog.csdn.net/dalleny/article/details/14048375 http://www.android100.org/html/201508/27 ...

  2. 【android】ImageView的src和background的区别以及两者的妙用

    一.ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸 .src是图片内 ...

  3. android imageview使用的时候 引用资源src和background的区别

    android imageview使用的时候 引用资源时src和background的区别 src更强调内容并且不行拉伸图片进行适配,而background更注重引用图片,会对图片进行拉伸

  4. android:windowBackground 和 Android:background 的区别

    通过问别人,我知道了android:windowBackground 和 Android:background的区别 android:windowBackground 一般用于activity启动的时 ...

  5. Img与background的区别

    今天做项目中,用background显示了二维码和一些文字,但显示到页面上时,二维码和图片都变得模糊了.于是将图片调整.放大,但在放大后,作为背景图片的它则显示不全,无奈之下用了backgroung- ...

  6. ImageView中XML属性src和background的区别

    background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸. src是图片内容(前景),bg是背景,可以同时使用. 此外:scaleType只对sr ...

  7. 【Android 界面效果32】ImageView中XML属性src和background的区别

    background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸. src是图片内容(前景),bg是背景,可以同时使用. 此外:scaleType只对sr ...

  8. [android界面]android中src和background区别——前景与背景

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

  9. 解决android:background背景图片被拉伸问题

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

  10. 解决background图片拉伸问题

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

随机推荐

  1. 再见,Python2。你好,Python3

     文章首发自我的公众号,转载请注明出处~ ​ Python2的退场,意味着一个时代的结束 ​ 我们这一代程序员基本都接触过python2,很多人也是从python2时代一路走来的.但是,是时候说再见了 ...

  2. 使用ASP.NET Core 3.x 构建 RESTful API - 4.3 HTTP 方法的安全性和幂等性

    什么样的HTTP方法是安全的? 如果一个方法不会该表资源的表述,那么这个方法就被认为是安全的. 例如 HTTP GET 和 HTTP HEAD 就被认为是安全的,但需要注意的是,这并不意味着执行GET ...

  3. DM7的SQL批量插入for、while方法

    示例1,for用法: begin for i in 1...10000 loop insert into test values(i,i,'aaa',sysdate); if i mod 20 = 0 ...

  4. kubernetes-dashboard部署

    参考资料: kubernetes官方文档 官方GitHub 创建访问用户 解决chrome无法访问dashboard 官方部署方法如下: kubectl apply -f https://raw.gi ...

  5. springboot2 + grpc

    项目情况: springboot: 2.2.2 grpc-spring-boot-starter: 2.6.1.RELEASE 项目目录: mypro: - person  - grpc服务端 - l ...

  6. 微信小程序--百度地图坐标转换成腾讯地图坐标

    最近开发小程序时出现一个问题,后台程序坐标采用的时百度地图的坐标,因为小程序地图时采用的腾讯地图的坐标系,两种坐标有一定的误差,导致位置信息显示不正确.现在需要一个可以转换两种坐标的方法,经过查询发现 ...

  7. HttpServletRequest & HttpServletResponse

    Servlet配置方式 全路径匹配 以 / 开始 /aa/bb localhost:8080/项目名称/aa/bb 路径匹配 , 前半段匹配 以 / 开始 , 但是以 * 结束 /a/* /* *是一 ...

  8. 聊聊HTTP请求那一些事_HttpWebRequest_一篇就够了

    ​最近工作比较忙,很久没有写东西了,今天抽点时间整体一下最近工作的一个知识点小结.http请求对我们来说一点都不模式,程序员的我们有可能天天就是和这一些打交道.无论是BS架构的程序,前后端的数据交互, ...

  9. 并行网关 Parallel Gateway

    并行网关 Parallel Gateway 作者:Jesai 2018年3月25日 00:26:21 前言: 做工作流时间长后,慢慢的就会发现,很多客户会需要会签的功能,会签的情况也有很多种,实现的方 ...

  10. 每天玩转3分钟 MyBatis-Plus - 3. 高级查询(一)(条件构造器)

    每天玩转3分钟 MyBatis-Plus - 1. 配置环境 每天玩转3分钟 MyBatis-Plus - 2. 普通查询 每天玩转3分钟 MyBatis-Plus - 3. 高级查询 代码下载:ht ...