请教 data:image 问题，固定宽高纯透明图像，为什么 length 差两三倍？

[NickyHaris]

我需要一些固定宽高的透明图像，在 chrome 的 console 中运行 js 代码生成，核心代码如下：

```js
const canvas_tmp = document.createElement("canvas");
canvas_tmp.width = width;
canvas_tmp.height = height;
const base64 = canvas_tmp.toDataURL();
console.log(base64);
```

生成的 base64 长度大约 400：
```
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPkAAAAgCAYAAADQft53AAAAAXNSR0IArs4c6QAAANpJREFUeF7t0wERAAAIAjHpX9oef7MBQ3aOAIG0wNLphCNA4IzcExCICxh5vGDxCBi5HyAQFzDyeMHiETByP0AgLmDk8YLFI2DkfoBAXMDI4wWLR8DI/QCBuICRxwsWj4CR+wECcQEjjxcsHgEj9wME4gJGHi9YPAJG7gcIxAWMPF6weASM3A8QiAsYebxg8QgYuR8gEBcw8njB4hEwcj9AIC5g5PGCxSNg5H6AQFzAyOMFi0fAyP0AgbiAkccLFo+AkfsBAnEBI48XLB4BI/cDBOICRh4vWDwCD4VoACGTmyVVAAAAAElFTkSuQmCC
```

可是在一个在线 sprites 工具[Responsive CSS Sprite Generator]( https://responsive-css.spritegen.com/)生成的长度只有 170 左右：

```
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAikAAABLAQMAAACP/oUlAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABxJREFUeNrtwQENAAAAwqD3T20ON6AAAAAAAA4MFM0AAWaWeL4AAAAASUVORK5CYII=
```

都是纯透明的占位图像，没其余元素，怎么会差这么多？怎么生成这种体积小的？

[NickyHaris]

保存下来两张图像比较了下，大致明白了，canvas 生成的图像默认是 32bit ，在线工具生成的是 1bit 。