Base64 URL image CSS & online base64 encryption/decryption Link: $ SVG path line width: stroke-width

Base64 URL Image CSS
The Data URI scheme is defined in the RFC2397
SVG path line width: stroke-width

Online Base64 encryption/decryption Link:

So what is this? This is the data URI scheme.

The data URI scheme is defined in RFC2397 to embed some small data directly into a Web page, eliminating the need to load it from an external file. For example, the above string of characters, is actually a small picture, the characters copied and pasted into the address bar of Firefox and go to, you can see it, a 1x36 lime png image.

In the data URI above, data represents the contract name to get the data, Image/png is the data type name, base64 is the data encoding method, and the comma is followed by the Image/png file Base64 encoded data.
Currently, the types supported by the Data URI scheme are:

Data:, Text
Data:text/plain, Text data
data:text/html,html Code
DATA:TEXT/HTML;BASE64,BASE64 encoded HTML code
DATA:TEXT/CSS,CSS Code
Data:text/css;base64,base64 coded CSS Code
Data:text/javascript,javascript Code
DATA:TEXT/JAVASCRIPT;BASE64,BASE64 encoded JavaScript code
DATA:IMAGE/GIF;BASE64,BASE64 encoded GIF image data
DATA:IMAGE/PNG;BASE64,BASE64 encoded PNG image data
DATA:IMAGE/JPEG;BASE64,BASE64 encoded JPEG image data
DATA:IMAGE/X-ICON;BASE64,BASE64 encoded icon image data

Base64 simply, it translates some 8-bit data into standard ASCII characters, and there are many free base64 encoding and decoding tools on the Web that can be encoded in PHP with function Base64_encode (), such as

echo base64_encode(file_get_contents(‘wg.png’));

Currently, IE8, Firfox, Chrome, and opera browsers support this small file embedding.
An example of a picture:
A picture in a webpage can be displayed like this:

You can also display this:

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEU gAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZS BJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR 0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1C KSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjz MVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

We write the contents of the image file directly in the HTML file, and the advantage is that it saves an HTTP request. The downside is that the browser doesn't cache this image. We can make a free choice according to the actual situation.

X

• The use of path data:image/png;base64 in CSS
• Tips:base64:URL background image and Web page performance optimization

X

<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />

Base64 URL image CSS & online base64 encryption/decryption Link: SVG path line width: stroke-width