Base64 编码知识，一文打尽！
With the increasing use of images on websites to enhance user browsing experience, many images are stored and loaded in Base64 format. As a result, developers are likely familiar with Base64 encoding. But do you know what Base64 is, why it's used, or its advantages and disadvantages?
What is Base64?
Base64 is a common method for encoding binary data in the internet. Each byte can represent 64 possible values, with the first two bits always being 0. The remaining six bits represent the actual content.
As shown, this encoding method is not efficient in utilizing storage resources. So why is it still widely used?
Actually, Base64 was originally designed for email transmission. At that time, email protocols only supported ASCII characters, which were used to represent English letters, numbers, and symbols. However, when transmitting images or videos, the binary data would be converted into ASCII, leading to non-English characters. Additionally, many control characters in emails could become invisible. These non-English characters and control characters are prone to errors during transmission, which is why Base64 was developed to encode binary data in groups of three bytes, converting each group of three bytes (24 bits) into four 6-bit segments, with each 6 bits mapped to an ASCII character. This is the essence of Base64.
Base64 splits 8-bit binary data into 6-bit segments. Each 6-bit segment corresponds to a character in the Base64 index table. For example, the ASCII code for 'M' is 77, and the first six bits represent 19 in binary, which corresponds to the character 'T' in the Base64 index table.
However, there is a problem: if the binary data to be encoded is not a multiple of 3, it will result in leftover bytes. To address this, Base64 appends a padding byte (000000) at the end to make the total byte count divisible by 3. The number of '=' symbols indicates the number of padding bytes added. During decoding, these padding bytes are automatically removed. Overall, Base64 encoding increases the number of characters by approximately 33% compared to the original data.
Base64 Encoding for Images
As mentioned earlier, Base64 encoding is the primary method for loading small images on websites. How does Base64 actually process images?
We know that images on web pages are typically loaded using the tag, and the src attribute specifies a resource on a remote server. When the page is loaded into the browser, the browser sends a request for each external resource. However, this is very resource-intensive, and most browsers have a limit on the number of concurrent requests. If your page contains too many external requests, the page loading speed may slow down significantly.
Base64 encoding can use the Data URL technique to embed images directly into the page as strings, merging them with HTML. This allows the image to be loaded without making an external resource request.
Why choose Data URL?
The reason for choosing Data URL technology is that it offers the following advantages compared to traditional external resource references:
Reduce HTTP requests;
Avoid cross-origin issues;
Can be used like a single image, such as repeating background images.
Through this method, Base64 encoding can more efficiently optimize various front-end image resources. Let's take a specific example:
Clearly, Base64 encoding converts an image into a string of characters and replaces the image address. Although it appears to have no image-related content, it ultimately renders a complete image effect.
Of course, using Data URL for Base64 image encoding is not perfect. It has two significant drawbacks:
The data size of Base64 encoded images is typically 4/3 of the original data size, meaning Data URL-formatted images are 1/3 larger than binary format images.
Data URL-formatted images are not cached by the browser.
The lack of browser caching means each visit requires re-requests, which places a significant load on the server. But is there a way to also cache these data in the browser?
Fast Loading Tips
Most websites' background images are composed of small images with only a few pixels in width and height. They are usually saved as GIF or PNG formats and referenced in the CSS background-image property. However, the browser doesn't care about the URL content, only about the data it needs to retrieve.
We can fully use CSS style files to store Data URL-formatted images in CSS style tables. This way, the browser will cache the CSS file and the image, further improving page loading efficiency.
The above image is a simple use case. By using this method, it avoids making a single HTTP request for the background image and allows the background image and CSS file to be cached together, preventing the need to load the background image each time a page is opened, thereby improving user experience more smoothly.
By combining Data URL technology with Base64 encoding, it effectively reduces HTTP requests, improving user experience. This is actually a small tip in our development process. We hope this translation and refinement bring you some helpful insights.
