What is base64 encoding and how is it used in web development?

Base64 is a method of encoding binary data into a textual representation of the data that can easily be shared.

For example, running the following image through the encoding process results in the text that follows:

In reality, this is a truncated version of the text. The actual output was significantly longer, but it should still give you an idea of the result.

Here are a few ways it’s used in web development:

Authentication systems

Authentication schemes will often use base64 encoding as some part of the overall system. For example, basic authentication involves concatenating the username and password with a colon (:), base64 encoding the value, and sending it with a web request in the Authorization HTTP header.

Even JWT authentication uses base64 encoding on the various segments of the token. For more information on how base64 encoding is used with JWT auth, check out my recent article showing how to decode a JWT.

File uploads/transfer

Before files and large objects are transferred over the web, they are often converted to text using base64 encoding. A file picker on a web form will encode the file and submit to the server in an HTTP POST request.

Storing files

In some situations, storing data as text using base64 encoding is ideal. If you wanted to store data in XML or in a database table with a limited character set, you’d encode the file before storing it.

Embedding images into web pages

Data URLs are specially crafted URLs that are designed to store and render binary data. Web browsers understand these special URLs and can render them as if you passed in a file path. This is possible both directly in the HTML, as well as in CSS.

It’s not for storing secure data

Base64 is easily reversible and should not be used for securing sensitive data. Kubernetes stores secrets in base64 encryption, but that's really only to hide it from someone looking over the shoulder of the person working on it.