Embed a picture in a page using the Data URL Base64 encoding __ code

Before the company has a demand, backstage hope that the front end as much as possible to reduce the request, I took into account the sprite and other pictures into the Base64 embedded into the page, but finally because the company intranet can not fully access the Internet, after all, shelved. I ran into it today and recorded it.

The idea is to translate the images needed in the page into Base64 encoding, and then embed the code in the CSS picture reference location, or into the SRC in the img tag.

The specific production methods are:

1, open the following Web site

2, according to the instructions of the page, upload the page, and then copy the code after the transcoding, and then add the URL data, or SRC data.

There are a few simple introductions on the site page.

Http://tool.css-js.com/base64.html

I use the background image here to test the way, in fact, is to copy the data after the encoding, put in the background-image:url position. The specific methods are as follows:

div.triangle{
            width:900px;
            height:500px;

            Background-image:url ("Data:image/png;base64,......}"

The test results are as follows:

I feel good.

PS: Several days after the supplement:

How to obtain the Base64 data information of the picture under the condition of network restriction.

Directly above: