威尼斯人线上娱乐

前者品质优化,Base64编码原理与完成规划

25 3月 , 2019  

python
字节转换到图像

Atitit.Base64编码原理与贯彻设计,atitit.base64编码

Atitit.Base64编码原理与贯彻统一筹划

 

 

  1. Base64编码1

1.1. 为啥要用本人的base64编码方案1

  1. Base64编码由来1

  2. Base64编码原理1

3.1. 具体来说,转换格局得以分为四步:2

3.2. 注意2

3.3. Padding3

  1. URL安全的Base64编码3

 

前言:

方今钻探着前端品质的优化方面包车型客车学问,并以博客记之。从前有同样类别的稿子(前端品质优化–图片懒加载(lazyload
image)),此次持续是有关图片的处理,css
sprites
base64
格式图片,那二种处理都是由此收缩了http的呼吁来达到前端品质优化的作用,请求裁减,与服务器连接次数收缩,加载页面包车型大巴时日就快了,如是甚好。


前言:

近年切磋着前端质量的优化方面的学识,并以博客记之。在此之前有同一种类的篇章(前者品质优化–图片懒加载(lazyload
image)),这次三番五次是关于图片的拍卖,css
sprites
前者品质优化,Base64编码原理与完成规划。 和 base64
格式图片,那三种处理都以通过削减了http的请求来实现前端品质优化的效用,请求收缩,与服务器连接次数减弱,加载页面包车型大巴年月就快了,如是甚好。


使用base64

1. Base64编码

Css Sprites:

Css Sprites:

1.图片转成字节使用: 
base64.b64encode()

1.1. 为啥要用自个儿的base64编码方案

防止apache codec  jdk的jar冲突。

 

介绍:

Css
Pepsi-Colas(百事可乐图或css天使),是网页图片处理的一种办法,它同意你将3个页面涉及到的具备零星图片都包蕴到一张大图中去,那样一来,当访问该页面时,载入的图形就不会像在此之前那么一幅一幅地稳步展现出来了。

介绍:

Css
百事可乐s(7-Up图或css天使),是网页图片处理的一种方法,它同意你将贰个页面涉及到的富有零星图片都蕴含到一张大图中去,那样一来,当访问该页面时,载入的图纸就不会像在此之前那么一幅一幅地慢慢突显出来了。

2.字节转成图片:
base64.b64decode()

2. Base64编码由来

Base64最早是用来消除电子邮件的传导难点。

观念的电子邮件是一九八二年定下技术专业的,详见rfc0822。该规范的二个重庆大学特点,正是规定电子邮件只好利用ASCII可打印字符。那就造成非阿尔巴尼亚语字符或二进制文件(比如图片)不一样通过电子邮件进行传输了。

小编::  ★(attilax)>>>   绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 Ake巴 阿尔 拉帕努伊 ) 汉字名:艾龙,  EMAIL:[email protected]

转发请评释来源: 

 

 

原理:

将许多的小图片整合到一张大图片中,利用css中的background-image属性,background-position属性定位有个别图片地点,来达到在大图片中引用有个别地点的小图片的机能。

原理:

将众多的小图片整合到一张大图片中,利用css中的background-image属性,background-position属性定位有些图片地方,来完结在大图片中援引有些部位的小图片的功效。

 

3. Base64编码原理

简简单单的话,
Base64编码正是从ASCII码中选出六1八个字符—-大写字母A-Z、小写字母a-z、数字0-九 、符号”+”、”/”(再加上作为填充字符的”=”,实际上是61个字符),作为二个主干字符集。然后,其他具有符号都转换来那些字符集中的字符。

 

优点:

  • 缩减网页的http请求,进步网页加载速度。
  • 合并多张小图片成大图,能减小字节总数(大图大小<=多张小图大小).

优点:

  • 压缩网页的http请求,进步网页加载速度。
  • 联合多张小图片成大图,能减弱字节总数(大图大小<=多张小图大小).

图形字节串:

3.1. 具体来说,转换形式得以分为四步:

1. 将每多少个字节分成一组,一共2陆个二进制位:3*8=24

2. 将那2陆个二进制位分成4组,每组有四个二进制位:24/4=6

3. 在每组前加两00,扩张成三十一个二进制位,即陆个字节:4*(6+2)=32

4. 

基于上边的编码表,获得壮大后各类字节的相应标记,正是Base64的编码值

5. 

