We use cookies to measure traffic and show ads. You can accept or reject non-essential cookies. Manage
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
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.
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.
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 encoding happens entirely inside your browser, using the native file reader (FileReader). The image is read in memory and turned into text right there, without ever going to the internet.
That matters when the image is brand material or something you'd rather not send to third-party services: the content stays on your device.
The full string is shown in a field ready to copy — just one click on the button. The tool also shows the character count, useful to get a sense of the Data URI size before pasting it into code.
It works with PNG, JPG, WEBP, GIF and SVG. The image type is already embedded at the start of the string (for example, data:image/png;base64,...), so the Data URI works right where you paste it.
Yes. The tool is free and needs no sign-up.
No. The encoding happens entirely in your browser. The image is never transmitted to the internet or stored.
It's a text that represents the whole image, starting with data:image/...;base64,. You can paste it straight into CSS, HTML or code.
PNG, JPG, WEBP, GIF and SVG.
Yes, about 33% larger than the original file. That's why it's better suited to small images.
Copy and paste it where you need, for example in background-image: url(...) in CSS or the src attribute of an img tag.
Yes. The tool works on phones and tablets, right in the browser.
No. Everything runs in the browser, with nothing to install and no extensions.