Image to Base64

Converting an image to base64 (data image base64) is sometimes necessary to reduce the number of HTTP requests to the server. This is a good way to display icons on a website. In this case, the body of the image can be placed in the HTML code of the page or in the CSS file, where instead of SRC or URL, you insert the base64 code.

However, you should understand that the base64 code is approximately 33% larger than the file itself, so it is not recommended to display large images in this way.

But if base64 is used for icons or small images, in some cases, in addition to reducing server requests, you can also win in the final page weight. This is because the server, in addition to the image itself, also sends HTTP headers, which also have weight and add up to the weight of the image. And for an icon, it may turn out that the sum of its weight and headers will be greater than the weight of the base64.

Base64 is a standard for encoding binary data using 64 ASCII characters. The encoding alphabet contains alphanumeric Latin characters A-Z, a-z, and 0-9 (62 characters) and 2 additional symbols, depending on the implementation system. Every 3 original bytes are encoded by 4 characters, leading to a 33% increase in data size.