Introduction to using data URI scheme to embed images in web pages

The data URI scheme allows us to include data in a web page using inline code, which can be used in Html, CSS, Javascript, etc.

The data URI scheme is often used to embed images into web pages, as follows:
<img alt="He Chongtian's headshot (your browser does not support the data URI scheme, the image cannot be displayed)" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBcQFxAAD/2wBD/*A lot of data is omitted here*/NONPmfvcqcdZR7XT27n//2Q%3D%3D"/>

The data URI scheme has the following format:
data:[<MIME-type>][;base64],<data>

This format is relatively simple. By comparison, we can see that the above img is a jpg image encoded using base64.
Embed this img into this page and it will be displayed as follows:
He Chongtian's headshot (your browser does not support the data URI scheme, the image cannot be displayed

In addition to base64 encoding, you can also use hexadecimal URL encoding in the form of %xx, as follows:
: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

Generate image data According to the above format, we can write a small program to generate it, but we don’t need to be so troublesome. There are many websites that provide this (free) service.

Here are a few:

1. http://dataurl.sveinbjorn.org/dataurlmaker

Provide preview and easy copying.

2. http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

Provides preview and can generate corresponding CSS URI data.

3. http://software.hixie.ch/utilities/cgi/data/data

Tip: The generation is not limited to image data. There are three ways to use it (see 1, 2, 3 in the figure below). You can specify the encoding method, but the interface is not friendly.