1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 前端图片转换Base64 图片编码Base64

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

时间:2022-05-06 20:03:21

相关推荐

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

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

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

为什么要用Base64?

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

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

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

thunder://QUFodHRwOi8vZGwxMzUuODBzLmltOjkyMC8xNzA4L+aImGwyW+mrmOa4heaKouWFiOeJiF0v5oiYbDJb6auY5riF5oqi5YWI54mIXS5tcDRaWg==

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

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

但是使用Base64也有缺点:

1.浏览器支持

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

2.增加了CSS文件的尺寸

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

3.编码成本

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。