Convert image to Base64
Turn an image into a Base64 string (Data URI) to paste straight into your CSS, HTML or code. The conversion happens in your browser — the file is never sent to a server — and the string can be copied with one click.
Drag your files here
or click to select
PNG, JPEG, WEBP, GIF, SVG
How to convert an image to Base64 in 3 steps
Add the image
Drag the file (PNG, JPG, WEBP, GIF or SVG) onto the upload area or click to pick it. It's read only in your device's memory.
See the Base64
The Data URI string (starting with data:image/...) appears on screen, along with a preview of the image and the character count.
Copy
Click copy and paste the string wherever you need it — in CSS, HTML or any code.
What an image's Base64 is for
Encoding an image in Base64 produces a Data URI — a text that represents the whole image. With it, you can embed the image directly in code, with no separate file and no external URL.
It's widely used by developers: embedding a small icon in CSS, putting an image in an HTML email, storing a logo inside a config file, or avoiding an extra network request on a page.
When it's worth it (and when not)
Base64 is ideal for small images — icons, logos, small graphics — where avoiding a separate file simplifies the project. For those cases, embedding the image in code is practical.
For large images, keep in mind that Base64 increases the size by about 33% over the original file and isn't cached like a normal file. In that case, keeping the image as a file is usually better.
The image is not uploaded
Encoding happens in the browser; the image never leaves your device.
Why the limit is 10 MB
It is the smallest limit on the site, and not arbitrary: Base64 represents binary data using text characters only, and that costs space — the resulting string ends up about a third larger than the original file.
A 10 MB image becomes a string of over 13 MB. Pasting that into an HTML or CSS file makes it heavy and hard to edit, so the limit exists for memory reasons as much as for sensible use.
When it pays off, and when it does not
It pays off on small images — icons, logos, a signature badge in an email — where embedding avoids one extra network request and the risk of the external file disappearing.
It does not pay off on photographs: beyond the bloat, an embedded image cannot be cached by the browser separately from the page, so it is downloaded again on every load. For photos, host the file and reference the URL.
Use cases
- Embed a small icon directly in CSS
- Include an image in an HTML email
- Avoid an extra network request for a small logo
- Store an image inside a config file or JSON
- Quickly test an image as a Data URI
Frequently asked questions
What is a Data URI?
It's a text that represents the whole image, starting with data:image/...;base64,. You can paste it straight into CSS, HTML or code.
Which formats are accepted?
PNG, JPG, WEBP, GIF and SVG.
Is the Base64 larger than the image?
Yes, about 33% larger than the original file. That's why it's better suited to small images.
How do I use the string?
Copy and paste it where you need, for example in background-image: url(...) in CSS or the src attribute of an img tag.
General questions about the site
- Is it free?
- Yes — no sign-up, no usage limit and no watermark.
- Does it work on mobile?
- Yes, straight from your Android or iPhone browser.
- Do I need to install anything?
- No. No software, no extensions.
- Is my file sent to a server?
- On tools marked as local, no — the file never leaves your device. Only three tools use a server, and each says so on its own page.
How this works inside, and what the site does not do, is on the About page.