Data URL与base64

深碍√TFBOYSˉ_ 2021-11-11 10:20 237阅读 0赞

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。本文中，我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。

*  Data URL基本原理
 *  为什么Data URL是个好东西
 *  在CSS里使用Data URL
 *  将图片转换成Data URL格式
 *  Data URL总结

## Data URL基本原理 ##

通常我们在网页上显示一张图片会使用如下标签：  
![这里写图片描述][70]  
这种方式中，img标记的src属性指定了一个远程服务器上的资源。当网页加载到浏览器中时，浏览器会针对每个外部资源都向服务器发送一次拉取资源请求，占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着，如果一个网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。  
Data URL 图片数据以base64字符串格式嵌入到了页面中，与HTML成为一体，它的形式如下：  
![这里写图片描述][70 1]  
从上面的base64字符串中你看不出任何跟图片相关的东西，但下面，我们将传统的img写法和现在的Data URL用法上下对比显示，你就能看出它们是完全一样的效果。但实际上它们是不一样的，它们一个是引用了外部资源，一个是使用了Data URL嵌在网页里。几乎所有的现代浏览器都支持Data URL格式，包括火狐浏览器，谷歌浏览器，Safari浏览器，opera浏览器。IE8也支持，但有部分限制，IE9完全支持。IE6/7是不支持Data URL技术的。

## 为什么Data URL是个好东西 ##

Data URL能用在很多场合，跟传统的外部资源引用方式相比，它有如下优点：

1.  当访问外部资源很麻烦或受限时
2.  当图片是在服务器端用程序动态生成，每个访问用户显示的都不同时。
3.  当图片的体积太小，占用一个HTTP会话不是很值得时。

Data URL也有一些不适用的场合：

1.  .Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3。
2.  Data URL形式的图片不会被浏览器缓存，这意味着每次访问这样页面时都被下载一次。这是一个使用效率方面的问题——尤其当这个图片被整个网站大量使用的时候。

## 在CSS里使用Data URL ##

当第一次看到Data URL的作用和用法时，你也许会很不疑惑，“为什么要麻烦的将图片转换成base64编码字符串，还要嵌入的网页中，将HTML代码弄的混乱不堪，甚至还会有性能上的问题。”  
诚然，无法否认缓存在浏览器性能中的重要作用——**如何能将Data URL数据也放入浏览器缓存中呢？**答案是：***通过CSS样式文件。CSS中的url操作符是用来指定网页元素的背景图片的，而浏览器并不在意URL里写的是什么——只要能通过它获取需要的数据。所以，我们就有了可以将Data URL形式的图片存储在CSS样式表中的可能。而所有浏览器都会积极的缓存CSS文件来提高页面加载效率。***  
假设我们的页面里有一个很小的div元素，我们想用一种灰色的斜纹图案做它的背景，这种背景在当今的网站设计者中非常流行。传统的方法是制作一个3×3像素的图片，保存成GIF或PNG格式，然后在CSS的background-image属性中引用它的地址。而Data URL则是一种更高效的替代方法，就像下面这样。  
下面是CSS代码：

