什么是图片Base64编码
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。
这样的意义是:
网页上的每一个图片,都要消耗一个http请求下载而来(所以CSS雪碧图技术应运而生),而将图片编码成为base64格式可以随着html下载的同时下载到本地,从而节省了一次http请求
写法
#fkbx-spch, #fkbx-hspch {
background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">
上面分别是图片的 base64 编码在 css 里面的写法和在 img 标签里的写法。
何时使用Base64编码
首先是上面提到的,可以节省一次http请求
同样,CssSprites 也可以减少http请求,对于二者的取舍要点在于:
如果图片足够小且因为用处的特殊性无法被制作成雪碧图(CssSprites),在整个网站的复用性很高且基本不会被更新。
如果较大的图片转换为Base64编码之后,生成的字符串编码大小一般而言都会比原文件稍大一些,而且会对CSS整体的可读性产生很大的影响
将图片转化为Base64编码
在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码
Base64的缺点
1、使用 Base64 不代表性能优化
使用 Base64 的好处是能够减少一个图片的 HTTP 请求,然而,与之同时付出的代价则是 CSS 文件体积的增大。
而 CSS 文件体积的增大意味着什么呢?意味着 CRP 的阻塞。
通俗而言,就是图片不会导致关键渲染路径的阻塞,而转化为 Base64 的图片大大增加了 CSS 文件的体积,CSS 文件的体积直接影响渲染,导致用户会长时间注视空白屏幕。HTML 和 CSS 阻塞渲染,而图片不会。
2、页面解析CSS时间增长
如果把大图片编码到 html / css 中,会造成后者体积明显增加,明显影响网页的打开速度。
3、兼容性问题
使用 base64 的另外一个弊端是 IE 的兼容性问题。IE 8 以下不支持 data url,IE 8 开始支持 data url,却有大小限制,32k(未测试)。
4、编辑问题
还有一个问题是,如果构建工具比较落后(或者没有构建工具),手动插入 base64 是很蛋疼的,编辑器会卡到哭。
webpack
webpack的url-loader插件可以自动根据文件大小决定要不要做成内联 base64
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}
exam项目中的配置:
const path = require('path');
module.exports = {
target: 'web',
appEntries: {
examIndex: './app/entries/ExamIndex',
markIndex: './app/entries/MarkIndex'
},
urlLoader: {
test: /\.(jpg|png|gif|svg)(\?.+)?$/,
loader: 'url-loader?limit=8192&name=[name]-[hash:8].[ext]'
},
fileLoader: {
test: /\.(ttf|otf|eot|woff2?)(\?.+)?$/,
loader: 'file-loader?name=[name]-[hash:8].[ext]'
}
};
加载之后,网页中小8kb的图片都被转为了base64编码格式存在: