What is a Base64 encoded image?
Base64 is a binary-to-text encoding representing binary data in an ASCII string format. Base64 uses 64 different ASCII characters including uppercase letters A-Z, lowercase letters a-z, numeric characters 0-9, and the special symbols + and / to represent binary data in a string format.
A Base64 encoded image is the result of converting a binary image to a Base64 string. Base64 encoded images are commonly used in web development as inlined images embedded in HTML, CSS, and JavaScript files.
However, there are pros and cons of using Base64 encoded images, so make sure you're aware of them before deciding to use Base64 encoded images on your website especially in production.
What is the purpose of using Base64 encoded images instead of binary ones?
Base64 encoded images are simply in a string format, so they can be transferred to any medium that doesn't support binary data. You can store Base64 encoded images in database as strings or embed them directly in your code where binary data is not necessary for your use case.
The advantage of using Base64 encoded images is to reduce the number of HTTP requests to the server rather than making more requests specifically for the images themselves.
What are the cons of using Base64 encoded images?
In web development, it's common to convert images to Base64 to gain a benefit from reducing HTTP requests. However, the size of a Base64 encoded image is approximately 33% larger than that of the original, so it may not be practical to convert large images to Base64 encoded ones to use in production.
Additionally, when parsing Base64 encoded images to the original ones in binary, it adds CPU overhead to the process which is an unnecessary extra task.
How multiplexing in HTTP/2 affects the benefit of using Base64 encoded images
With the arrival of HTTP/2, the need of reducing HTTP requests is a lot less because multiplexing in HTTP/2 can handle multiple HTTP requests asynchronously in one single TCP connection.
Therefore, using Base64 encoded images instead of binary ones to improve the performance of your website is not the case anymore if you use a web server that supports HTTP/2.
When to actually use Base64 encoded images
Nowadays using Base64 encoded images seems to have a disadvantage over using binary ones considering the larger file sizes, CPU overhead, and the arrival of multiplexing in HTTP/2.
So in order to use Base64 encoded images wisely, it's recommended to use them for tiny images only, such as web icons unless you have a good reason not to.
How to embed a Base64 encoded image in HTML
You can embed a Base64 encoded image as an inlined image in HTML by placing a Base64 encoded image in the src attribute of an img tag.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfUlEQVQ4y62Tuw2AMAxEHykYgmUyBoMhsULWyBTpGASaoyAIiY9ANiddY+Xsc2zDBYqgEVRAc2Wpscgz1IEGkF44bG+v4vRBvDOdknyqfOPk6FlGxgD02NFTf9jqoDTbmGiNDpaAEwGYHPopANmRILvH+Mci/bLK7mOyn/MKWWcRP6LlO7oAAAAASUVORK5CYII=" alt="A blue circle">
How to embed a Base64 encoded image in CSS
You can embed a Base64 encoded image as a background of a CSS element, such as div by placing a Base64 encoded image in the url(...) value of the background property.
.red-circle {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfElEQVQ4y62Tuw2AMAxEHykYgmUyRgaLxApZgynSMUhojiZIfAWKOekaS2eff3CCwAtGQRaUylxjnicIBkEU6IVRMNyJ0wfxxnRI8rHyxcm+ZzXSOyDQjkCdcKuD3AkK0Dc6WBxGOGA26GcHTIYEk3mN9kP65ZTNz2R55xV6VBE/kxckQwAAAABJRU5ErkJggg==) no-repeat center; // A red circle
}
Can Base64 encoded images be cached?
No, Base64 encoded images themselves can't be cached on the browser unlike binary images which can be cached normally.
However, if they're embedded in an HTML, CSS, or JavaScript file, then they can be cached within the file, not the particular images, and they still have to be parsed every time the file is read.
Do Base64 encoded images affect a user's experience?
Using Base64 encoded images can help you reduce the number of HTTP requests compared with binary images, but the trade off is the significantly increased file sizes.
The user could feel slower for large images as Base64 encoded images still have to be parsed from a string format to binary data every time before they can see them. So it's not recommended to convert large sized images to Base64 encoded ones. Otherwise, it could negatively affect your users' experience inevitably.
Do Base64 encoded images affect SEO?
Search engines, such as Google and Bing do not index Base64 encoded images. As a result, your Base64 encoded images won't appear on search engines. However, pages using Base64 encoded images will not be affected from getting indexed.
So you can rest assured that using Base64 encoded images on your website won't negatively affect SEO.