Embed images directly in your code
Ever wanted to drop a small icon into your HTML without dealing with an extra file and HTTP request? That’s what Base64 image encoding does. Upload an image here, get back a data URL like data:image/png;base64,iVBORw0KGgo..., and paste it straight into an <img> tag or CSS background-image. The browser decodes and renders it inline, no separate file needed.
The tool reads your image using the browser’s FileReader API. Nothing gets uploaded to a server. You see a preview alongside the encoded output, copy the string, and you’re done.
Pick your image and go
Select a file from your device, PNG, JPEG, GIF, SVG, WebP, BMP, ICO, whatever. The tool detects the MIME type automatically and builds the complete data URL with the right prefix. One click to copy.
When this actually makes sense
Email templates are probably the best use case. Most email clients block external images by default, showing a “click to load images” banner. But Base64-embedded images render immediately, no user action needed. If you’ve ever built an HTML email with a logo that has to show up in Outlook, you know the pain.
Tiny UI elements are another good fit. That 800-byte SVG spinner? That 2KB favicon? Embedding them eliminates HTTP requests. In a single-page app loading a dozen small icons, that adds up.
CSS background patterns work well too. A small repeating dot pattern or texture encoded as Base64 loads with the stylesheet itself. No FOUC, no flash of missing backgrounds.
Offline-first apps benefit when images are bundled into the code rather than fetched from a CDN that might not be reachable.
When it doesn’t make sense
One thing to keep in mind: Base64 adds about 33% to the file size. A 30KB image becomes ~40KB of text. And that text can’t be cached independently from the HTML or CSS file it lives in.
So don’t embed your hero image. Don’t embed anything over 10-20KB, really. Photos, large illustrations, anything that changes frequently, serve those as regular files with proper caching and responsive srcset. Base64 is for small stuff.
For decoding Base64 images back to viewable files, there’s the Base64 Image Decoder. For plain text encoding, use the Base64 Encoder.
FAQ
Does my image get uploaded anywhere?
No. FileReader API, client-side only. Your image stays on your device.
What formats work?
All the standard web formats: PNG, JPEG, GIF, SVG, WebP, BMP, ICO. The MIME type is detected and included in the data URL automatically.
What’s a good size limit?
Aim for images under 10-20KB. Icons, logos, small UI graphics. Anything bigger and you’re paying the 33% size penalty without the caching benefits of a separate file.
Can I use the output in CSS?
Absolutely. background-image: url('data:image/png;base64,...');, works great for small patterns and icons embedded in stylesheets.
What exactly is a data URL?
It’s a URI scheme: data:[MIME type];base64,[encoded data]. The browser reads the string, decodes the Base64 portion, and treats it like any other image source. Supported everywhere modern browsers exist.