优点：

1、减少http请求次数
2、采用base64的图片随着页面一起下载，因此不会存在跨域请求的问题
3、没有图片更新要上传图片，因此不会造成清理图片缓存的问题

缺点：

1、增加css文件的大小,比http请求大30%左右
2、浏览器兼容性,支持ie10及以上
3、解析css的时间增长

什么时候用base64呢？

如果图片足够小且因为用处的特殊性无法被制作成雪碧图（CssSprites），在整个网站的复用性很高且基本不会被更新。

可以通过控制图片的大小来定义是否是大图片或小图片，如：超过 10MB 为大图片，没超过则为小图片，这个时候可以通过 limit 来控制了。
实际项目开发中，在webpack中配置，如下：

webpack相关配置，请跳转至大神的webpack中的loader详解

CssSprites与base64编码

使用CssSprites合并为一张大图：

页面具有多种风格，需要换肤功能，可使用CssSprites
网站已经趋于完美，不会再三天两头的改动（例如button大小、颜色等）
使用时无需重复图形内容
没有 base64 编码成本，降低图片更新的维护难度。（但注意 Sprites 同时修改 css 和图片某些时候可能造成负担）
不会增加 CSS 文件体积

使用base64直接把图片编码成字符串写入CSS文件：

无额外请求
对于极小或者极简单图片
可像单独图片一样使用，比如背景图片重复使用等
没有跨域问题，无需考虑缓存、文件头或者cookies问题

base64图片的优缺点（雪碧图）相关推荐

CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式. 又被解释为: CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图图片合成技术 CSS Spri ...
浏览器常用的图片优化雪碧图/实体字符/svg
雪碧图唯一的优点是减少请求数,HTTP/1.1下浏览器同时加载资源的数量是一定的,IE6个,chrome 6个,firefox 8个,而HTTP2 下是没有数量限制的雪碧图的制作方法:node 的一 ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
手把手教你webpack3（15）插件之雪碧图插件（WEBPACK-SPRITESMITH配置简述）
WEBPACK-SPRITESMITH配置简述前注: 文档全文请查看根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. DEMO ...
Webpack3之雪碧图插件（WEBPACK-SPRITESMITH配置简述）
WEBPACK-SPRITESMITH配置简述前注: 文档全文请查看根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. DEMO ...
CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
webpack原理篇（六十二）：实战开发一个自动合成雪碧图的loader
说明玩转 webpack 学习笔记支持的语法对样式里面图片引用后面加 __sprite 进行图片合并如何将两张图片合成一张图片? 使用 spritesmith https://github.c ...
JAVA自动生成雪碧图sprites和样式CSS文件（包含原始图标CSS、雪碧图CSS）
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
iconfont与雪碧图的优缺点
iconfont(图标字体) 可以缩放的矢量图标.你可以使用CSS对它们进行修改:大小,颜色,阴影等.体积特别的小.可能几百个图标才几十KB. 优点: 高清保真,因为是SVG图形灵活性,可以设置大小 ...

base64图片的优缺点（雪碧图）

优点：

缺点：

什么时候用base64呢？

CssSprites与base64编码

base64图片的优缺点（雪碧图）相关推荐

最新文章

热门文章