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. 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. The algorithm used by atob() and btoa() is specified in RFC 4648, section 4.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.
0 Comments
Leave a Reply. |