Base64 encoding
Also known as: base64, base64 encode, data URI, base64 image
Base64 is a way to represent binary data — like an image or file — using only printable text characters. It lets you embed a file directly inside HTML, CSS, or JSON as a data URI, at the cost of making the data about a third larger than the original.
- Represents binary data as printable text
- Lets you embed files as data URIs in HTML/CSS
- Adds roughly 33% size; it is encoding, not encryption
What Base64 is for
Base64 converts raw bytes into a string of 64 safe characters (A–Z, a–z, 0–9, plus `+` and `/`). This lets binary content travel through text-only channels — embedded in HTML/CSS as a data URI, carried inside JSON, or attached to email — without being corrupted.
A common use is inlining a small image with a `data:image/png;base64,...` URL so it loads with the page and saves a separate network request. It is encoding, not encryption: anyone can decode it back to the original, so it offers no security.
The size trade-off
Base64 makes data roughly 33% larger than the original binary, because it stores 3 bytes using 4 characters. That overhead is fine for tiny assets like icons but wasteful for large images.
Inline small images and SVGs where saving a request matters; serve larger files normally so the browser can cache them and you avoid bloating your HTML or CSS.