图片编码 Base64 与 DataURI

乱七八糟 专栏收录该内容
3 篇文章 0 订阅

1、DataURI,通常就被叫做DataURL,是因为图片被base64编码之后,这串码可以用浏览器直接打开,类似于一个网站URL

2、DataURI的格式:

                             data:[<mime type>] ( [;charset=<charset>] ) [;base64],码内容

                    标识头,            展现方式                 编码设置

      证明是一个DataURI        text/plain   文本         有默认值

                                           image/png   图片         一般可不写

3、DataURI 的好处:

    减少http请求,

    可直接写入css中src,

    没有清理缓存的问题

4、DataURI 的弊端:

    不会被缓存,但是代表每次都要重新下载一次

    增加了css文件的尺寸

    数据体积比二进制格式的图片要更大,虽然服务端有gzip压缩,但是效果一般

    解码耗CPU,在移动端不宜多用

5、DataURI 适用:

   不能生成css spirite(雪碧图)的

   很少被更新的

   实际尺寸很小的

   大规模适用的

    举例: 一般多用于背景,一些线条元素

6、DataURI  与 Base64 关系:

    Base64: 将数据用64个字符进行编码的方式,只要数据为二进制的都可以被编码,适用于文本,图片等。

                  原理:3×8 = 4×6 。 将原来每8bit,即一字节的,拆分成4个6bit的,再填0变成8bit,所以相当于

                            每3位变成了4位,增加了1/3的尺寸。

                  作用:编完码后,文本,图片都变成了流stream的感觉,可以用于传输。

   DataURI:将编码放入DataURI进行展现,全称为DataURI scheme,是一种展现,承载Base64的体系。

  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

cherrybomb1994

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值