前面一脾品质优化–图片管理(Css Pepsi-Colas 与 base64)

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

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

1.1. 为什么要用自己的base64编码方案

防止apache codec  jdk的jar冲突。

 

适用场景:

  • 应用于小的图片几k的,太大的图片会转换后的大小太大,得不偿失。
  • 用于一些css
    sprites不利处理的小图片,如一些可以通过background-repeat平铺来做成背景的图片。

使用base64

2. Base64编码由来

Base64最早是用来解决电子邮件的传输问题。

传统的电子邮件是1982年定下技术规范的,详见rfc0822。该规范的一个重要特点,就是规定电子邮件只能使用ASCII可打印字符。这就导致非英语字符或二进制文件(比如图片)不同通过电子邮件进行传输了。

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

转载请注明来源: 

 

 

Css Sprites:

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

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

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

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

3. 在每组前加两00,扩展成32个二进制位,即4个字节: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. 

 

前言:

近期研究着前端性能的优化方面的知识,并以博客记之。之前有相同系列的文章(前端性能优化–图片懒加载(lazyload
image)),这次继续是关于图片的处理,css
sprites
base64
格式图片,这两种处理都是通过减少了http的请求来达到前端性能优化的效果,请求减少,与服务器连接次数减少,加载页面的时间就快了,如是甚好。


 

3.3. Padding

Base64是三个字节(Bytes)作为一组(24-bit
block)的编码转换,如果字节数不是三的倍数,那么就会出最后一组只有一个或者两个字节的情况,按下面的规则处理:

1. 一个字节的情况:将这一个字节的8个二进制位,按照每组6个二进制位转成二组,最后一组除了前面加二个0以外,后面再加4个0。这样得到一个二位的Base64编码,再在末尾补上两个”=”号。

2. 二个字节的情况:将这二个字节的一共16个二进制位,按每组6个二进制位转成三组,最后一组除了前面加两个0以外,后面也要加两个0。这样得到一个三位的Base64编码,再在末尾补上一个”=”号。

 

参考base64架构图片

 

优点:

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

示例代码:
字节解码成图片

3. Base64编码原理

简单来说,
Base64编码就是从ASCII码中选出64个字符—-大写字母A-Z、小写字母a-z、数字0-9、符号”+”、”/”(再加上作为填充字符的”=”,实际上是65个字符),作为一个基本字符集。然后,其他所有符号都转换成这个字符集中的字符。

 

生成base64编码:

图片生成base64可以用一些工具,如在线工具,但在项目中这样一个图片这样生成是挺繁琐。
特别说下,webpack中的url-loader可以完成这个工作,可以对限制大小的图片进行base64的转换,非常方便。

发表评论

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