feling.net/rank/base64-15.md

title	layout	keywords	date	source	description
浅谈base64图片在网站制作中使用的优缺点，值得收藏！	pages	base64图片 base64编码解码	2020-09-25	艾乎网

图片的Base64编码是一种图片处理格式，通过特定的算法可以将一副图片数据编码成一串字符串，使用该字符串代替图像的url属性，图片随着 HTML 的下载同时下载到本地，不再单独消耗一个http来请求图片。

CssSprites也是为了减少http请求，将多张图片放到一起，我们为什么要选择使用 base64传输图片文件呢？两者之间有什么异同，又该如何取舍呢？cssprites技术就是将多个图片合成一个大的图片，将多次图片请求合成一张大图的请求，以此来达到减少http请求的次数。使用cssprites合成一张大图的优缺点是：1.页面具有多种风格，需要换肤功能，可使用CssSprites；2.网站已经完善，图片不需要随意改动；3.使用时无需重复图形的内容；4.没有base64编码成本，降低图片更新的维护难度；5.不会增加css文件体积

使用base64直接把图片编码成字符串写入css文件的优点是：1.无额外请求；2.对于极小或者及简单图片，可像独立图片一样使用，比如背景图片重复使用等；3.采用Base64编码的图片是随着页面一起加载的，不会造成跨域请求的问题；4.无需考虑缓存，文件头或者cookies问题。但是其缺点也很明显，在使用上存在劣势的地方：

1.浏览器的兼容性太小

使用base64编码解码的图片作为背景图片的这种技术IE6/IE7浏览器是不支持的（IE9浏览器IE7模式下支持）。兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。

2.增大了CSS文件的体积

使用base64编码是减少了http请求，但是增加了css文件的体积，css文件体积增大意味着生成的字符串往往会大于几KB，会造成css文件的大小剧增，代码可读性差不说，还会造成CRP的阻塞。

3.数据库数据量大幅增长

如果我们将Base64编码的图片存入数据库中，会造成数据库数据量的大幅增长，这样还不如将图片存至图片服务器，而只在数据库中存入url字段。

漳州开发区聆熵信息技术服务工作室不以盈利为目的，我们最初的感受是 “有人在用我写的应用，感觉什么都值了” ，未来我们也会守住这颗初心，让用户觉得 feling.net 更稳定可靠。