What are Base64 Images?
Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. So Base64 image is a string that represents the image as an ASCII string.
So, Is it a good idea to use the Base64 image in your blog/website?
In short NO. It may not have a direct impact SEO but go through the post and find out side-effect of using base64 inline images. Except for some cases where base64 string will be more suitable, such as icons, and single-page applications, which are not accessible by the search engine for ranking (in various specific scenario).
Using Base64 encoding for images may result in those images falling out of Google Image search, but the pages themselves are not likely to be negatively impacted.
Unfortunately, some blogs and plugins suggest using inline Base64 images for speed and performance. Base64 images are still long and may not give you excepted optimisation compared to the effort you place into replacing them in the first place.
Download size increase
Although Base64 is a relatively efficient method of encoding binary data, it will nonetheless increase the file size by more than 25% on average. This raises not just your bandwidth bill but also the download time.
The actual length of MIME-compliant Base64-encoded binary data is usually about 137% of the original data length, though for very short messages the overhead can be much higher due to the overhead of the headers. Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size + 814 bytes (for headers).
In other words, the size of the decoded data can be approximated with this formula:
bytes = (string_length(encoded_string) - 814) / 1.37
Source: http://en.wikipedia.org/wiki/Base64#MIME
Processing Overhead
Base64 images need to be processed by the CPU, which may increase the processing overhead for rendering your website. You can implement memcached to avoid such cases, but such thing will increase technical dept of your application without significant performance boosting. Also, If we look into the lighthouse chrome dev-tool it could impact First Contentful Paint (FCP).
Caching Issues
The most significant performance detriment, although possibly not the most visible at first glance. When a user visits your website, the browser will automatically cache the pictures locally and then load them directly from your disk when the user returns to the same page. Because of the way Base64 works, the browser is unable to keep the images locally, so it must always fetch them from your server or CDN, putting additional strain on your server and increasing your bandwidth bill.
Img tag vs. Base64 string
Considering the HTML pages containing 1800 one-pixel images, here is how it behaves.
The first page declares the images inline:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC">
In the second one, images reference an external file:
<img src="img/one-gray-px.png">
-
If it is specified inline, the browser makes a request for each picture (I assume it base64-decodes it once per image), whereas the image is requested once per document in the other case.
-
Actually, if you do this in a CSS file, it will still be cached. Of course, any changes to the CSS will invalidate the cache.
-–-
Image Source: Unsplash
