data uri_html/css_WEB-ITnose

Data URI Popular Science

The author's positioning of this article is practical, so I only touch on some theoretical foundations. First, what is a Data URI? Quoting the explanation on Wikipedia:

Data URI 是一种提供让外置资源的直接内嵌在页面中的方案。这种技术允许我们只需单次 HTTP 请求即可获取所有需要引用的图片与样式资源，并因无需多次请求资源而变的高效。

Its format specification is defined in RFC2397 (http://tools.ietf.org/html/rfc2397):

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

A preliminary study on Data URI

It seems that the format specification is not very friendly. Let’s take inline images as an example:

<img src="/static/imghwm/default1.png"  data-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="  class="lazy" alt="Red dot">

data:image/png;base64, are fixed Format, image/png is the MIME type of the image, and base64 is the data encoding method. It is also necessary to point out here that the Base64 encoded data will be about 4/3 larger than the original data, which is related to the Base64 encoding algorithm. If used in email, according to RFC 822, a carriage return and line feed must be added for every 76 characters. At this time, the encoded data length is approximately 135.1% of the original length.

To verify the theory, we did the following tests, Base64 encoding images of different sizes, which was consistent with our expectations and increased by 1/3 compared to the original data:

图片尺寸 | 原始大小 | Base64大小 | 增长率 |:-----------|:------------|:-------------|:-------------|16*16 | 618 | 824 | 34.2%24*24 | 1,063 | 1,420 | 33.6%32*32 | 1,615 | 2,156 | 33.5%42*42 | 2,510 | 3,348 | 33.4%48*48 | 2,892 | 3,856 | 33.3%96*96 | 8,217 | 10,956 | 33.3%350*350 | 49,899 | 66,532 | 33.3%

Images are the most common scenario for using Data URI, but Data URI is a specification independent of resource type. You can also use Data URI to embed other resources:

var cvs = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);var html = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);

Data URI Compatibility

On the front end, browser compatibility is a topic that almost every technology cannot escape. Check the compatibility of Data URI:

Firefox 2

Opera 7.2

Chrome

Safari

Internet Explorer 8

Most mainstream browsers have already supported Data URI. Although IE8 supports it, its maximum length cannot exceed 32K data. This has been lifted under IE9 For detailed IE documentation, please read Microsoft's official documentation. The rest is still facing IE 6/7, which still has Class A views in China. We can use MHTML similar to Data URI (the author thinks that its design is better than Data URI, taking into account the reuse of embedded data ). A detailed introduction to MHTML is beyond the scope of this article, but it should be pointed out that Microsoft released a patch in 2011 for vulnerabilities in MHTML that may allow information leakage, which will cause the problem that MHTML cannot be referenced, so using MHTML in IE This solution involves great risks and is not recommended when expanding your knowledge.

http://technet.microsoft.com/zh-CN/security/advisory/2501696

http://www.microsoft.com/china/security/bulletins/ms03-014 .mspx

Data URI best practice

We do not merge images before Data URI conversion, but use small images directly, which saves the trouble of combined image positioning,

background-image:url("data:image/png;base64,iVBORw0KGgoAAA...ElFTkSuQmCC");*background-image:url(http://cdn.example.com/foo.gif);

Comparison data:

图片尺寸 | 原始大小 | Base64大小 | Gzip大小 |  Gzip压缩率 | 增长率 |:-----------|:------------|:-------------|:-------------|:-------------|:-------------|16*16 | 618 | 824 | 668 | 81.1% | 108.8%24*24 | 1,063 | 1,420 | 1,119 | 78.8% | 5.3%32*32 | 1,615 | 2,156 | 1,670 | 77.5% | 3.9%42*42 | 2,510 | 3,348 | 2,568 | 76.7% | 2.3%48*48 | 2,892 | 3,856 |  2940 | 76.2% | 1.7%96*96 | 8,217 | 10,956 | 8304 | 75.8% | 1.1%350*350 | 49,899 | 66,532 | 50,095 | 75.3% | 0.4%

DIY generation tool

Node is a veritable assistant for front-end development. It only uses 3 lines of code to convert an image into Base64. Encoding:

var body = fs.readFileSync('./foo.png', 'binary');  // 输入var image = new Buffer(body, 'binary').toString('base64'); // base64编码var base64 = 'data:image/png;base64,' + image;  // 输出

Datauri format data requires more CPU calculations to render the image. Perhaps on a PC with weaker performance, the additional image request solution may render the image earlier, especially on mobile terminals where limited In the case of CPU, it must be used with caution.

The compromise here is to limit the conversion conditions. Only small images smaller than 2K will be converted into Base64 encoding. 2K is the recommended threshold