精灵图 html为什么会变大,[html] 第128天 精灵图和base64如何选择呢？
可参考https://www.cnblogs.com/wangqi2019/p/10498627.html
Css Sprites(雪碧图或css精灵)，是网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
原理：
将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。
优点：
减少网页的http请求，提升网页加载速度。
合并多张小图片成大图，能减少字节总数(大图大小<=多张小图大小).
缺点：
前期需要处理图片将小图合并，多些许工程量。
对于需要经常改变的图片维护起来麻烦。
base64：
介绍：
base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，要求把每三个8Bit的字节转换为四个6Bit的字节，Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。
通俗点讲：将资源原本二进制形式转成以64个字符基本单位，所组成的一串字符串。
比如一张图片转成base64编码后就像这样，图片直接以base64形式嵌入文件中
生成base64编码：
图片生成base64可以用一些工具，如在线工具，但在项目中这样一个图片这样生成是挺繁琐。
特别说下，webpack中的url-loader可以完成这个工作，可以对限制大小的图片进行base64的转换，非常方便。
优点：
base64的图片会随着html或者css一起下载到浏览器,减少了请求.
可避免跨域问题
缺点：
老东西(低版本)的IE浏览器不兼容。
体积会比原来的图片大一点。
css中过多使用base64图片会使得css过大，不利于css的加载。
适用场景：
应用于小的图片几k的，太大的图片会转换后的大小太大，得不偿失。
用于一些css sprites不利处理的小图片，如一些可以通过background-repeat平铺来做成背景的图片
按我来说还是雪碧图见得比较多，如王者荣耀官网英雄联盟官网
相关文章：
组策略 从入门到精通（十）通过组策略进行软件分发和卸载
其实在前面windows server 2008的一些博文中，已经介绍了如何通过组策略进行软件的分发，在windows server 2003中有些无法完成的软件分发工作在windows server 2008中已经全部纠正了。http://zhengweiit.blog.51cto.com/1109863/291156 今天我们主要来探讨…
RedHatAS4.0-RAID技术
RedHatAS4.0-RAID技术
今晚8点直播 | 详解基于百度自定义模板的OCR结果结构化处理技术
随着行业的发展和技术的成熟，文字识别（OCR）目前已经应用到了多个行业中，比如物流行业快递包裹的分拣，金融行业的支票单据识别输入，交通领域中的车牌识别，以及日常生活中的卡证、票据识别等等。O…
电脑计算机科学型,电脑里附带的计算器有标准型和科学型二种，它 – 手机爱问...
2019-06-24如何用delphi7 0设计标准型计算器这是源代码：unit Unit1;interfaceuses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, Buttons, StdCtrls, ExtCtrls;type TForm1 class(TForm) Panel1: TPanel; Panel…
铜缆配线架的选择
我们现在考察一下为安装选择合适的铜缆配线架所必须考虑的因素。铜缆配线架一般分为经济型、中端或高端配线架。经济型配线架经济型配线架通常在结构上脆弱，性能不稳定交缺少技术支持或保证。配线架端接时一般会耗费较多的安装成本，没有电缆管理设备支持…
go6---slice切片
package main/* 切片Slice 其本身并不是数组，它指向底层的数组 作为变长数组的替代方案，可以关联底层数组的局部或全部 为引用类型 可以直接创建或从底层数组获取生成 使用len()获取元素个数，cap()获取容量 一般使用make()创建 如果多个slice…
TensorFlow支持Unicode，中文NLP终于省心了
整理 | 非主流出品 | AI科技大本营终于，TensorFlow 增加了对 Unicode 的支持。什么是 Unicode？Unicode 是计算机科学领域里的一项业界标准，包括字符集、编码方案等。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种…
C#:String.Format数字格式化输出
C#:String.Format数字格式化输出 inta 12345678; //格式为sring输出//Label1.Text string.Format("asdfadsf{0}adsfasdf",a);//Label2.Text "asdfadsf"a.ToString()"adsfasdf";//Label1.Text string.Format("asdfadsf{0:C}adsfasdf&…
OpenStack如何实现高可用集群介绍
OpenStack是目前基于开源的，一个非常流行的云管理平台项目。这个项目由几个主要的组件组合起来完成一些具体的工作。因此它的集群比较复杂，也有多种选择方式。OpenStack 作为一个类似于 Amazon EC2 和 S3 的云基础架构服务(Infrastructure as a Service,…
accp8.0html作业,Accp8.0HTML标签
第一章1、HTML超文本标记语言2、网页3、网页头部4、网页标题5、网页主体6、DOCTYPE声明3种级别：(1)Strict 严格类型(2)Transitional过渡类型(3)Frameset框架类型7、网页摘要标签8、字符编码：gb2312简体中文ISO-885901纯英文big5繁体UTF-8国际通用编码9、…
向iOS越狱彻底说再见！
老牌第三方软件商店 Cydia 关闭在即，iPhone 越狱时代又见落日归途？作者 | 仲培艺出品 | CSDNCydia 线上商店是针对完成越狱的 iOS 设备的一种破解软件，在越狱过程中被装入到系统，为 iOS 设备提供第三方 App 的服务平台，…
ArrayList的subList方法
李说： ArrayList的subList方法获取到的是ArrayList的一段list，只是其中的一段视图。所以修改subList ,ArrayList同时会修改，因为本来就是同一个东西。 jdk文档中是这样说的： List<E> subList(int fromIndex, int toIndex) …
男孩子学计算机和学医哪个好,你认为学医好还是读211大学的电子信息好？
学医的好处。社会的地位和社会认可度较高。无可否认无论是在过去还是在将来，医生因为其救死扶伤的职业特点而被广泛大众所接受和认可。较高的社会地位会让你在将来的择偶、人际关系处理方面显得更有吸引力和话语权。工作稳定有保障。这点其实还是看题主的水平和实力…
Error Creating Control when creating a custom control
如果你在创建ASP.NET的Server Control 是遇到报错： "Error Creating Control" when creating a custom control 原因是 ToolboxData 元数据中的控件名称和控件的类(class)名不同，改为相同即可解决问题。转载于:https://www.cnblogs.com/DotNet…
精选180+Python开源项目，随你选！做项目何愁没代码
编辑 | Jane出品 | Python大本营每一位程序员，每天大部分时间都是在和代码打交道。但是对于广大的普通用户来说，最重要的不是代码，而是代码最终生成的应用程序。但是，每个项目都从头开始自己一行一行码代码，是非常不现…
八年级计算机网络公开课,计算机网络公开课教案.doc
计算机网络公开课教案公开课教案科目：计算机网络课题: 交换机配置文件备份与恢复知识目标:1、在本次课中要向学生传授交换机上传、下载服务器的安装和配置；2．学生学习交换机上传配置命令，完成交换机Flash内存中保存的配置文件上传…
Centos6.5升级系统自带gcc4.4.7到gcc4.8.0
下载 wget http://ftp.gnu.org/gnu/gcc/gcc-4.8.0/gcc-4.8.0.tar.bz2 解压 tar -xjvf gcc-4.8.0.tar.bz2 进入 cd gcc-4.8.0 下载所需软件（ ftp://gcc.gnu.org/pub/gcc/infrastructure/mpfr-2.4.2.tar.bz2 ftp://gcc.gnu.org/pub/gcc/infrastructure/gmp-4.3.2.tar.…
photofunia
存个链接用~~~[url]http://www.photofunia.com/[/url]转载于:https://blog.51cto.com/wangyublues/120301
学计算机应用好还是汽车维修好,大学汽车运用与维修专业怎么样_学什么_前景好吗-520吉他网...
时间：2019-06-23 来源：网络资源 汽车运用与维修专业怎么样_学什么_前景好吗2019高考填报志愿时，汽车运用与维修专业怎么样、学什么、前景好吗等是广大考生和家长朋友们十分关心的问题。以下是大学生必备网整理的汽车运用与维修专业介绍、…
20T数据、百万奖金，同济和武大摘得开放数据创新应用大赛桂冠！
整理 | Jane出品 | AI科技大本营中国华录杯城市开放数据创新应用大赛，18 日在天津迎来了收官的决赛之战。本次大赛由中国华录集团有限公司和天津市津南区人民政府共同举办。利用天津市人民政府、企业开放的数据资源，吸引了众多国内高校科研团队和科技企业…
rrdtool报错
参考文档： http://serverfault.com/questions/662161/rrdtool-illegal-attempt-to-updatehttps://emacstragic.net/collectd-causing-rrd-illegal-attempt-to-update-using-time-errors/https://support.nagios.com/forum/viewtopic.php?f7&t26087 报错信息&am…
Grid R-CNN解读：商汤最新目标检测算法，定位精度超越Faster R-CNN
作者 | 周强来源 | 我爱计算机视觉Grid R-CNN是商汤科技最新发表于arXiv的一篇目标检测的论文，对Faster R-CNN架构的目标坐标回归部分进行了替换，取得了更加精确的定位精度，是最近非常值得一读的论文。今天就跟大家一起来细品此文妙处。一、作…
河南信息工程学校计算机协会申请书,协会成立申请书范文15篇.docx
协会成立申请书范文15篇协会成立申请书(一)： 尊敬的系团委领导： 摄影作为一门艺术不仅仅能够丰富同学们的学习生活，同时对学院的建设也起到一个不可黙灭的作用。为了发挥自身优势，参加学校社团文化建设，培养同学…
Luna的大学读书史(1,Intro)
Luna看了看自己的屋子，乱乱的一大摊，地上有的地方的灰都已经是厚厚的一层，有的角落甚至还结了蜘蛛网。床上的被子和衣服搅在一起，书桌上散乱的摆着几根笔和一个大号笔记本，草稿纸上画了若干莫名其妙的符号，…
【BIEE】数据透视表格第一列添加序号
现在有这么一个需求，需要在数据透视图的表格前面条件一列序号，作为行号，如下图：那么实现这个如何实现呢？只需要在BIEE分析编辑界面，新建一列，然后公式定义为：RCOUNT(RSUM(1)) &#…
2018最后一个月的Python热文Top10！赶紧学起来~
作者 | Mybridge译者 | linstancy整理 | Jane出品 | AI科技大本营过去一个月里，我们对近 1000 篇 Python 文章进行了排名，并挑选出热度前10的文章。这份清单的内容涵盖了包括 master python、REST APIs、twitter bot、random module、贝叶斯模型和线性回…
一处机房建设的败笔
第二个是关于空调的。是另一个机房，机房大概的布局如下图。左边空地是为日后扩展所留空间。右边有一排机柜，箭头所指为机柜前端方向。空调是一台艾默生的精密空调，被安装在机房的角落处。看出来什么问题吗？如果是你，你…
计算机组成原理实验pc,计算机组成原理实验报告5- PC实验
计算机组成原理实验报告5- PC实验2.5 PC实验姓名：孙坚 学号：134173733 班级：13计算机 日期：2015.5.15一．实验要求：利用CPTH 实验仪上的K16..K23 开关做为DBUS 的数据，其它开关做为控制信号&…
Python-socket编程
一.socket编程 Socket 是网络编程的一个抽象概念。通常我们用一个 Socket 表示“打开了一个网络链接”,而打开一个 Socket 需要知道目标计算机的 IP地址和端口号,再指定协议类型即可。 二.Python的socket编程实例 1.客户端操作 import socket s socket.socket()s.bind((, ))s.…
异步备份和还原数据库：.NET发现之旅（六）
信息系统是数据密集型的，数据的套帐，备份，还原是客户最希望有的功能，这一节课就讨论下C/S系统下数据库的异步备份和还原，B/S系统的数据备份和还原和这个类似。 既然是异步，首先会想到使用多线程技术。.NET平…