您好,欢迎您来到UED用户体验网!
您当前位置:UED用户体验网首页 >> 前端开发 >> 将图片转换成base64编码

将图片转换成base64编码

2014-01-18 15:05:23 来源:河北用户体验社区-HBued.com 浏览:2145

查看淘宝的源码,经常会看到有其图片有如下的写法:

1 #demo{background:{url(data:image/gif;base64,xxxxxxxxxx)}

这算是一种图片路径的新写法。将图片进行编码,然后存在文档中。
data: —-获取数据类型名称
image/gif; —–指数据类型名称
base64 —–指编码模式
xxxxxxxxxx ——指编码以后的结果

background-image:url(data:image/gif;base64,xxxxxxxxxx)这句话的意思总体就是“获取数据类型是image gif文件,编码采用ASCII 字符,ASCII编码内容是‘xxxxxxxxxx’”

以往的图片路径写法是:background-img:url(../image/xxx.gif)图片需要加载服务器指定路径下的对应gif文件。
而新写法就是:
background-image: url(data:image/gif;base64,AAAA)
图片本身就已经以ASCII的形式存在了文档中,只需要浏览器进行编译就可以了。

新写法将图片写入文档中,可以减少客户端对服务器的请求。换句话讲,原来我们要加载图片,是从服务器下载。
现在浏览器直接把那一串ASCII按照你的文件类型进行编译就可以出来结果了。

另外其实这样使用也是可以的:

1 <img src="data:image/gif;base64,xxxxxxxxxx"/>

传送门:图片转换为base64编码工具 BaseImageConver

转载<< 将图片转换成base64编码 >>请注明来源于互联网最具影响力的UED发言平台!用户体验网 - Hbued.com

关注HBUED创始人微信号:只需用手机微信扫一扫!

我们提供最全的互联网招聘信息、高端人脉信息、用户体验分析研究、互联网产品定位、网站运营推广等信息,关注HBUED掌门人的微信,可以直接与其沟通交流!

互联网人脉库入驻

优先被名企高薪发现你信息

我是高端互联网人士要入驻

名企高薪招聘发布

帮企业第一时间免费找人脉

我是互联网企业要发布招聘

爆料本地互联网事

每天爆料最新的身边互联网

我有最新互联网新闻要爆料

最新企业项目宣传

帮你针对互联网精准宣传

我要宣传我的最新创业项目




© 2008-2016 Hbued.com 版权所有 著作权与商标声明 | 关于我们 | 我要投稿 | 关于创始人 | 商务合作 | QQ群:66206675 | 谢绝IE6.0浏览器

UED用户体验网 | 互联网+ | 用户体验 | 互联网资讯 | 网站运营 | 移动互联网 | 电子商务 | 创业访谈 | 互联网大佬 | 互联网人脉库 | 产品经理 | 产品设计 | 交互设计 | 视觉设计 | 前端开发 | 互联网招聘 | 热门话题