/tutorials/where-base64-shows-up
Where Base64 Shows Up in Everyday Development
The places Base64 encoding turns up without anyone necessarily noticing, from image files embedded in a page to tokens passed around by an API.
5 min read
Run Base64 EncoderRelated tools
Data URIs embedded directly in a page
An image embedded directly as a data URI
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
A data URI lets an image, font or other file be embedded directly inside HTML or CSS as Base64 encoded text, rather than requiring the browser to make a separate request to fetch it. This is useful for small icons where saving a separate network request outweighs the roughly one third increase in size that Base64 encoding always adds, though it is a poor fit for large images, where that size increase and the loss of independent caching stop being worth it.
Email attachments
Email was originally built to carry plain text, and attachments needed a way to travel through that same infrastructure without being corrupted. Every attachment in an email is Base64 encoded behind the scenes before being sent, then decoded automatically by the receiving mail client, entirely invisibly to whoever is reading the message.
API tokens and basic authentication
HTTP Basic Authentication sends a username and password joined by a colon, Base64 encoded, in the authorization header of a request. This is exactly why Basic Authentication must always be used over HTTPS: the encoding is instantly reversible by anyone who intercepts it, providing no protection on its own whatsoever. Some API tokens and session identifiers are also Base64 encoded, typically to safely pack structured binary data, such as a JSON payload in a JWT, into a format that survives being placed in a URL or an HTTP header without corruption.
Storing binary data in text only fields
Some databases, configuration formats and APIs only accept plain text values and have no separate concept of binary data. Base64 encoding a file lets it be stored or transmitted as a normal string in exactly those situations, at the cost of the roughly one third size increase that comes with any Base64 encoded data.
Recognising Base64 when you see it
A string made up only of letters, digits, plus signs and forward slashes, usually padded with one or two equals signs at the end and a length that is always a multiple of four, is very likely Base64. The Base64 Encoder's decode mode will confirm it immediately and reveal the original content behind it.
Related tutorials