1.使用<img/>有一个好处是,用户可以很方便的右键保存或者复制图片的链接
2.图片作为背景,在图片没有加载的时候或者加载失败的时候,不会有个图片的占位标记,不会出现红叉
PS：一般图片下载站会希望访客、用户去下载站内的图片，一般的企业或者站长其实并不希望同行或者竞争对手下载并盗用网站上的图片。第二点出现红叉应该是古老的IE浏览器才会出现，而且随着宽带网速的提升，这种情况并不多见。
3.在网页加载的过程中,以css背景图存在的图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而HTML中的<img>标签是网页结构的一部分会在加载结构过程中加载,换句话说,网页会先加载img标签的内容,再加载背景图片,如果你用img引入了一个很大的图片,那么再这个图片下载完成前,img之后的内容都不会显示,而用css来引用同样的图片,网页结构内容加载之后,才开始加载背景图片,不会影响你浏览网页内容,这是比较大的区别之一
4.如果是装饰性的图片就写在css里面,如果是内容性的图片就写再html里面,打个比方,你要做一个漂亮边框相册,那么修饰边框图片就写在css里面,相框里面的内容照片就写在htmll里面
如下场景使用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。
网友评论