Method of using image data URI to process pictures in CSS

Converts a picture resource to a Base64 string format embedded in a page or style. So even the picture of the request link is saved.

Such as:

How to use

CSS code copy content to clipboard

/** Data Format **/

Data:image/png;base64,ivborw0kggoaaaansuheugaaaa4aaaaocayaaaafsc3raaaabhncsvqicagifahkiaaaaa

Lwsflzaaalewaacxmbajqcgaaaae1jrefukjhv0meowcaia9dw7mp983pymuaweluv8iaabjfujdwonqeed0/iwwhk8

Qatsylgfihezm9woc8jsqaotvmqtzy1u+z6449ga9r24d4iz6wwaaaaaelftksuqmcc

/** Style Reference **/

. icon{

width:30px; height:30px;

Background-image:url (Data:image/png;base64, Ivborw0kggoaaaansuheugaaaa4aaaaocayaaaafsc3raaaabhncsvqicagifahkiaaaaa

Lwsflzaaalewaacxmbajqcgaaaae1jrefukjhv0meowcaia9dw7mp983pymuaweluv8iaabjfujdwonqeed0/iwwhk

8QATSYLGFIHEZM9WOC8JSQAOTVMQTZY1U+Z6449GA9R24D4IZ6WWAAAAAELFTKSUQMCC);

}

Label Syntax:

Data: Access to Protocol

Image/png: Get the protocol name of the data (note here also picture resources can also use fonts, etc.)

Base64: Data encoding method

Ivbor: Coded data

Advantages

Reduce HTTP Requests

Avoid certain files from crossing the domain

No picture caching problems (but the general CSS is also a cache of good or bad)

Disadvantages

Compatibility (ie6,7 incompatible, you can use MHTML to solve)

The browser does not cache the picture (whether this is the case here I have doubts because it seems to be the first time to load slow)

Increase the size of the CSS file

Coding costs and maintenance (display is not intuitive, the current need to manually convert, I do not know about automatic replacement, such as Plug-ins)

Before have seen the evaluation said performance is weaker than Sprite, for a time can not find links

In combination, the data URI can be used in the

* Picture size is very small, using an HTTP request a bit wasteful, such as gradient background box

* Images are used on a wide scale and are rarely updated, such as loading