Web Content & Formats
What is Base64?
A binary-to-text encoding that represents arbitrary bytes as ASCII characters using a 64-character alphabet, used to embed binary data in text formats.
Base64 takes three bytes of input (24 bits) and encodes them as four 6-bit characters from the alphabet A-Z a-z 0-9 + / (with = for padding). The output is roughly 33% larger than the input, but it is pure ASCII, so it survives any text channel: JSON, XML, email bodies, URLs (with the URL-safe variant), HTTP headers.
Common uses: embedding small images directly in CSS or HTML as data:image/png;base64,... URIs, sending binary blobs in JSON APIs, encoding credentials in Authorization: Basic headers, encoding JWT payloads. Despite frequent misuse, base64 is not encryption; anyone who reads the string can decode it back to the original bytes.
For brand and crawling work, base64 shows up most often as inline images or fonts in HTML and CSS. A favicon is sometimes a data: URI. Logos are sometimes inlined to avoid an extra HTTP round trip. Decoding those is one line of code in any language and recovers the underlying PNG, SVG, or WOFF.
In the wild
- →
data:image/svg+xml;base64,PHN2Zy...inlining an SVG logo in an HTML page - →An
Authorization: Basic dXNlcjpwYXNzheader carrying base64-encodeduser:pass - →A JSON API field containing a base64-encoded PDF for an "attachment" field
How Brand.dev uses base64
Endpoints in the Brand.dev API where this concept comes up directly.
FAQ
Is base64 encryption?
No. It is encoding, fully reversible without a key. Anything sensitive needs to be encrypted before being base64-encoded for transport.
Why does base64 add ~33% to the size?
It encodes 6 bits of input per 8-bit output character. So 3 input bytes (24 bits) become 4 output characters (32 bits), a 4/3 ratio.
When should I inline an image as base64 vs serve it as a file?
Inline tiny assets (icons, decorative SVGs under a few KB) to avoid round trips. Serve everything else as files so the browser can cache, and so the CSS or HTML stays parseable.
Related terms
JavaScript Object Notation, a lightweight text format for representing structured data, supported natively by every modern language.
The application protocol the web is built on, a simple request/response format for asking a server for a resource.
A secret string that identifies and authenticates a client when calling an API, usually passed in a header on each request.
A JSON Web Token, a compact, signed piece of JSON used to convey claims (who the user is, what they can do) between systems.
Scalable Vector Graphics, an XML-based image format that describes shapes mathematically, so the image is sharp at any resolution.