Base64 Encoder / Decoder
Encode text or any file to base64, generate data URIs for embedding in CSS or HTML, and decode base64 back to text or a downloadable file.
About Base64 Encoding
Base64 is a binary-to-text encoding scheme that converts arbitrary binary data into a string of ASCII characters. It's widely used in web development to embed binary assets (images, fonts, SVGs) directly inside text-based files like HTML, CSS, and JSON — eliminating the need for a separate HTTP request.
Use Cases
Inline images in CSS
Embed small icons and backgrounds directly in your stylesheet to eliminate render-blocking requests.
background: url(data:image/svg+xml;base64,...);
Inline fonts
Embed a font file in a @font-face declaration to ship it with your CSS, avoiding FOUT.
src: url(data:font/woff2;base64,...);
API payloads
JSON cannot carry binary data natively. Base64-encoding binary fields lets you send images or files inside a JSON request body.
HTML email
Email clients often block remote image requests. Embedding images as data URIs ensures they always display.
Data URI Format
For example: data:image/png;base64,iVBORw0KGgo.... Toggle "Data URI" in the encoder to include the header automatically.
When NOT to use base64
Base64 increases file size by ~33%. For large assets (>5KB), serving them as separate files is usually faster — they can be cached independently by the browser, whereas an inline data URI re-downloads with every page load. Use base64 for small, frequently-used assets like icons and small decorative images.