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标签形式展示的更多相关文章

  1. QT模态对话框用法(在UI文件中设置Widget背景图,这个图是一个带阴影边框的图片——酷)

    QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg ...

  2. js获取页面中图片的总数

    查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...

  3. 在css中设置图片的背景图,怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

  4. 解决Android中图片圆角——.9图

    目录:  一.问题概述 二..9图介绍 三..9图制作 1.开发工具 2.打开图片 3.制作图片 4.保存图片 一.问题概述 在html开发中,可以通过设置css的border-radius来设置圆角 ...

  5. 移动设备的HTML页面中图片实现滚动加载

    如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...

  6. 移动端(视口(meta),像素比,二倍图(图片,背景图,精灵图),css初始化(normalize.css),特殊样式,常见屏幕尺寸)

    1. 视口:(布局视口(layout viewport),视觉视口(visual viewport),理想视口(ideal viewport)) meta 视口标签 <meta  name = ...

  7. gtk中构件添加背景图

    在gtk中我们总想要去给构件添加背景图,具体函数代码如下 void chang_background(GtkWidget *widget, int w, int h, const gcha r *pa ...

  8. vue动态绑定图片和背景图

    1.动态绑定图片 <img class="binding-img" :src="require('../assets/images/test.png')" ...

  9. 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

    ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...

随机推荐

  1. office中把标题之后的空格去掉

    调整列表缩进--编号之后不特别标注可以把标题之后的空格去掉

  2. emberjs 循环中设置model的不同属性值

    //var grades = ['1', '2', '3', '4', '7', '8', '9']; ']; grades.forEach(function (item) { App.Templat ...

  3. servlet(一):从Sevlet到HttpServlet

    Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层. servlet ...

  4. Java中获取32位UUID

    public class createUUID { public static void main(String[] args) { String uuid = UUID.randomUUID().t ...

  5. 山东第四届省赛C题: A^X mod P

    http://acm.sdibt.edu.cn/JudgeOnline/problem.php?id=3232 Problem C:A^X mod P Time Limit: 5 Sec  Memor ...

  6. Leetcode 计划

    如何正确高效地使用LeetCode? LeetCode按照怎样的顺序来刷题比较好? LeetCode 题目总结/分类 Leetcode 简略题解 - 共567题 500. Keyboard Row [ ...

  7. github 上如何直接预览仓库中的html,搭建自己的主页

    前言:最近在写vue+element ui 的一些demo,就在github上建了个仓库来管理,但是希望能直接在github上就能预览效果,所以才有了这篇文章.转载请注明出处:https://www. ...

  8. vue+element ui 的时间控件选择 年月日时分

    前言:工作中用到 vue+element ui 的前端框架,需要选择年月日时分,但element ui官网demo有没有,所以记录一下.转载请注明出处:https://www.cnblogs.com/ ...

  9. Mysql最左匹配原则实践(原创)

    mysql最左匹配原则 什么叫最左匹配原则 最左匹配原则的误区 实战 结论: 1 条件查询中条件顺序没有关系 2 在最左匹配原则中,有如下说明: 最左前缀匹配原则,非常重要的原则,mysql会一直向右 ...

  10. 用python写桌面天气预报,自己的学习曲线。

    自从接触python,就被他优雅而简洁的代码所吸引. 举个例子: arr , , , , , , , , , , , , , ] ] 如果用其他语言来写的吗,不会这么简洁,美观.   python还有 ...