#Change header using base64 encoding download#

When to actually use Base64?Д«ase64 has a lot of uses in technology, but unless you have a very good reason, you should try to avoid using it as part of your HTML or CSS files. This means that web crawlers and your users are unable to get links pointing back to your website, which makes sharing content much harder and can potentially hurt your 'page rank' as well. The reason for this is that sharing Base64 images is much harder due to the fact that they are not actually accessible via a public URL. By using Base64 encoded images on your website, you might also be hurting both your SEO and user experience as well. The issues are actually not only limited to performance. Due to how Base64 works, the browser is unable to store the images locally so it will always need to fetch them from your server or CDN which creates extra load on your server as well as increases your bandwidth bill.ДЄnother issue here is that if your images are embedded in your HTML code, content delivery networks such as BunnењњDN are not able to cache the files and they will always be returned from your origin server which might be thousands of kilometers away. When a user accesses your website, the browser will automatically cache the images locally and then load them directly from your disk when visiting the same page again. The third issue is perhaps the biggest performance killer, but perhaps not the most obvious at first glance. Base64 is very efficient, but count in the GZip or Brotli processing time that happens on the server to compress the response and the milliseconds quickly start adding up.

When delivering images in Base64, the browser first needs to decode the Base64 encoded strings and then decode the images as well, which introduces an extra layer of unnecessary work.

#Change header using base64 encoding download#

This not only increases your bandwidth bill, but also increases the download time.

Download size increaseДЄlthough Base64 is a relatively efficient way of encoding binary data it will, on average still increase the file size for more than 25%. While compression actually compresses data, encoding just defines a way how data is encoded, which brings us to the first issue. One must be careful to not mix up compression with encoding. This is useful when the storage or delivery medium does not support binary data such as when embedding an image into a database, CSS files or HTML. To put it simply, Base64 is an encoding schema used for representing binary data in a text format. To get to the answer why, we first need to establish what Base64 actually is. This works around most limits that the Base64 encoding solved and in fact means Base64 now does more bad than good. With the introduction of multiplexing that arrived with HTTP/2, web browsers have become incredibly efficient in delivering hundreds of files through a single connection. This effectively removed the need for an extra roundtrip the browser would need for each of the files. Base64 provided a way of working around that by using an already open HTTP connection to deliver images embedded directly into the HTML or CSS. This meant an image heavy website would need to queue up requests and wait for the ones before to finish. Back then, web browsers had heavy limits on the number of concurrent connections they could send to the server. In this post, I want to address why in this day and age, this is almost always a very bad idea that has been carried over from years ago. Unfortunately, even to this day, some optimization plugins and blogs suggest 'optimizing' your images by encoding them to Base64 and including that straight into your HTML.