Base64 encoding knowledge, all in one article!

Nowadays, more and more websites use pictures to improve the browsing experience of users, and these pictures are usually stored and loaded in the form of Base64. Therefore, all developers must be familiar with Base64, so do you know what Base64 is, why use Base64, and the advantages and disadvantages of Base64?

What is Base64

Base64 is a common usage for binary data stored and transmitted over the network. One byte of Base64 can only represent 64 cases, and the first two bits of each byte in the encoding format can only be 0, and the remaining 6 bits are used to represent the content.

Seeing this, I believe everyone can also realize that this encoding format cannot make full use of storage resources and is less efficient. So why is it still a common usage in the network?

In fact, Base64 was first used in the mail transfer protocol. At that time, the mail transfer protocol only supported the transmission of ASCII characters, and used ASCII codes to represent all English characters, numbers and some symbols. There is a problem here, if only alphanumeric characters are transmitted in the mail, then ASCII can be directly supported. However, if you want to transfer pictures, videos and other resources in the file, there will be non-English numbers when these resources are converted into ASCII. And there are also many control characters in the mail, which in turn become invisible characters. Non-English characters and control characters are prone to errors during transmission, affecting the correct transmission of mail. For this reason, a new encoding rule was born. The binary is divided into groups of 3 bytes, and then the 3 bytes (24 bits) of each group are converted into 4 6 bits, and each 6 bits are based on the lookup table. Corresponding to an ASCII symbol, this is Base64.

Base64 index table

Base64 splits 8-bit byte data into 6-bit binary segments. Each 6-bit unit corresponds to a character in the Base64 index table. As a simple example, the ASCII code of M in the figure below is 77, and the first six binary bits after conversion to binary correspond to 19, which is T in the Base64 dictionary.

Of course, there will also be a problem here. If the binary data to be encoded is not a multiple of 3, there will be one or two bytes left. For this reason, Base64 uses 000000 byte value to make up at the end, so that the number of bytes can be divisible by 3, the complement is represented by =, and the number of = can indicate how many bytes are added, and it is automatically removed during decoding. Overall, the characters after Base64 encoding have increased by about 33% compared to before encoding.

Base64 encoding of the image

Earlier we also mentioned that Base64 encoding is the main way to load small pictures on websites. So how exactly does Base64 process pictures?

We all know that the use of images in web pages is usually in the form of an img tag, and the src attribute of the img tag specifies a resource on a remote server. When the web page loads in the browser, the browser sends a pull request to the server for each external resource. But this is very network resource-intensive, and because most browsers have a limit on the number of concurrent requests, if too many external requests are embedded in your web page, it is easy to cause the page to load too slowly.

And Base64 encoding can directly embed images into the page in the form of strings through Data URL technology, and become one with HTML. This avoids requests for external resources when loading

Why choose Data URL

As for why the Data URL technology is chosen, it has the following advantages compared with the traditional external resource reference method:

reduce HTTP requests;
Avoid cross-domain issues;
Can be used like a separate image, such as background image reuse, etc.

In this way, Base64 encoding can more quickly and conveniently optimize various front-end image resources. Let's look at a concrete example:

It can be clearly seen that Base64 encoding encodes a picture data into a string, and uses the string instead of the image address. Although at first glance it doesn't appear to have any image-related content, it ultimately renders a complete image without a doubt.

Of course, using Data URL for Base64 image encoding is not perfect. It has two disadvantages that cannot be ignored:

The volume of Base64 encoded data is usually 4/3 of the original data volume, that is, the image in the form of Data URL will be 1/3 larger than the image in binary format.
Images in the form of Data URLs will not be cached by the browser

Unable to be cached by browsers means that resources need to be re-requested every time they are accessed, which puts a lot of pressure on the server. Is there a way to put this data into the browser cache as well?

Speed up loading tips

In fact, the background image of most websites is composed of a small image with a width and height of only a few pixels, and it is tiled into a background image. Usually we save the small image in GIF or PNG format, and then refer to the image address in the background-image property of CSS. But the browser itself does not care what is written in the URL, it just needs to get the required data through it. So we can use CSS style files to store images in the form of Data URLs in CSS style sheets. In this way, the browser will cache CSS files and images, which can further improve page loading efficiency.

The above picture is a simple use case. In this way, it not only avoids making the background image generate an HTTP request by itself, but also allows the background image and CSS file to be cached by the browser, avoiding loading every time the webpage is opened. The situation of the background image makes the user's browsing experience faster and smoother.

The combination of Date URL technology and Base64 encoding can effectively reduce HTTP requests and make user access experience better. This is actually a little skill in our development process, and I hope it can bring you some help after reading it.