html中图片显示方式—–img与background的区别

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年10月3日23:29:01 评论 7 views 1551字阅读5分10秒

本章给大家介绍
html中图片显示方式-----img与background的区别,让大家可以了解在html中让图片显示的两种方法的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、从解析机制看

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的区别的详细内容,更多请html教程其它相关文章!

继续阅读
css的一些小技巧!页面视觉差!_html/css_WEB-ITnose html教程

css的一些小技巧!页面视觉差!_html/css_WEB-ITnose

相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎。 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括。这导致了一个很好的光学效应,使参观者的注意。 在网页设计中,为了实现这...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: