Understanding MIME Types and Base64

Base64 is completely blind to file types. If you feed it an image, a PDF, or a plain text document, the Base64 algorithm simply takes the binary bytes and turns them into text. The resulting string has no memory of what it originally was.

To solve this, protocols rely on MIME Types (Multipurpose Internet Mail Extensions) to declare the format of the data before or alongside the Base64 string.

What is a MIME Type?

A MIME type is a standard identifier used on the internet to indicate the nature and format of a file. It consists of a type and a subtype, separated by a slash (/).

Common examples include:

• image/png
• image/jpeg
• application/pdf
• audio/mpeg
• text/html

MIME Types in Data URIs

The most common place developers encounter MIME types mixed with Base64 is inside a Data URI. A Data URI allows you to embed a file inline in HTML or CSS, instead of linking to an external file.

The standard syntax for a Data URI is:

data:[<mediatype>][;base64],<data>

For example, if you wanted to embed a tiny red dot PNG image, it would look like this:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Notice the prefix: data:image/png;base64,

• data: tells the browser this is an inline file.
• image/png is the MIME Type telling the browser how to render the following data.
• ;base64, indicates that the data that follows is encoded using Base64.

MIME Types in Email Attachments

The original purpose of MIME types was, as the name suggests, for email. The SMTP (Simple Mail Transfer Protocol) was designed strictly for 7-bit ASCII text.

To send an image or PDF attachment via email, the email client uses MIME to define boundaries. It declares the MIME type, declares that the transfer encoding is Base64, and then dumps the Base64 string into the email body.

Content-Type: image/jpeg; name="photo.jpg"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="photo.jpg"

/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAP...

How to Find the MIME Type of a Base64 String

If you have a raw Base64 string (without the Data URI prefix) and you don't know what kind of file it represents, you can often figure it out by looking at the very first few characters. These characters correspond to the file's magic number (file signature).

• JVBERi0 usually indicates a PDF (application/pdf)
• /9j/ usually indicates a JPEG (image/jpeg)
• iVBORw0KGgo usually indicates a PNG (image/png)
• R0lGOD usually indicates a GIF (image/gif)