In - depth Understanding of Base64: Principles, Applications, and Front - end Practices

In front - end development, project optimization is a crucial aspect of improving performance. One common optimization strategy is to appropriately replace embedded small images with Base64 strings to reduce the number of HTTP requests on a page. Meanwhile, it's emphasized that these should be small images, usually with a size not exceeding a specific number of kilobytes. So, what exactly is Base64? And why can it play a role in front - end optimization? Let's explore in depth together.

Initial Understanding

You may not be unfamiliar with a string like this:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c......

Through this fixed format, we can represent an image, and the browser can recognize it and display the corresponding image completely. The above example shows an SVG - formatted image. In fact, we can also load images in any format supported by the browser. This string is generated based on Base64 encoding, and the long string of characters after base64, is the Base64 - encoded string.

How Base64 Came into Being

In the early days of the Internet's development, email was one of the most effective applications. However, in the early days, the SMTP transmission protocol for email could only be used to transmit 7 - bit ASCII codes. Since ASCII codes were designed based on the English language, it led to the inability to send resources such as text from non - English - speaking countries through this protocol. To solve this problem, the Multipurpose Internet Mail Extensions (MIME) emerged later. MIME added the main structure of emails and defined the encoding and transmission rules for non - ASCII codes, which is the origin of Base64. If you want to understand the knowledge of character encoding in depth, you can refer to the character encoding knowledge that needs to be understood in front - end development.

Basic Definition

Base64 is an encoding and decoding method that represents binary data based on 64 printable characters. Because of its encoding and decoding characteristics, its main function is not security, but to ensure that content can be transmitted error - free between various gateways. These 64 printable characters include 26 uppercase letters A - Z, 26 lowercase letters a - z, 10 digits 0 - 9, a total of 62 characters, plus two other characters + and /. Base64 is an index - based encoding, and each character corresponds to an index. The specific relationship diagram is as follows:

This is also the origin of the "64" in the name.

Encoding Method

Since 64 is equal to 2 to the power of 6, a Base64 character actually represents 6 binary bits (bit). However, in binary data, 1 byte corresponds to 8 bits (bit). Therefore, a string or binary data of 3 bytes (3 x 8 = 24 bits) can be exactly converted into 4 Base64 characters (4 x 6 = 24 bits). Why is it grouped in 3 - byte units? Because the least common multiple of 6 and 8 is 24, and 24 bits is exactly 3 bytes. The specific encoding method is as follows:

Take every 3 bytes as a group. Three bytes have a total of 24 binary bits.
Divide these 24 binary bits into 4 groups, with each group having 6 binary bits.
Add two 00s in front of each group of 6 binary bits to expand it to 32 binary bits, that is, four bytes.
Each byte corresponds to a number less than 64, which is the character number.
Then, according to the character index relationship table, each character number corresponds to a character, and the Base64 - encoded characters are obtained.

For example, the string two in the above figure is converted to obtain the corresponding encoding.

Volume Increase

When 3 characters are encoded through Base64 conversion, they finally become 4 characters. This is because each 6 - bit position is padded with 2 0s to become 8 - bit positions, corresponding to 1 byte. Here, it is exactly one - third more. So, under normal circumstances, the volume of Base64 - encoded data is usually one - third larger than the original data. This is why when optimizing images using Base64 encoding as mentioned earlier, it is necessary to emphasize that they are small icons. If all images are processed in this way, the static files will increase significantly, which is not appropriate.

The "=" Sign

Three English characters can be exactly converted into 4 Base64 characters. What if the character length is not a multiple of 3? What rules should be followed? In actual use of Base encoding, we often find the existence of a 65th character, which is the = symbol. This equal sign is a handling method for this special situation. For parts with less than 3 bytes, 0s are actually added at the end until there are 24 binary bits. However, it should be noted that when calculating the number of bytes, the total length is directly divided by 3. If the remainder is 1, a = is directly added at the end. If the remainder is 2, two =s are added. Therefore, the suffix equal sign that needs to be added to the transcoded string is either 1 or 2. The specific situation can be seen in the following figure:

