前端图片在线转换Base64 图片编码Base64

时间:2024-04-05 12:42:10

首先讲一下什么是图片Base64编码:

简单来说,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。

为什么要用Base64?

我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个http请求下载而来的,不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,而可以随着 HTML 的下载同时下载到本地那就太好了,而base64正好能解决这个问题。

图片的Base64格式长什么样呢?举个例子,其实谷歌浏览器主页的LOGO就是用的Base64 格式,如下图:


前端图片在线转换Base64 图片编码Base64


红框里的URL地址就是Base64 格式的,其实还有大家非常熟悉的迅雷下载链接也是使用的Base64格式,例如:

thunder://QUFodHRwOi8vZGwxMzUuODBzLmltOjkyMC8xNzA4L+aImGwyW+mrmOa4heaKouWFiOeJiF0v5oiYbDJb6auY5riF5oqi5YWI54mIXS5tcDRaWg==(人家不是那种地址啦!哈哈,发个福利)

由此可见Base64不仅仅运用在图片方面!

那么怎么将本地图片转化成Base64格式呢?下面小编推荐一个在线转化工具:http://tool.css-js.com/base64.html

但是使用Base64也有缺点:

1.浏览器支持

使用base64编码图片作为背景图片的这种技术IE6/IE7浏览器是不支持的(IE9浏览器IE7模式下支持,这里被@前端的那点破事鄙视了 )。对于目前PC页面,兼容性问题使没有文件上传以及无需更新缓存的优点不存在了。

2.增加了CSS文件的尺寸

base64编码图片本质上是将图片的二进制大小以一些字母的形式展示,例如一个1024字节的图片,base64编码后至少1024个字符,这个大小会被完全嵌入到CSS文件中(不过幸运的是也可以被gzip了,而图片文件被gzip效果不明显)。

3.编码成本

图片完成后还需要base64编码,目前估计手工完成的多,因此,增加了一定的工作量,虽然不多。