The most common application of converting images to Base64 encoding is that some images in web pages can be converted to Base64 encoding so that the images can be loaded before the content when the network speed is poor and the number of HTTP requests can be reduced to reduce the burden on the web server.

Converting images to Base64 has two major benefits

1. Main: Reduced HTTP requests

Our website uses HTTP protocol, and HTTP protocol is a stateless link, that is, the connection and transmission will be disconnected to save resources. At this time, the solution is to reduce HTTP requests as far as possible. At this time, Base64 encoding can add images to CSS, realizing the request CSS can download the images, reducing the request for images in this request. Of course, there are many ways to reduce the number of HTTP requests, such as CSS Sprite technology, small images in a web page together in a large image, download only need a complete HTTP request can reduce the number of requests.

2. Pre-load the app with images

Using base64 encoded CSS images, CSS is referenced in the HTML header and is loaded before the following content, so when the network speed is not good, it will appear to load base64 images first.

Converting images to Base64 has two major disadvantages

Using Base64 does not represent performance optimization The advantage of using Base64 is to reduce the NUMBER of HTTP requests for an image, but at the same time, the cost of CSS file size increases. The size of the CSS file directly affects rendering, causing the user to stare at a blank screen for a long time. HTML and CSS block rendering, but images do not.

Base64 is mixed with CSS, greatly increasing the amount of time browsers need to parse the CSS tree. The process of parsing a CSS tree can be very fast, ranging from tens of milliseconds to a few milliseconds.

The image is converted to Base64 to see whether the size has increased or decreased

Base64 encoding requires the conversion of three 8-bit bytes (38=24) into four 6-bit bytes (46=24), followed by two zeros to form an 8-bit one-byte format. If there are less than three bytes left, it is padded with zeros and the output character is’ = ‘, so one or two ‘=’ may appear at the end of the encoded output text