Web前端   发布时间:2019-10-13  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了页面中图片以背景图形式展示好还是以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标签。

大佬总结

以上是大佬教程为你收集整理的页面中图片以背景图形式展示好还是以img标签形式展示全部内容,希望文章能够帮你解决页面中图片以背景图形式展示好还是以img标签形式展示所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: