精灵图和base64如何选择
Css Sprites：
介绍：
Css Sprites（雪碧图或css精灵），是网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
原理：
将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。
优点：
- 减少网页的http请求，提升网页加载速度。
- 合并多张小图片成大图，能减少字节总数（大图大小<=多张小图大小）.
缺点：
- 前期需要处理图片将小图合并，多些许工程量。
- 对于需要经常改变的图片维护起来麻烦。
应用例子：
- 生成雪碧图：我这里使用了网页雪碧图制作专家，当然还有很多其他的工具
- 合成的图片如图所示：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css Sprites</title>
</head>
<body>
<ul class="container">
<li class="icon icon-issue"></li>
<li class="icon icon-upload"></li>
<li class="icon icon-passage"></li>
</ul>
</body>
</html>css代码：
.container {
overflow: hidden;
width: 50px;
height: 200px;
background-color: #faa755;
}
.icon {
margin: 0 auto;
margin-top: 20px;
width: 40px;
height: 30px;
background-image: url(icon.png);
list-style-type: none;
}
.icon-issue {
background-position: 0 0;
}
.icon-upload {
background-position: 0 -50px;
}
.icon-passage {
background-position: 0 -100px;
}- 效果图：
适用场景：
- 对于一些不需要多变动的小图片，表情，标志等等都可以使用。
- 一般都是应用于小图片，太大的图片不利于合并，且定位麻烦，一次的加载时间长，导致全部图片出现时间延迟，效果不友好。
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平铺来做成背景的图片
精灵图和base64如何选择的更多相关文章
- CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图
规避脱标 定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...
- 第9天：CSS精灵图
今天重点学习了CSS精灵图. "CSS精灵",英语css sprite,所以也叫做"CSS雪碧"技术.是一种CSS图像合并技术,该方法是将小图标和背景图像合并到 ...
- web前端sprite，精灵图，雪碧图
css sprite 俗称:精灵图,雪碧图,指将整个页面不同的图片or图标合并在一张图上:优点:使用CSS Sprite 可以减少网络请求,提高网页加载性能,不会出现网页上端加载完毕下面还在加载中这一 ...
- 如何创建 mapbox 精灵图
前面文章介绍了如何在本地发布OSM数据,并使用 maputnik 自定义 mapbox 格式的地图样式. 在使用 maputnik 配图时,如果想要使用自己的图片作为地图符号,就需要制作精灵图. ma ...
- Uint 7.文本和字体属性,background,精灵图和3种定位
一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...
- H5 40-CSS精灵图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Css - 精灵图
Css - 精灵图css sprite 一个页面文档上总是会有N多的图标小图片,它们都是以背景图的方式嵌入文档,每个小图片需要一个url的css属性,每个url都指向一个服务器地址的链接,每个链接都代 ...
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- CSS Spritec下载,精灵图，雪碧图，初探之原理、使用
CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...
随机推荐
- 基于linux(CentOS7)数据库性能优化（Postgresql）
基于CentOS7数据库性能优化(Postgresql) 1. 磁盘 a) Barriers IO i. 通过查看linux是否加载libata,确定是否开 ...
- Linux-day-1
1. ls 作用:列出文件信息,默认为当前目录下 常用选项: -a: 列出所有的文件,包括所有以.开头的隐藏文件 -d: 列出目录本身,并不包含目录中的文件 ...
- win10文件夹共享
1.开启server服务就可以使用net share 命令 2.查看目前已共享的文件夹 3.关闭默认共享 只有用administrator(且有密码)才能连上win10上的默认共享了,只有admini ...
- aidl 详解
aidl 是 android interface define language 的缩写,主要是作为进程间通讯的一个接口规范,这种通讯是一种普通的 client-server 的模式,对于 clien ...
- element隐藏组件滚动条scrollbar使用
可使用 组件 <el-scrollbar></el-scrollbar> 设置 组件的样式 为 高度100% <el-scrollbar style="heig ...
- 点击链接跳转到QQ的情况; qq交谈
https://blog.csdn.net/qq_31856835/article/details/70225968 https://blog.csdn.net/qq_37815596/article ...
- React Native 中 跨页面间通信解决方案之 react-native-event-bus
https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...
- formdata方式上传文件，支持大文件分割上传
1.upload.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <h ...
- 爬虫小例1：ajax形式的网页数据的抓取
---恢复内容开始--- 下面记录如何抓取ajax形式加载的网页数据: 目标:获取“https://movie.douban.com/typerank?type_name=%E5%89%A7%E6%8 ...
- Java如何进行Base64的编码(Encode)与解码(Decode)
关于base64编码Encode和Decode编码的几种方式 Base64是一种能将任意Binary资料用64种字元组合成字串的方法,而这个Binary资料和字串资料彼此之间是可以互相转换的,十分方便 ...