A Data URI allows you to embed image byte data directly into HTML or CSS without an external file request.

Why is the Base64 string so long?

Base64 uses four characters for every three bytes, so the string is about a third larger than the image file.

Is my image uploaded?

No. The conversion is done in your browser.

Which snippet should I copy?

Use the HTML snippet for web pages, the CSS snippet for background images, and raw Base64 when an API asks for the encoded data only.

Can I convert Base64 back to an image?

Paste the data URI into your browser's address bar to view it, then right-click to save it.

Image to Base64

Convert PNG, JPG, SVG, and WebP images into Base64 encoded strings and Data URIs for inline embedding in HTML and CSS.

Click to select image or drag and drop here

Convert PNG, JPG, SVG, or WebP to Base64 Data URI strings.

How to use Image to Base64

Upload or drag and drop an image file.
Inspect the live Base64 Data URI string.
Copy raw Base64, HTML img tag, or CSS background-image snippet.

About Image to Base64

Convert an image into a Base64 data URI you can paste straight into HTML, CSS, or JSON. Copy the raw Base64 string, a ready-made <img> tag, or a CSS background-image rule.

What a data URI is

A data URI puts the image bytes directly inside your code, so the browser does not need a separate request to load it. It looks like data:image/png;base64, followed by a long string of characters.

Base64 makes the data about 33% larger than the original file. That trade-off is worth it for small icons and placeholders, but not for photos.

When to use it

Data URIs are useful for tiny icons, email templates where external images may be blocked, single-file HTML documents, and test fixtures. Keep embedded images under about 10 KB; larger ones make your HTML or CSS slow to download and impossible to cache separately.

Common uses

Inline icons: Embed small icons in CSS so they load with the stylesheet.
Email templates: Include small images directly in HTML email.
Single-file demos: Make an HTML file that works offline with no image folder.
API payloads: Send an image inside JSON for an API that expects Base64.

Questions about Image to Base64

What is a Data URI?: A Data URI allows you to embed image byte data directly into HTML or CSS without an external file request.
Why is the Base64 string so long?: Base64 uses four characters for every three bytes, so the string is about a third larger than the image file.
Is my image uploaded?: No. The conversion is done in your browser.
Which snippet should I copy?: Use the HTML <img> snippet for web pages, the CSS snippet for background images, and raw Base64 when an API asks for the encoded data only.
Can I convert Base64 back to an image?: Paste the data URI into your browser's address bar to view it, then right-click to save it.

More tools like Image to Base64

Comments

Questions, ideas, or a bug in Image to Base64? Let us know.