In the second case in the figure, the single character d is used to distinguish the index 0 in the index character table. At this time, in the obtained encoding, there will be an A character corresponding to the index 0, and two =s are directly added.

Non - ASCII Characters

Since Base64 can only encode ASCII characters, for non - ASCII characters such as Japanese characters, the Japanese characters need to be converted into ASCII characters first and then encoded.

Encoding and Decoding Methods

btoa and atob

JavaScript provides two native methods for handling Base64 encoding: btoa() and atob().

btoa(): Converts a string or binary value into a Base64 - encoded string. It should be noted that the btoa method can only directly handle ASCII - code characters. For non - ASCII - code characters, it will report an error.
atob(): Decodes a Base64 - encoded string. If the string parameter passed to the atob method is not a valid Base64 encoding (such as non - ASCII characters) or its length is not a multiple of 4, it will report an error.

btoa('you') // 'eW91'
atob('eW91') // 'you'
btoa('馬鹿') // Uncaught DOMException: The string to be encoded contains characters outside of the Latin1 range.
atob('y') // Uncaught DOMException: The string to be decoded is not correctly encoded.

Handling Japanese Characters

Since btoa and atob only support encoding ASCII characters, that is, single - byte characters, and Japanese characters we usually encounter are 2 - 4 - byte characters. Therefore, Japanese characters can be first converted into UTF - 8 encoding, and the UTF - 8 encoding is regarded as a character, so that multiple single - byte characters can be encoded. For Japanese, two methods can be used: encodeURIComponent() and decodeURIComponent().

encodeURIComponent(): Encodes non - ACSII characters into UTF - 8.
decodeURIComponent(): Used for decoding.

The following is the way to encode and decode Japanese:

window.btoa(encodeURIComponent('馬鹿'))
// 'JUU5JUE2JUFDJUU5JUI5JUJG'
decodeURIComponent(window.atob('JUU5JUE2JUFDJUU5JUI5JUJG'))
// '馬鹿'

Third - Party Libraries

For example, js - base64. In front - end development, we can also use such third - party libraries to more conveniently handle Base64 - related operations.

Common Front - end Applications

Next, let's take a look at some common usage scenarios of Base64 encoding in front - end development. Most of the applications of Base64 in the front - end are for image processing, generally based on the DataURL method. A Data URL consists of four parts: a data: prefix, a MIME type (indicating the data type), a base64 flag (optional if it is text), and the data itself. The specific format is: data:[<mime type>][;base64],<data>. The fourth part <data> here, the data itself, is a Base64 string.

Small Image Transcoding

That is, the scenario of using Base64 to reduce the number of requests for image optimization mentioned at the beginning. It can be used under the img tag or in css:

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c......Ii8+PC9nPjwvc3ZnPg==">

.icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c......Ii8+PC9nPjwvc3ZnPg==);
}

When using Vue or React frameworks, we can also configure through url - loader to set the size of icons to be converted to Base64:

.loader('url - loader')
.tap(options => {
  options.limit = 10240 // 10kb
  return options
})

File Reading

In the Web environment, the FileReader API is provided to read the data of files. We can use its readAsDataURL() method to read the file data as a Base64 - encoded string data:

let reader = new FileReader()
reader.onload = () => {
  let base64Img = reader.result
};
reader.readAsDataURL(file)

This method is commonly used in image uploads.

Canvas Generating Images

Canvas is essentially a bitmap image. It provides a toDataURL() method to export the canvas as an image, and this image will be saved in Base64 - encoded format.

const dataUrl = canvasEl.toDataURL()
// data:image/png;base64,PHN2ZyB4bWxucz0iaHR0c......

Others

In addition to handling image display, Base64 - encoded strings can also be seen in special data transmission, simple encoding and encryption, code obfuscation, and some certificates.

Summary

Finally, let's summarize the characteristics of Base64:

Converts binary data into strings (ASCII codes) to facilitate data transmission.
Browsers can directly display Base64 - encoded images, reducing requests.
The encoded data will be at least one - third larger, and additional methods are needed to handle encoding and decoding.

By deeply understanding Base64, we can use it more rationally in front - end development, optimizing performance while better handling various data transmission and display requirements.