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)

Detailed explanation of the implementation process of dual-master synchronization of partial tables in MySQL 5.7

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

Detailed explanation of the implementation process of dual-master synchronization of partial tables in MySQL 5.7

Tomcat Server Getting Started Super Detailed Tutorial

About the problem of dynamic splicing src image address of img in Vue

Detailed explanation of scp and sftp commands under Linux

DIV and image horizontal and vertical centering compatible with multiple browsers

MySQL implements enterprise-level log management, backup and recovery practical tutorial

Web Design: Web Music Implementation Techniques

Detailed explanation of Nginx proxy_redirect usage

How to create a basic image of the Python runtime environment using Docker

Detailed explanation of the difference between Mysql temporary table and partition table

Recommend

A few steps to easily build a Windows SSH server

Install Python 3.6 on Linux and avoid pitfalls

Some problems you may encounter when installing MySQL

MySQL 8.0.11 installation summary tutorial diagram

How to make vue long list load quickly

MySQL uses UNIQUE to implement non-duplicate data insertion

MySQL 5.7.21 decompression version installation Navicat database operation tool installation

Reasons and solutions for MySQL selecting the wrong index

Design Theory: Hierarchy in Design

Web page printing thin line table + page printing ultimate strategy

Design Reference Beautiful and Original Blog Design

Linux kernel device driver kernel debugging technical notes collation

MySQL series 6 users and authorization

(MariaDB) Comprehensive explanation of MySQL data types and storage mechanisms

How to view nginx configuration file path and resource file path