Base64 ↔ Image
Convert Base64 strings to images, or upload images to get their Base64 representation. Everything runs in your browser.
📖 How to Use
To decode: paste a Base64 string and the image preview appears instantly — download it in any format. To encode: upload an image and copy the Base64 string for use in HTML, CSS, or APIs.
What is Base64 Encoding?
Base64 is a method of encoding binary data (like images) as plain ASCII text. It converts every 3 bytes of binary data into 4 printable characters, making it safe to embed in HTML, CSS, JSON, XML, and email.
When you see a long string starting with data:image/png;base64,iVBOR... in source code, that's a Base64-encoded image. The browser decodes it back into the original image on the fly.
The trade-off is size — Base64 encoding increases the data size by about 33%. A 100KB image becomes roughly 133KB as Base64 text. For small icons and logos, the benefit of eliminating an HTTP request often outweighs the size increase.
Common Use Cases
Embedding in HTML/CSS
Small icons and logos can be embedded directly in HTML or CSS, eliminating extra HTTP requests and improving page load speed.
API Payloads
Many REST APIs accept images as Base64 strings in JSON payloads, avoiding multipart form uploads and simplifying integration.
Email Templates
Embed images directly in HTML email templates so they display without requiring external hosting or image loading permissions.
Debugging
When you encounter a Base64 string in logs, API responses, or source code, paste it here to instantly see what image it represents.
When to Use Base64 Images (And When Not To)
Ideal Use Cases
Base64 encoding shines for small assets under 10KB, such as UI icons, tiny logos, or single-pixel tracking images. It is also excellent for HTML email templates, where externally hosted images are often blocked by email clients. Embedding small images as CSS background-image data URIs eliminates an HTTP round-trip and can improve perceived load time. Single-use images that appear only once in your codebase are also good candidates, since there is no caching benefit to lose.
When to Avoid Base64
Avoid Base64 for images larger than 10KB. The 33% size overhead becomes significant for photos and complex graphics, and the encoded string bloats your HTML or CSS file. Images that appear on multiple pages should be served as regular files so the browser can cache them independently. SEO-important images — hero photos, product shots, infographics — should use standard <img> tags with descriptive alt text and proper file names, since search engines cannot index Base64-embedded images.
Performance Considerations
Inline Base64 images are render-blocking — the browser must parse the entire encoded string before it can display the page. Unlike external images, inline data URIs cannot be lazy-loaded natively with the loading="lazy" attribute. Large Base64 strings also increase the main document size, slowing down the initial HTML download and parsing time. For performance-critical pages, benchmark both approaches and measure your Core Web Vitals scores.
Alternative Approaches
Before reaching for Base64, consider alternatives. CSS sprites combine multiple icons into a single image file, reducing HTTP requests while remaining cacheable. Inline SVGs are often smaller than Base64-encoded PNGs for simple icons and scale perfectly to any resolution. Icon fonts like Font Awesome provide hundreds of scalable vector icons with minimal overhead. For modern web apps, SVG sprites or a dedicated icon component library may offer the best balance of performance and developer experience.
Security Considerations
Accepting user-supplied Base64 strings introduces security risks. A malicious string could contain JavaScript in a data: URI, leading to cross-site scripting (XSS) attacks if rendered without sanitization. Always validate that the decoded content is a genuine image before displaying it. Content Security Policy (CSP) headers can restrict data: URIs to specific contexts. If your application processes user-uploaded Base64 images, validate the MIME type, enforce size limits, and consider re-encoding the image server-side to strip any embedded payloads.
Frequently Asked Questions
Does Base64 encoding change image quality?
No. Base64 is a lossless encoding — the decoded image is bit-for-bit identical to the original. It's just a different way of representing the same binary data as text.
Should I use Base64 for all images on my website?
No. Base64 is best for small images (under 10KB) like icons and tiny logos. For larger images, regular files with proper caching are more efficient since Base64 increases size by ~33% and can't be cached separately.
Is my data private?
Yes. All encoding and decoding happens in your browser. No images or Base64 strings are sent to any server.