Encode an image as Base64
Get a data URI, CSS rule, <img> tag or Markdown, and optionally re-compress the image first so the string stays manageable.
- Runs in your browser
- Nothing is uploaded
- No sign-up
- No watermark
Drag & drop your image here
or tap to browse · you can also paste from the clipboard
JPG · PNG · WebP · GIF · BMP · AVIF · SVG · up to 50 MB each
Choose an imageBefore
After
Processed image will appear here.
How to use the base64 image encoder
Upload an image and copy the generated data URI, CSS rule, HTML tag or Markdown. A Base64 string is about 33% larger than the binary file, so inline images under roughly 10 KB and keep anything larger as a normal file reference.
- Upload an imageSmall icons and logos are the best candidates.
- Choose an output styleData URI, raw Base64, CSS background, HTML img tag or Markdown.
- Copy or downloadCopy to the clipboard, or save as a .txt file.
About this tool
A Base64 data URI embeds the image bytes directly in your HTML, CSS or JSON, removing one HTTP request. That is useful for tiny icons, email signatures and single-file exports.
It costs about 33% in size, and inline images cannot be cached independently of the file containing them. The practical rule: inline images under roughly 10 KB, and keep everything larger as a normal file reference. Re-compressing before encoding, with the option below, often brings a borderline image under that line.
What you get
- Five output styles including ready-to-paste CSS and HTML
- Optional re-compression to WebP/JPG before encoding
- Character count and size overhead shown
- One-click copy to clipboard
- No upload: encoding happens in your browser
When to use the base64 image encoder
Small icons in CSS
Inlining a 2 KB icon as a background-image removes an HTTP request entirely, which matters most for icons needed during first paint.
Single-file HTML exports
Reports, dashboards and email templates that must survive as one self-contained file need their images embedded.
Embedding in JSON or a database
APIs and configuration files that carry an image alongside text data need it as a string.
Email signatures
Some clients render inline data URIs, avoiding the blocked-remote-image problem, though support is inconsistent.
Should you inline this image?
| Image size | Verdict | Reason |
|---|---|---|
| Under 2 KB | Inline it | Request overhead exceeds the image itself |
| 2-10 KB | Usually inline | Saves a request; caching loss is small |
| 10-50 KB | Usually not | Bloats the HTML/CSS and cannot be cached separately |
| Over 50 KB | Do not inline | Blocks parsing and defeats caching entirely |
| Used on many pages | Do not inline | A file reference is cached once and reused |
| Used once, above the fold | Consider inlining | Removes a round trip on the critical path |
How it works
Base64 represents binary data using 64 printable characters, encoding three bytes as four characters. That is where the roughly 33% size increase comes from. It is a mathematical property of the encoding, not an inefficiency that can be optimised away. Gzip or Brotli on your server recovers part of it, but never all.
The bigger cost of inlining is lost caching, not the extra size. A referenced image file is downloaded once and reused across every page that needs it; an inlined image is re-downloaded as part of every document that contains it, and changing it invalidates the whole file. Inlining also makes the containing CSS or HTML larger, which delays parsing on the critical rendering path.
The re-compress option encodes your image to WebP or JPG at a chosen quality before Base64 encoding, which frequently brings a borderline image under the inlining threshold. A 14 KB PNG icon re-encoded as an 80-quality WebP might be 3 KB, producing a 4 KB string instead of a 19 KB one.
Common problems and how to fix them
- The string is enormous
- Your image is too large to inline. Switch on "Re-compress before encoding", or keep it as a normal file reference.
- The data URI does not display
- Check that you copied the entire string including the data:image/...;base64, prefix, and that no line breaks were introduced by your editor.
- It does not work in Outlook
- Outlook desktop blocks data URIs in many configurations. Test with your actual recipients before relying on it for email.
- My CSS file became huge
- That is the trade-off. Inlined images live inside the file that references them and cannot be cached separately. Reserve inlining for icons under about 10 KB.
- My page got slower after inlining
- You inlined too much. Large data URIs delay CSS and HTML parsing, which sits on the critical rendering path.
Frequently asked questions
What is a Base64 data URI?
A way of writing binary data as text so it can live inside a text file. It looks like data:image/png;base64,iVBORw0… and can be used anywhere a URL is accepted, such as an img src, a CSS url() or a JSON field.
How much bigger does Base64 make my image?
About 33%, because every three bytes become four characters, and the data URI prefix adds a few more. Gzip or Brotli on your server recovers part of that, but never all of it.
When should I inline an image?
Small icons, sprites and logos under about 10 KB, email signatures, and anything that must survive as a single self-contained file. Above that size, the lost caching and the parse cost outweigh the saved request.
Is Base64 a form of encryption?
No. It is an encoding, not a cipher. Anyone can decode it instantly. Never treat Base64 as a way to hide or protect anything.
Can I use this in an email signature?
Sometimes. Gmail and Apple Mail handle inline data URIs, but Outlook desktop blocks them in many configurations. Test with your actual recipients before rolling it out.
Does Base64 encoding reduce image quality?
Not by itself; it is a lossless text representation of the same bytes. Quality only changes if you switch on the re-compress option, which deliberately re-encodes the image first.