) Data URI schema Learning

Http://sjolzy.cn/What-is-the-data-URI-scheme-and-how-to-use-the-data-URI-scheme.html

One of the primary tasks of web page optimization is to reduce the number of HTTP requests, such as merging multiple JS files and CSS style files. In addition, there is a data URL secret technology that allows us to directly paste the image content into the webpage. The official name of this secret technology is data URI scheme.

What is data URI scheme?

Suppose you have the following images:

A

The standard method for displaying it on a webpage is:

The method for obtaining data is called http uri scheme. In the same effect, data URI scheme can be written as follows:

"/> In other words, the content of the image file is embedded in the HTML file, saving an HTTP request.

Data URI scheme syntax

Let's analyze the syntax of this IMG Tag:

it contains the following parts:

Data-name of the protocol for obtaining data

Image/PNG-data type name

Base64-data encoding method

Ivbor...-encoded data

:,;-The separator specified by data URI Scheme

Base64 encoding?

Do you know what base64 is? Simply put, it translates some 8-bit data into standard ASCII characters. There are many free base64 encoding and decoding tools on the top. You can also use PHP base64_encode () for encoding:

Echo base64_encode(file_get_contents('check.png '));

Use Data URL in CSS

Data URI scheme can also be used in CSS, for example:

Body {background-image: URL ("data: image/PNG; base64, ivborw0kggoaaaansuheugaaaaqaaaadcaiaaaa

Images ");} Will the browser cache this image?

No. Although the Data URL saves HTTP requests, if the image is to be displayed in multiple places on the webpage, the content of the webpage will be increased and the download time will be extended, one solution is to add Data URL to a CSS class and call this class in the block where the image needs to be displayed. For example:

. Logobg {

Background: URL (data :...)

} <Div class = "navigation logobg"> ..

Helo, hello

<Div class = "footer logobg">... It's Internet Explorer.

Any brilliant technique may be squeezed out by IE. This is also the case this time. Versions earlier than IE8 do not support data URI scheme.

To solve this problem, use MHTML to solve the browser compatibility problem of data URI scheme.

The specific method depends on the Code (it must be implemented using CSS hack)

/*

Content-Type: multipart/related; boundary = "_ any_string_will_do_as_a_separator"

-- _ Any_string_will_do_as_a_separator

Content-location: the9

Content-transfer-encoding: base64

/9j/4AA... + B0 // 2q = (base64 encoding)

*/

# The9 {

Background-image: URL ("data: image/PNG; base64/9j/4AA... + B0 // 2q =");/* normal */

* Background-image: URL (MHTML: http://www.zhangjingwei.com/demo/scheme/style.css! The9 );

Width: 300px;

Height: 300px;

Color: # f00;

Font-weight: 900;

}