2019-07-16-前端之图片base64压缩工具

图片base64压缩工具

这两天调试一个前端Demo，找到一个图片base64压缩工具网站，记录一下，方便以后再用时查询。
https://c.runoob.com/front-end/59
概述
图片转BASE64编码工具提供了 PNG转换Base64，GIF转换Base64，JPEG转换Data64等各种图片的格式转换,你只需拖动图片到指定区域，即可完成操作！
Base64格式

data:[][;charset=][;base64],

Base64 在CSS中的使用

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }

Base64 在HTML中的使用

<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

图片base64好与坏

• 1
  弊端主要不在于 base64 编码后比原图要大，
  而是因为如果把大图片编码到 html / css 中，会造成后者体积明显增加，明显影响网页的打开速度。
  如果用外链图片的话，图片可以在页面渲染完成后继续加载，不会造成阻塞。
  如果 base64 是被编码到 css/js 中，是可以缓存的，因为 css/js 文件可以缓存。
  使用 base64 的另外一个弊端是 IE 的兼容性问题。IE 8 以下不支持 data url，IE 8 开始支持 data url，却有大小限制，32k（未测试）。
• 2
  我又要来安利 webpack 了：url-loader 可以自动根据文件大小决定要不要做成内联 base64 webpack/url-loader · GitHub
• 3
  使用base64一般会比原图要大一些，比较适合用于小图标，大一点的图片就免了…

参考链：

https://c.runoob.com/front-end/59
https://www.zhihu.com/question/31155574