浅谈base64图片在网站制作中使用的优缺点,值得收藏!


图片的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 更稳定可靠。