Image Base64 Encoding
Do you want to optimize your images and website performance? Looking for help these days, you still come across blogs that suggest image Base64 encoding. This is a common technique for compressing and transmitting data, as it takes less space than plain text and can be used in different contexts.
This article explains why the suggestion to encode in Base64 and include it directly in your HTML needs to be differentiated and is long outdated in most cases.
Web browsers used strict limits on the number of simultaneous connections they could send to the server. Therefore, a very image-heavy website had to join a queue of requests and wait until the previous ones had finished. With Base64, this problem could be circumvented by using an already open HTTP connection to deliver images embedded directly in HTML or CSS. This eliminated the need for an additional round trip that the browser required for each of the files.
HTTP/2 introduced multiplexing. Since then, web browsers have become incredibly efficient at transferring a vast number of files over a single connection. Most of the limitations that were solved by Base64 encoding have been bypassed. And indeed, today, there are a few nuanced reasons why Base64 should still be used. To understand this, it is necessary to know the basics about Base64.
What is Base64 encoding?
Base64 encoding is a way to encode binary data in ASCII text. It's primarily used to store or transfer images, audio files, and other media online. It is also often used when there are limitations on the characters that can be used in a filename for various reasons. For example, some operating systems limit filenames to 8 characters with no spaces or special characters. In these cases, Base64 encoded strings may be necessary since they always use only 26 letters from the English alphabet and ten digits from the Arabic numerals (0-9).
In the computer world, communication happens in binary (0's and 1's), but people typically communicate in much more complex forms of data, such as images, GIFs, and text. For that data to be transferred, it needs to be represented in a way that the computer can process. To start, let's discuss how binary data is typically transmitted over a website.
When you visit a website, your computer sends a request to the web server. This request contains information about your browser and what pages you have visited on the site. The web server responds by sending back the requested page (plus all of its associated files) as well as additional data that tells your browser how to display the page. All of this data is transferred in binary form, which is why you sometimes see the "Downloading" icon spinning when you're on a website.
When a developer runs a website, they want to present it to the end-user as quickly as possible. For this to happen, they need to reduce the page size as much as possible.
How Base64 encoding works
Base64 encoding takes each byte of binary data (a series of 0's and/or a series of 'on' and/or off" signals) and represents it with four characters. The reason for this is that there are exactly 64 combinations possible using the lowercase English alphabet, uppercase English alphabet, Arabic numerals from 0-to-n, plus some other symbols into account (periods, slashes).
Since there are only 26 letters in the English alphabet, a maximum of four binary bytes can be represented with three characters from the alphabet. This is where the '64' in Base64 encoding comes from - it can represent up to 64 different combinations using three out of six possible characters. For example, if you have a binary sequence of 01101010, it would be represented in Base64 encoding as "YWJj". Three out of those four are chosen randomly if the same series of bytes is sent through with four possible characters.
Things to consider when encoding images with Base64
Base64 encoding is most commonly used for compression and transmission of data, but it can also be useful for storing information or encoding text.
First, it is important to understand the different types of encoding. There are three main types: binary, text, and mixed. Binary encoding converts data into a series of zeros and ones, while text encoding replaces actual text in the data with a Base64 equivalent. Mixed encoding combines both of these approaches, which can be useful for compressing long strings of binary data that contain some ASCII characters.
Additionally, it is essential to consider how you will use your encoded string when deciding on an approach and choosing the appropriate encoding type. For example, if you plan to use the encoded string in a URL, you must use text encoding. If you send the data as part of an email, binary encoding is usually the best option.
If you do not encode the images properly or you do it with images that are already large, it will slow down your site. Due to how Base64 works, the images cannot be stored locally and will need to be fetched from a CDN, which puts a lot more pressure on the server. Sharing Base64 images is also harder because they are not accessible from the public domain.
When to avoid Base64 encoding
Especially if you want to store data as a file on your computer's hard drive or send it over a network, there are other options that have less of a performance penalty as well as require less disk space than Base64-encoded files.
File size
Image Base64 encoding is not the most efficient way to encode data when it comes to filing size. This is because the process always results in a 20%-25% increase in file size at least. For example, if you have a binary file that is 1000 bytes in size, after Base64 encoding, it will be 1250 bytes in size. This can be significant when storage space is at a premium or when transferring files over a network.
Compression methods
Another reason that Base64 encoding may not be the best option is that there are better compression methods for storing data as text files on storage devices. For example, ZIP and gzip can compress binary files into much smaller sizes than what Base64 encoding produces without any loss in the quality of the file itself due to the encoding process.
Transferring private information
Lastly, it is essential to remember that Base64 encoded data can be decoded back into its original form. This means that sending private information like credit card numbers or Social Security information in an email or other format where the sender and recipient of a message are known may result in some unintended consequences if this information is shared with someone else - particularly when using Base64 encoding for file compression purposes.
When to use Base64 encoding
Base64 is very versatile in technology, but you should try not to use it as part of your HTML or CSS files unless you have a very good reason.
Base64 is only useful for very small images. This is because when it comes to larger images, the encoded size of a picture in bytes will end up being much larger than JPEGs or PNG files. This can result in slow page load times and an increased amount of bandwidth usage for your site.
It is important that you encode any multimedia file before uploading it to a CDN or sharing it with others. This is because Base64 encoding helps to ensure that the file will be displayed correctly across all browsers, regardless of their settings. It is also useful for caching fonts on your site to speed up web page loading times.
Finally, Base64 encoding is helpful for compressing binary data and storing it as a text file. This can be beneficial when you need to store files locally on your computer or over the network - especially if those files are not going to be accessed by anyone other than yourself.
Final thoughts
Base64 encoding is a process that can be used to encode multimedia files into a format that can be viewed by all web browsers, regardless of their settings. However, there are many cases where image Base64 encoding will not be the best option due to its impact on file size, loading times, and compression methods. So if someone suggests you use Base64 to improve performance, you should take this with a grain of salt and carefully consider whether there are any real benefits for your use case. When in doubt, it is always best to consult with a professional who can help you decide on the best way to encode your data for your specific needs.