当前位置：首页 > 新闻资讯>>网站制作中如何使用Base64图片以及其优缺点

网站制作中如何使用Base64图片以及其优缺点

作者：郑州网站建设发布时间：2023-09-03 16:08:32查看次数：来源：网络文章数：

什么是Base64图片编码?
Base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性。

网站制作中如何使用Base64图片以及其优缺点(图1)

Base64编码图片使用方法：
background-image:url(data:image/gif;base64,R0lGODfsdfDsvrBwdsfABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);
或者直接在img中调用
<img src="data:image/gif;base64,R0lGODfsdfDsvrBwdsfABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==">

Base64 Encode 1x1px透明GIF图片
这种图片的特征就是体积最小化，最大限度的减少带宽。而且是透明的，具有隐身作用。用到的场景很多，比如测试浏览器是否支持data URI技术，或用来做一个透明的浮动层，或在lazy load图片时用它来做占位符。

透明图片:Base64 Encode 1x1px透明GIF图片
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

黑色图片:Base64 Encode 1x1px小黑点图片
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">

使用Base64编码URL的优缺点

base64:URL传输图片文件的好处：

1.减少了HTTP网络请求次数

网页上的图片资源如果采用http形式的url的话都会额外发送一次请求，网页发送的http请求次数越多，会造成页面加载速度越慢。而采用Base64格式的编码，将图片转化为字符串后，图片文件会随着html元素一并加载，这样就可以减少http请求的次数，对于网页优化是一种比较好的手段。

2.采用Base64编码的图片是随着页面一起加载的，不会造成跨域请求的问题。

3.没有图片更新要重新上传，不会造成清理图片缓存的问题

Base64编码URL的不足在于：

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

2.增加了CSS文件的尺寸
一个只有几KB的图片转化为Base64格式编码，生成的字符串往往会大于几KB，如果将其写在一个css文件中，这样一个css文件的大小会剧增，造成代码可读性差不说，还会造成请求传输的数据量递增。

3.造成网页编辑工具卡顿
由于CSS文件中包含大量的Base64图片格式的代码，会造成网页编辑软件如：DW在制作企业网站的时候非常卡顿，严重影响开发效率。

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