Value Encoding  Value Encoding  Value Encoding  Value Encoding

    0 A            17 R            34 i            51 z

    1 B            18 S            35 j            52 0

    2 C            19 T            36 k            53 1

    3 D            20 U            37 l            54 2

    4 E            21 V            38 m            55 3

    5 F            22 W            39 n            56 4

    6 G            23 X            40 o            57 5

    7 H            24 Y            41 p            58 6

    8 I            25 Z            42 q            59 7

    9 J            26 a            43 r            60 8

   10 K            27 b            44 s            61 9

   11 L            28 c            45 t            62 +

   12 M            29 d            46 u            63 /

   13 N            30 e            47 v

   14 O            31 f            48 w         (pad) =

   15 P            32 g            49 x

   16 Q            33 h            50 y

6. 

 

缺点:

  • 早期须要处理图片将小图合并,多有点工程量。
  • 对此供给通常改变的图片维护起来麻烦。

缺点:

  • 早先时代需求处理图片将小图合并,多有点工程量。
  • 对于急需平时转移的图样维护起来麻烦。
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

3.2. 注意

1. 因为更换后的各样字符的参天两位都以0,所以实际上有效位数是五人,也正是26=陆十三个字符就能够覆盖全体的编码。

2. 比方剩下的字符不足二个字节,则用0填充,输出字符使用”=”,因而编码后输出的文本末尾或许会产出1或1个”=”。

3. 因为Base64将3个字节转化成四个字节,因而Base64编码后的公文,会比原来的书文件大出三分之一左右。

 

动用例子:

  • 生成七喜图:作者那里运用了网页7-Up图制作专家,当然还有为数不少其余的工具
  • 合成的图样如图所示:
    威尼斯人线上娱乐 1

html代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css Sprites</title>
</head>

<body>
    <ul class="container">
        <li class="icon icon-issue"></li>
        <li class="icon icon-upload"></li>
        <li class="icon icon-passage"></li>
    </ul>
</body>

</html>

css代码:

.container {
    overflow: hidden;
    width: 50px;
    height: 200px;
    background-color: #faa755;
}

.icon {
    margin: 0 auto;
    margin-top: 20px;
    width: 40px;
    height: 30px;
    background-image: url(icon.png);
    list-style-type: none;
}

.icon-issue {
    background-position: 0 0;
}

.icon-upload {
    background-position: 0 -50px;
}

.icon-passage {
    background-position: 0 -100px;
}
  • 效果图:
    威尼斯人线上娱乐 2

采用例子:

  • 生成Coca Cola图:笔者那边运用了网页七喜图制作专家,当然还有很多其余的工具
  • 合成的图纸如图所示:
    威尼斯人线上娱乐 3

html代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css Sprites</title>
</head>

<body>
    <ul class="container">
        <li class="icon icon-issue"></li>
        <li class="icon icon-upload"></li>
        <li class="icon icon-passage"></li>
    </ul>
</body>

</html>

css代码:

.container {
    overflow: hidden;
    width: 50px;
    height: 200px;
    background-color: #faa755;
}

.icon {
    margin: 0 auto;
    margin-top: 20px;
    width: 40px;
    height: 30px;
    background-image: url(icon.png);
    list-style-type: none;
}

.icon-issue {
    background-position: 0 0;
}

.icon-upload {
    background-position: 0 -50px;
}

.icon-passage {
    background-position: 0 -100px;
}
  • 效果图:
    威尼斯人线上娱乐 4

 

3.3. Padding

Base64是四个字节(Bytes)作为一组(24-bit
block)的编码转换,假使字节数不是三的倍数,那么就会出最终一组只有一个要么三个字节的意况,按上面包车型大巴规则处理:

1. 贰个字节的图景:将这贰个字节的玖个二进制位,依照每组五个二进制位转成二组,最后一组除了前方加1个0以外,前面再加6个0。那样获得一个几个人的Base64编码,再在末尾补上五个”=”号。

2. 三个字节的情景:将那三个字节的一共17个二进制位,按每组陆个二进制位转成三组,最终一组除了前面加多个0以外,前面也要加四个0。这样获得二个三位的Base64编码,再在末尾补上3个”=”号。

 

参考base64架构图片

 

适用场景:

  • 对此一些不要求多变动的小图片,表情,标志等等都可以应用。
  • 相似都以运用于小图片,太大的图样不方便人民群众合并,且稳定麻烦,二次的加载时间长,导致整个图形出现时间推迟,效果不和谐。

