Developer Tools
Convert an Image to Base64
A data URI embeds an image directly inside your markup or stylesheet as text, removing the need for a separate HTTP request. For small icons and inline previews that can be a genuine win.
Add a file to generate the encoded string, ready to copy.
Drag an image here
Small icons and logos work best · encoding happens in your browser
How to use this tool
- 1Add the image you want to encode.
- 2Wait for the Base64 string to be generated.
- 3Copy the full data URI, or just the raw Base64 payload.
- 4Paste it into your CSS, HTML or JSON.
What a data URI looks like
The format is a scheme, a MIME type, an encoding marker and the payload: data:image/png;base64,iVBORw0KGgo…. Anywhere a browser accepts a URL — the src of an image, a CSS background-image, an SVG reference — it accepts this instead.
The size penalty
Base64 represents three bytes as four characters, so the encoded text is about 33% larger than the file. Gzip recovers part of that on the wire but not all of it. This is why data URIs suit small assets and hurt large ones.
When to use it, and when not to
Good candidates: tiny icons, a one-pixel gradient, a placeholder blur, an image embedded in an email template or a self-contained HTML export. Bad candidates: photographs, hero images, anything reused across pages. Embedded images cannot be cached separately, so every page that includes the string downloads it again.
Frequently Asked Questions
Does encoding change the image?
No. Base64 is a text representation of the exact same bytes, so it is fully reversible.
What size limit should I respect?
As a rule of thumb, keep embedded assets under a few kilobytes. Larger files are better served as normal cacheable requests.
Can I embed SVG this way?
Yes, though URL-encoding SVG usually produces a shorter string than Base64 because SVG is already text.
Is my file uploaded?
No. Encoding uses the browser FileReader API on your device.