9个在线图片 base64 编码转换工具
将图片进行 base64 编码转换是将图片的二进制流转成 ACSII 的字符串形式,便于直接写在 HTML 源码中,将原始二进制流转成字符串通常会增加代码量,通常相比原原始图片会增加 10% ~ 30% 的大小,所以通常用于网站的 logo,图标等较小的图片,好处是可以避免 HTTP 网络的传输,提高加载速度。使用时要做好权衡,而且有些浏览器对图片 base64 长度有限制,比如 Opera9~11 限制为 64K,IE8 限制为 32KB。
Base64 是一种编码算法,选定64个字符作为最终编码结果的字符组合,转成的格式类似于“iVBORw0KGgoAAAANSUhEUgA...”的形式,一个长长的字符串。用于 HTML 页面显示时通常还要转成 URI(也被俗称为 data url) 的形式,其格式如 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...
,在 HTML 中可以立即渲染。
在 CSS中使用一般用法为 background-image: url("data:image/png;base64,VBORw0KGgoAAAANS...");
在 HTML 标签中使用一般为 <img src="data:image/png;base64,VBORw0KGgoAAAANS..." />
图片在线转 base64编码转换工具由于比较简单,相应的在线工具非常多,可谓百花齐放,这里介绍几个体验较好的。
No.1 BASE64 IMG
这个在线转换工具操作起来也比较友好,也没有广告,也没有太多废话。支持拖拽上传,页面看起来页非常舒服。也支持图片压缩(需要手动开启),支持 CSS、HTML 代码提示,可以显示原图尺寸和图片大小,还支持批量操作,可以批量拖拽20张图片同时进行转换,单个文件最大 1mb。
![BASE64 IMG - ivtool.com](http://cdns.ivtool.com/TAIP_www.base64-image.de_0.png-w700q100)
![BASE64 IMG - ivtool.com](http://cdns.ivtool.com/TAIP_www.base64-image.de_1.png-w700q100)
No.2 onlinepngtools's png to base64 converter
无广告,操作体验非常好,支持原图预览,支持土拖拽上传,支持生成 base64 图片格式的 url,但需要自己勾选,否则只是显示 base64 编码后的原文, 还支持从 base64 还原称图片。虽然名头上写是 "png" 但实际上也支持 jpg 等主流格式的图片,还有直接将源码复制到建剪切板的功能,总之体验非常好,非常任性,唯一的不足就是语言是英文。
![onlinepngtools's png to base64 converter - ivtool.com](http://cdns.ivtool.com/TAIP_onlinepngtools.com_0.png-w700q100)
No.3 www.askapache.com's Base64 Image Encoder
这个在线图片 base64 编码转换工具的最大的特点是原图最大支持 24M,比较惊人,也支持图片的在线压缩。同时也支持生成 html,css 代码样例,其生成的 html img 标签还能自动填上原图的高度和宽度,这一点也比较人性。
![www.askapache.com's Base64 Image Encoder - ivtool.com](static/img/placeholder.png)
No.4 chinaz 站长工具
chinaz 提供的在线图片转换工具,是个国产工具,功能比较少,但访问速度快。支持 base64 字符串的还原成图片,无代码提示。
![chinaz 站长工具 - ivtool.com](static/img/placeholder.png)
No.5 Codebeautify.org's Convert Your Image to Base64 Tools
一个非常简单的图片转 base64 的在线编码工具,虽然是英文网站但操作及其简单,一看即明,切有 html 代码和 css 代码提示案例,比较人性。
![Codebeautify.org's Convert Your Image to Base64 Tools - ivtool.com](static/img/placeholder.png)
No.6 oschina 开源中国
oschina 提供的一个简单工具,非常简单,直接转成 HTML image 标签代码。
![oschina 开源中国 - ivtool.com](static/img/placeholder.png)
No.7 多视通
多视通导航提供的一个在线图片转化工具,也是一个国产工具,PNG、GIF、JPG、BMP、ICO 格式,上传即可进行转码,这点还挺方便,也支持从 base64字符串还原成图片,不过功能少了点。
![多视通 - ivtool.com](static/img/placeholder.png)
No.8 freeonlinetools24.com's Base64 image encoder decoder
该工具指的图片格式比较懂,包括 jpg,jpeg,png,gif,bmp,ico(favicon),svg。生成的代码样例也比较多,包括 css 代码,html 代码 ,xml 代码。也支持从 base64 代码到图片的反转。
![freeonlinetools24.com's Base64 image encoder decoder - ivtool.com](static/img/placeholder.png)
No.9 base64encode.net's Base64 Image Encoder
一个非常简单的在线图片转 base64 的编码工具,仅支持将原始图片进行编码而已,最大上传图片支持 2m,没有其他功能,但有各种编程语言转成 base64 的代码例子,适合程序员使用。
![base64encode.net's Base64 Image Encoder - ivtool.com](static/img/placeholder.png)
综合评比
工具 | 综合评分 | CSS 代码样例 | HTML img 标签代码样例 | 拖拽上传 | 图片压缩 | 原图预览 | 批量转换 | Base64 还原成图片 | URL 上传 | 操作友好度 | 广告友好度 | 访问速度 |
---|---|---|---|---|---|---|---|---|---|---|---|---|
BASE64 IMG | 是 | 是 | 是 | 是 | 是 | 是 | 否 | 否 | 5.0 | 5.0 | 1.0 | |
onlinepngtools's png to base64 converter | 是 | 否 | 是 | 否 | 是 | 否 | 是 | 否 | 5.0 | 5.0 | 1.0 | |
www.askapache.com's Base64 Image Encoder | 是 | 是 | 否 | 是 | 是 | 否 | 是 | 是 | 2.0 | 4.0 | 1.0 | |
chinaz 站长工具 | 否 | 否 | 否 | 否 | 是 | 是 | 是 | 否 | 4.0 | 2.0 | 5.0 | |
Codebeautify.org's Convert Your Image to Base64 Tools | 是 | 是 | 否 | 否 | 否 | 否 | 否 | 否 | 4.0 | 4.0 | 4.0 | |
oschina 开源中国 | 否 | 是 | 否 | 否 | 是 | 否 | 否 | 否 | 4.0 | 3.0 | 5.0 | |
多视通 | 否 | 否 | 否 | 否 | 否 | 否 | 是 | 否 | 4.0 | 4.0 | 5.0 | |
freeonlinetools24.com's Base64 image encoder decoder | 是 | 是 | 是 | 否 | 否 | 否 | 是 | 否 | 3.0 | 3.0 | 1.0 | |
base64encode.net's Base64 Image Encoder | 否 | 否 | 否 | 否 | 否 | 否 | 否 | 否 | 3.0 | 3.0 | 1.0 |