适用场景:

  • 对于部分不必要多变动的小图片,表情,标志等等都得以动用。
  • 貌似都以利用于小图片,太大的图片不方便人民群众合并,且平素麻烦,1次的加载时间长,导致整个图片出现时间推迟,效果不本身。

以身作则代码:
字节解码成图片

4. URL安全的Base64编码

由于‘+’,‘/’多少个字符在UPAJEROL中有优秀意义,将Base64编码后的数目在通过U奥迪Q5L传输时索要经过U途观L编码进行转义,不过那样子会造成U奥迪Q5L无意义的变长,而且多了三个UTiguanL编解码步骤。为了制止那几个难题,现身了一种用于U奥迪Q5L的校正Base64编码变种,它实在正是简约的把标准Base64中的’+’和’/’分别改成了’-‘和’_’。对于填充字符’=’,有个别变种是把它平昔去掉,有个别则是把它替换来’.’。

威尼斯人线上娱乐, 

Base64编码学习笔记 – 简书.html

 

Atitit. Base64编码 原理与完成规划 1 . Base64编码 1 1 .1.
为何要用本身的 base64 编码方案 1 2…

base64:

base64:

res为图片字节串

介绍:

base64是网络上最广大的用来传输8Bit字节代码的编码格局之一,供给把每四个8Bit的字节转换为八个6Bit的字节,Base64是互联网上最常见的用于传输8Bit字节代码的编码格局之一。

通俗点讲:将能源本来二进制格局转成以陆拾8个字符基本单位,所结合的一串字符串。
例如一张图片转成base64编码后就好像这么,图片间接以base64方式嵌入文件中(相当短没截完):
威尼斯人线上娱乐 5

介绍:

base64是网络上最普遍的用于传输8Bit字节代码的编码方式之一,要求把每多少个8Bit的字节转换为三个6Bit的字节,Base64是互连网上最广泛的用于传输8Bit字节代码的编码格局之一。

通俗点讲:将能源本来二进制形式转成以63个字符基本单位,所构成的一串字符串。
比如说一张图纸转成base64编码后就像是这么,图片直接以base64格局嵌入文件中(非常短没截完):
威尼斯人线上娱乐 6

from PIL import Image
import base64
img = base64.b64decode(res)

file = open('test.jpg','wb')
file.write(img)
file.close()

生成base64编码:

图形生成base64能够用有个别工具,如在线工具,但在品种中如此三个图纸那样变化是挺麻烦。
专门说下,webpack中的url-loader能够做到这几个工作,能够对限制大小的图形举行base64的变换,分外有益。

生成base64编码:

图表生成base64可以用一些工具,如在线工具,但在项目中如此3个图片那样变化是挺麻烦。
尤其说下,webpack中的url-loader能够形成这一个工作,能够对限制大小的图纸展开base64的转移,格外便于。

 

优点:

  • base64的图片会趁着html恐怕css一起下载到浏览器,减少了请求.
  • 可幸免跨域难题

优点:

  • base64的图纸会趁机html恐怕css一起下载到浏览器,减弱了请求.
  • 可幸免跨域问题

缺点:

  • 老东西(低版本)的IE浏览器不匹配。
  • 容量会比原先的图纸大一些。
  • css中过多利用base64图片会使得css过大,不便于css的加载。

缺点:

  • 老东西(低版本)的IE浏览器不合营。
  • 体积会比原来的图形大学一年级点。
  • css中过多应用base64图片会使得css过大,不便于css的加载。

适用场景:

  • 使用于小的图形几k的,太大的图样会变换后的尺寸太大,以珠弹雀。
  • 用来一些css
    sprites不利处理的小图片,如有个别得以经过background-repeat平铺来做成背景的图样。

适用场景:

  • 利用于小的图片几k的,太大的图纸会转移后的轻重太大,进寸退尺。
  • 用以一些css
    sprites不利处理的小图片,如有个别方可由此background-repeat平铺来做成背景的图纸。

说到底收收尾:

下面说的七个处理图片共同点是都以利用于小图片,都能压缩请求数,但并不是持有的图纸都适用,尺寸大的图纸就不应使用。
三种方式都有利有弊,应该适应场景使用,权衡利弊,方可将那三种方法能力公布好。

终极收收尾:

地方说的三个处理图片共同点是都以应用于小图片,都能减小请求数,但并不是享有的图形都适用,尺寸大的图形就不应使用。
三种方式都有利有弊,应该适应场景使用,权衡利弊,方可将那两种办法能力发挥好。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图