The url value of the src or css background image is the base64 encoded code

You may have noticed that the src or CSS background image URLs of some images on the web are followed by a long string of characters, such as: data:image/png;base64, iVBORw0KGgoAAAANSUhEUgnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D. So what is this? This is the Data URI scheme.

The Data URI scheme is defined in RFC2397. Its purpose is to embed some small data directly into a web page without having to load it from an external file. For example, the string of characters above is actually a small picture. Copy and paste these characters into the address bar of Firefox and go to it, then you can see it, a 1X36 white and gray png picture.

In the above Data URI, data represents the protocol name for obtaining data, image/png is the data type name, base64 is the data encoding method, and the data after the comma is the base64-encoded data of the image/png file.

Currently, the Data URI scheme supports the following types:
data: text data
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-encoded 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

Simply put, base64 translates some 8-bit data into standard ASCII characters. There are many free base64 encoding and decoding tools on the Internet. In PHP, you can use the base64_encode() function to encode, such as echo base64_encode(file_get_contents('wg.png'));
Currently, IE8, Firfox, Chrome, and Opera browsers all support this type of small file embedding.

Take an example of a picture:

A picture on a web page can be displayed like this:
<img src="upload/2022/web/wg.png"/>
It can also be displayed like this:

Copy code

The code is as follows:

We write the content of the image file directly into the HTML file. The advantage of this is that it saves an HTTP request. The downside is that the browser will not cache such images. You can make free choices based on the actual situation.

<<: How to modify Flash SWF files in web pages

>>: MySQL statement to get all dates or months in a specified time period (without setting stored procedures or adding tables)

The url value of the src or css background image is the base64 encoded code

Mysql optimization tool (recommended)

Using NTP for Time Synchronization in Ubuntu

How to start multiple MySQL instances in CentOS 7.0 (mysql-5.7.21)

MySQL Flush-List and dirty page flushing mechanism

Detailed explanation of the use of HTML canvas and page storage technology in JavaScript

A brief analysis of adding listener events when value changes in html input

CSS -webkit-box-orient: vertical property lost after compilation

Solution to the problem of stuck when clicking Select All in Element's shuttle box with large amount of data

How to implement mysql database backup in golang

How to use MySQL common functions to process JSON

Recommend

Talking about the practical application of html mailto (email)

Implementation of crawler Scrapy image created by dockerfile based on alpine

How to remove the dotted border when clicking a link in FireFox

10 issues that must be considered when designing and building large-scale website architecture

TypeScript decorator definition

Detailed explanation of the group by statement in MySQL database group query

Slot arrangement and usage analysis in Vue

Linux implements automatic and scheduled backup of MySQL database every day

setup+ref+reactive implements vue3 responsiveness

Detailed explanation of the wonderful CSS attribute MASK

Zen coding resource update function enhancement

Javascript uses the integrity attribute for security verification

Basic knowledge of website design: newbies please read this

Example code for converting html table data to Json format

Detailed process of NTP server configuration under Linux