Base64 Encoding
Definition
Base64 takes arbitrary bytes and rewrites them using A to Z, a to z, 0 to 9, plus and slash, with the equals sign as padding at the end. Three bytes of input become four characters of output, because each character carries six bits. That is where the familiar 33 per cent size increase comes from. It exists because several parts of the internet were built for text and mishandle raw bytes — email attachments, JSON payloads, and the inside of an HTML file. It is an encoding, not a cipher: anyone can decode it in one line, so a base64 string is never a way to hide a password. In the browser, btoa encodes and atob decodes, though both work on binary strings and need care with anything beyond Latin-1.
Why It Matters
The size penalty is the number to keep in your head. A 300 KB logo becomes roughly 400 KB of characters, and unlike a separate file it is downloaded again on every page view because it cannot be cached on its own. Compression claws some of it back — gzip or Brotli handles base64 text reasonably well — but you are still ahead by shipping the original bytes when the file is big. The other consequence is readability. A generated page with three inlined photographs is one long unreadable line, awkward to edit and slow to open in an editor. Under about 4 KB the saved request is usually worth it; above that, upload the file separately.
How It Works
The encoder reads the input three bytes at a time, splits those 24 bits into four groups of six, and maps each group to a character. When the input length is not divisible by three, one or two equals signs pad the final group. The output is then dropped into whatever text container needs it — most often after the base64 marker in a data URI, but also in a JSON field or an email body. Plus and slash are awkward in URLs, so a variant called base64url swaps them for minus and underscore and drops the padding; API tokens and JWTs use that variant. Decoding reverses the process exactly, byte for byte, with no loss.
Real-World Example
Someone publishing a press kit at brand-kit.99helpers.site inlines the company mark, a 3 KB SVG, as base64 inside the HTML and uploads the two 1.2 MB photographs as separate files. Had they inlined the photographs too, the single page would have grown to about 3.3 MB and every visitor would have re-downloaded all of it on each visit. As separate files on 99helpers they are cached at the edge and fetched once.
Common Mistakes
- ✕Treating base64 as security — it is a reversible encoding and any browser console decodes it instantly
- ✕Inlining megabyte images and being surprised the page is a third larger than the originals
- ✕Passing standard base64 in a URL or filename, where the plus and slash characters get mangled — base64url exists for that
- ✕Calling btoa on a string with accented or non-Latin characters, which throws rather than encoding it
Related Terms
Data URI
A URL that carries the file's contents inside itself rather than pointing at a location. It starts with data: and is how an image or font gets embedded directly in an HTML or CSS file.
Inline CSS
CSS written inside the HTML document rather than in a separate .css file — either in a style element in the head or in a style attribute on a single element. It removes a network request and keeps everything in one file.
URL Encoding
URL encoding replaces characters that are unsafe or reserved in a web address with a percent sign and two hex digits, so a space becomes %20. It is why a filename with spaces or accents can break a link.
Gzip Compression
Gzip compression shrinks a response before it leaves the server and the browser expands it again on arrival. It is lossless, it has been supported by every browser for decades, and it typically cuts text files to a third of their original size.
Web Asset
A web asset is any supporting file a page pulls in once the HTML has arrived — stylesheets, scripts, images, fonts, icons, videos. The HTML is the page; the assets are everything it asks for next.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →