Data uri, uri

Data uri, uri
Data URI

The author positions this article as a practical operation type, so some theoretical foundations are only available until now. First, what is Data URI? Reference Wikipedia's explanation:

Data URI is a solution that allows external resources to be directly embedded in pages. This technology allows us to obtain all the image and style resources that need to be referenced in a single HTTP request, and becomes more efficient because we do not need to request resources multiple times.

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

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

Data URI

It seems that the format specification is not very friendly. We use embedded images as an example:

Data: image/png; base64,Is a fixed format, image/png is the MIME type of the image, base64 is the data encoding method. It is worth noting that the Base64 encoded data is about 4/3 larger than the original data, which is related to the Base64 encoding algorithm. If you want to use it in an email, according to RFC 822, A carriage return line must be added for every 76 characters. At this time, the encoded data length is about 135.1% of the original length.

To verify the theory, we perform the following tests to encode images of different sizes with Base64, which is consistent with our expectation, up 1/3 from the original data:

Image Size | original size | Base64 size | growth rate |: ----------- |: ------------ |: ------------- |: ------------- | 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 commonly used scenarios with Data URI, but Data URI is a specification unrelated to the 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

In front-end, browser compatibility is almost impossible for every technology. review the compatibility of Data URI:

• Firefox 2 +
• Opera 7.2 +
• Chrome ++
• Safari ++
• Internet Explorer 8 +

Most mainstream browsers already support Data URI. Although IE8 supports Data with a maximum length of no more than 32 KB, this restriction has been resolved in IE9. For more information about IE, see Microsoft official documentation. The rest is still in the face of Internet Explorer 6/7 in China or class A browser, we can use MHTML similar to Data URI (I think its design is better than Data URI, considering the reuse of embedded data ). MHTML details are not covered in this article, but it should be pointed out that Microsoft released a vulnerability in MHTML in 2011 that may allow information leakage patch, which will cause the problem that MHTML cannot be referenced, therefore, the use of MHTML in IE poses a great risk and is not recommended when you expand your knowledge.

• Http://technet.microsoft.com/zh-CN/security/advisory/2501696
• Http://www.microsoft.com/china/security/bulletins/ms03-014.mspx

Data URI Best Practices

Before Data URI conversion, we do not merge images, but directly use small images, which saves the trouble of combining images and positioning,

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

Comparison data:

Image Size | original size | Base64 size | Gzip compression rate | growth rate |: ----------- |: ------------ |: ------------- |: ------------- | 16*16 | 618 | 824 | 668 | 81.1% | 108.8% 24*24 | 1,063 | 1,420 | 1,119 | 78.8% 32*32 | 5.3% | 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 tools

Node is a real front-end development assistant. It can convert an image into Base64 encoding with only three lines of code:

Var body = fs. readFileSync ('. /foo.png ', 'binary'); // enter var image = new Buffer (body, 'binary '). toString ('base64'); // base64 encoded var base64 = 'data: image/png; base64, '+ image; // output

Data in Datauri format requires more CPU computing to render images. In a PC with a lower performance, the scheme for requesting additional images may render images earlier, especially when the Mobile End has limited CPU, you must use it with caution.

Here, the compromise scheme is to limit the conversion conditions. Only smaller than 2 kb of images are converted to Base64 encoding, and 2 K is a recommended threshold value.