Image to Base64 Converter

Convert your image into a Base64 data URI you can embed directly in code.

When should you use this?

Use this when you need to embed a small image directly into HTML/CSS code without a separate file request; it's suited to icons or small logos.

When shouldn't you use this?

Don't use it for a large image; Base64 encoding increases file size by about 33% and bloats the page code, so it only makes sense for small images.

Step-by-step

Make sure the image is small to begin with. Run it through the resizer or compressor first if needed.
Choose the file in the "Image" field.
Click "Convert to Base64". You'll get a long string starting with "data:image/", which is the data URI for your image.
Copy the whole string and paste it into your HTML, CSS or email template where a file path would normally go.

Example

You're building a single-file HTML report template with a small company logo at the top, and you want the logo to show up no matter who opens the file. Normally the img tag's src would point to something like logo.png. Put the data URI from this tool in the src instead, and the logo lives inside the HTML file itself. The report displays correctly on its own, with no separate image file to send along. The same trick works in CSS, inside url() for a background-image.

Converting an image to Base64

Base64 shows an image as text so you can embed it directly in HTML or CSS (a data URI). For small icons an extra request becomes unnecessary; however Base64 grows file size by about a third and cannot benefit from the browser cache separately.

When to use it

Only suitable for small images (icons, small logos); do not embed large photos.
Avoid embedding frequently changing images since they bloat the page HTML.
Use the correct MIME type (for example image/png) at the start of the data URI.
Base64 is not encryption; it does not hide the image.

Things to keep in mind

Embedded images aren't cached as separate files by the browser. If the same image appears across many pages, serving it as a normal file can be more efficient.
Some email clients won't display data URI images. Test in a few clients before relying on this in an email template.
The output is one very long line. Missing a few characters at the start or end when copying means the image won't show at all.
For SVG, which is already text, using the SVG markup directly is often shorter and easier to read than Base64.

Frequently asked questions

Is my image uploaded anywhere?

No, processing happens entirely in your browser via the Canvas API — your image never leaves your device.

Will there be quality loss?

Some quality loss during format conversion or compression is normal, more noticeable with lossy formats like JPG.

Which formats are supported?

JPG, PNG, and WebP formats are supported.