.striped_box
      { width: 100px; height: 100px; background-image: <br>url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7"); border: 1px solid gray; padding: 10px; }
     
      
     
      
       在我们的HTML里放入下面的代码： <div>class="striped_box">
    这是一个有条纹的方块
    </div>
       
         
       
         
          在这个例子中，Data URL的使用是完全符合场景的。它避免了让这个小小的背景图片独自产生一次HTTP请求，而且，这个小图片还能同CSS文件一起被浏览器缓存起来，重复使用，不会每次使用时都加载一次。只要这个图片不是很大，而且不是在CSS文件里反复使用，就可以以Data URL方法呈现图片降低页面的加载时间，改善用户的浏览体验。 将图片转换成Data URL格式的方法 用Data URL来展示图片的例子以及它的好处我们说完了，下面我们转入下一个问题，如何将图片转换成Base64编码的字符串。其实网上有很多工具都可以使用，下面列举了几个。其中一个是在线工具，一个Mac OS X桌面应用。 DataURLMaker在线工具 DataURLMaker Mac OS X 桌面 Base64 所谓Base64，就是说选出64个字符—-小写字母a-z、大写字母A-Z、数字0-9、符号”+”、”/”（再加上作为垫字的”=”，实际上是65个字符）—-作为一个基本字符集。然后，其他所有符号都转换成这个字符集中的字符。 具体来说，转换方式可以分为四步。 第一步，将每三个字节作为一组，一共是24个二进制位。 第二步，将这24个二进制位分为四组，每个组有6个二进制位。 第三步，在每组前面加两个00，扩展成32个二进制位，即四个字节。 第四步，根据下表，得到扩展后的每个字节的对应符号，这就是Base64的编码值。 　　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　　　 　　15　P　　32　g　　　49　x 　　16　Q　　33　h　　　50　y 因为，Base64将三个字节转化成四个字节，因此Base64编码后的文本，会比原文本大出三分之一左右。 4. 举一个具体的实例，演示英语单词Man如何转成Base64编码。 Text content M a n ASCII 77 97 110 Bit pattern 0 1 0 0 1 1 0 1 0 1 1 0 0 0 0 1 0 1 1 0 1 1 1 0 Index 19 22 5 46 Base64-Encoded T W F u 第一步，”M”、”a”、”n”的ASCII值分别是77、97、110，对应的二进制值是01001101、01100001、01101110，将它们连成一个24位的二进制字符串010011010110000101101110。 第二步，将这个24位的二进制字符串分成4组，每组6个二进制位：010011、010110、000101、101110。 第三步，在每组前面加两个00，扩展成32个二进制位，即四个字节：00010011、00010110、00000101、00101110。它们的十进制值分别是19、22、5、46。 第四步，根据上表，得到每个值对应Base64编码，即T、W、F、u。 因此，Man的Base64编码就是TWFu。 5. 如果字节数不足三，则这样处理： a）二个字节的情况：将这二个字节的一共16个二进制位，按照上面的规则，转成三组，最后一组除了前面加两个0以外，后面也要加两个0。这样得到一个三位的Base64编码，再在末尾补上一个”=”号。 比如，”Ma”这个字符串是两个字节，可以转化成三组00010011、00010110、00010000以后，对应Base64值分别为T、W、E，再补上一个”=”号，因此”Ma”的Base64编码就是TWE=。 b）一个字节的情况：将这一个字节的8个二进制位，按照上面的规则转成二组，最后一组除了前面加二个0以外，后面再加4个0。这样得到一个二位的Base64编码，再在末尾补上两个”=”号。 比如，”M”这个字母是一个字节，可以转化为二组00010011、00010000，对应的Base64值分别为T、Q，再补上二个”=”号，因此”M”的Base64编码就是TQ==。 6. 再举一个中文的例子，汉字”严”如何转化成Base64编码？ 这里需要注意，汉字本身可以有多种编码，比如gb2312、utf-8、gbk等等，每一种编码的Base64对应值都不一样。下面的例子以utf-8为例。 首先，”严”的utf-8编码为E4B8A5，写成二进制就是三字节的”11100100 10111000 10100101”。将这个24位的二进制字符串，按照第3节中的规则，转换成四组一共32位的二进制值”00111001 00001011 00100010 00100101”，相应的十进制数为57、11、34、37，它们对应的Base64值就为5、L、i、l。 所以，汉字”严”（utf-8编码）的Base64值就是5Lil。 7. 在PHP语言中，有一对专门的函数用于Base64转换：base64_encode()用于编码、base64_decode()用于解码。 这对函数的特点是，它们不管输入文本的编码是什么，都会按照规则进行Base64编码。因此，如果你想得到utf-8编码下的Base64对应值，你就必须自己保证，输入的文本是utf-8编码的。 8. 这一节介绍如何用Javascript语言进行Base64编码。 首先，假定网页的编码是utf-8，我们希望对于同样的字符串，用PHP和Javascript可以得到同样的Base64编码。 这里就会产生一个问题。因为Javascript内部的字符串，都以utf-16的形式进行保存，因此编码的时候，我们首先必须将utf-8的值转成utf-16再编码，解码的时候，则是解码后还需要将utf-16的值转回成utf-8。 网上已经有人写好了现成的Javascript函数： /* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo <iz@onicos.co.jp> * Version: 1.0 * LastModified: Dec 25 1999 * This library is free. You can redistribute it and/or modify it. */
    
    /* * Interfaces: * utf8 = utf16to8(utf16); * utf16 = utf8to16(utf8); */
    
    function utf16to8(str) {
    var out, i, len, c;
    
    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
    c = str.charCodeAt(i);
    if ((c >= 0x0001) && (c <= 0x007F)) {
    out += str.charAt(i);
    } else if (c > 0x07FF) {
    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
    out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    } else {
    out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
    out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
    }
    }
    return out;
    }
    
    function utf8to16(str) {
    var out, i, len, c;
    var char2, char3;
    
    out = "";
    len = str.length;
    i = 0;
    while(i < len) {
    c = str.charCodeAt(i++);
    switch(c >> 4)
    {
    case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
    // 0xxxxxxx
    out += str.charAt(i-1);
    break;
    case 12: case 13:
    // 110x xxxx 10xx xxxx
    char2 = str.charCodeAt(i++);
    out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
    break;
    case 14:
    // 1110 xxxx 10xx xxxx 10xx xxxx
    char2 = str.charCodeAt(i++);
    char3 = str.charCodeAt(i++);
    out += String.fromCharCode(((c & 0x0F) << 12) |
    ((char2 & 0x3F) << 6) |
    ((char3 & 0x3F) << 0));
    break;
    }
    }
    
    return out;
    }
         
            
         
            
             上面的这段代码中定义了两个函数，utf16to8()用于将utf-16转成utf-8，utf8to16用于将utf-8转成utf-16。 下面才是真正用于base64编码的函数。 /* Copyright (C) 1999 Masanao Izumo <iz@onicos.co.jp> * Version: 1.0 * LastModified: Dec 25 1999 * This library is free. You can redistribute it and/or modify it. */
    
    /* * Interfaces: * b64 = base64encode(data); * data = base64decode(b64); */
    
    
    var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var base64DecodeChars = new Array(
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
    52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,
    -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
    15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,
    -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
    41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
    
    function base64encode(str) {
    var out, i, len;
    var c1, c2, c3;
    
    len = str.length;
    i = 0;
    out = "";
    while(i < len) {
    c1 = str.charCodeAt(i++) & 0xff;
    if(i == len)
    {
    out += base64EncodeChars.charAt(c1 >> 2);
    out += base64EncodeChars.charAt((c1 & 0x3) << 4);
    out += "==";
    break;
    }
    c2 = str.charCodeAt(i++);
    if(i == len)
    {
    out += base64EncodeChars.charAt(c1 >> 2);
    out += base64EncodeChars.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
    out += base64EncodeChars.charAt((c2 & 0xF) << 2);
    out += "=";
    break;
    }
    c3 = str.charCodeAt(i++);
    out += base64EncodeChars.charAt(c1 >> 2);
    out += base64EncodeChars.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
    out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >>6));
    out += base64EncodeChars.charAt(c3 & 0x3F);
    }
    return out;
    }
    
    function base64decode(str) {
    var c1, c2, c3, c4;
    var i, len, out;
    
    len = str.length;
    i = 0;
    out = "";
    while(i < len) {
    /* c1 */
    do {
    c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
    } while(i < len && c1 == -1);
    if(c1 == -1)
    break;
    
    /* c2 */
    do {
    c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
    } while(i < len && c2 == -1);
    if(c2 == -1)
    break;
    
    out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
    
    /* c3 */
    do {
    c3 = str.charCodeAt(i++) & 0xff;
    if(c3 == 61)
    return out;
    c3 = base64DecodeChars[c3];
    } while(i < len && c3 == -1);
    if(c3 == -1)
    break;
    
    out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));
    
    /* c4 */
    do {
    c4 = str.charCodeAt(i++) & 0xff;
    if(c4 == 61)
    return out;
    c4 = base64DecodeChars[c4];
    } while(i < len && c4 == -1);
    if(c4 == -1)
    break;
    out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
    }
    return out;
    }

上面代码中的base64encode()用于编码，base64decode()用于解码。

因此，对utf-8字符进行编码要这样写：

sEncoded=base64encode(utf16to8(str));
     
      
     
      
       1

然后，解码要这样写：

sDecoded=utf8to16(base64decode(sEncoded)); 
     
      
     
      
       1
       2

原文地址：[http://www.webhek.com/post/data-url.html][http_www.webhek.com_post_data-url.html]  
[http://www.ruanyifeng.com/blog/2008/06/base64.html][http_www.ruanyifeng.com_blog_2008_06_base64.html]

[70]: /images/20211109/d159037c9b184d87a87d2baa5032109c.png
[70 1]: /images/20211109/6512f5cce2444f6681ca7ffd75a92017.png
[http_www.webhek.com_post_data-url.html]: http://www.webhek.com/post/data-url.html
[http_www.ruanyifeng.com_blog_2008_06_base64.html]: http://www.ruanyifeng.com/blog/2008/06/base64.html