WEB前端学习：图片处理base64编码格式

Web前端开发工程师是一个很新的职业，是从事Web前端开发工作的工程师。主要进行网站开发，优化，完善的工作。网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。

给你学习路线，html-css-js-ajax-jq-html5-css3-bootstrap-vue.js-node.js-react.jd

图片的处理是每个前端工程师都会面对的问题，你一般会如何处理图片呢？直接src引用,还是先压缩一下？今天来和大家介绍一种新的方式：base64

小编推荐一个学Web前端的学习裙【 五四七，三零二，三八三 】，无论你是大牛还是小白，是想转行还是想入行都可以来了解一起进步一起学习！裙内有开发工具，很多干货和技术资料分享！

Base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性。说白了就是用一段编码代替图片文件。举个例子，我们一般引入图片会这样写：

转换成base64后就可以这样表示：

小编推荐一个学Web前端的学习裙【 五四七，三零二，三八三 】，无论你是大牛还是小白，是想转行还是想入行都可以来了解一起进步一起学习！裙内有开发工具，很多干货和技术资料分享！

base64的编码很长，这里没有完全展示

那么base64的好处是什么呢？

1.减少了HTTP请求

2.某些文件可以避免跨域的问题

3.图片更新不要重新上传，不用清理缓存

但是不能只看到base64的优势，只有全面了解它的特性才能很好的运用。那base64有什么缺点呢？

base64 编码后的文本，大小比原文件大 1/3左右

HTML 文件会变大，会影响加载速度

base64 无法缓存，要缓存只能缓存包含 base64 的文件

小编推荐一个学Web前端的学习裙【 五四七，三零二，三八三 】，无论你是大牛还是小白，是想转行还是想入行都可以来了解一起进步一起学习！裙内有开发工具，很多干货和技术资料分享！

既然既有优点又有缺点，该如何取舍呢？

这个问题由一个解决的利器，webpack--url-loader可以根据文件的大小自动决定是否base64化，帮开发者省心。

关于base64的问题就和大家介绍到这里，欢迎大家给我留言~