Free tool

Image to Base64.

Drop a PNG, JPEG, GIF, WebP, AVIF or SVG and get a data URI, an <img> tag and a CSS rule you can paste straight into a page — so the image travels inside the file instead of breaking the moment the HTML is sent to someone else. Paste Base64 to go the other way.

Why images break in shared HTML

A generated report — a notebook export, a coverage summary, a chart pack from an agent run — almost always writes its images as separate files and points at them with a relative path. Locally that works, because the files are sitting right there. Email the.html on its own and every one of those paths resolves to nothing. Inlining the images as data URIs makes the document self-contained, which is the whole idea behind a single-file export.

It is not free, though. Base64 costs about a third more bytes, the markup becomes unreadable, and the browser can no longer cache an image independently of the page. For anything past a few hundred kilobytes the better answer is to keep the reference and publish the assets alongside the document — which is what a report upload does.

Where each output goes

• Data URI — the raw data:image/png;base64,… string, for anywhere a URL is expected.
• <img> — the tag with alt filled from the filename and the real width/height, so the layout does not jump while the page loads.
• CSS — a background-image: url("…") rule for a stylesheet or an inline style attribute.
• Markdown — ![alt](data:…), which renders in most Markdown pipelines and in the Markdown converter.

Questions

How do I convert an image to Base64?

Drop the file onto the box on this page, or click to choose one. You get a data URI, a ready-made <img> tag, a CSS background-image rule and a Markdown image, all on the clipboard in one click. PNG, JPEG, GIF, WebP, AVIF and SVG all work, and the file is read in your browser — nothing is uploaded.

How do I convert Base64 back to an image?

Switch to Decode and paste either a full data URI or the bare Base64 payload. The image is previewed immediately and the Download button saves it with the right extension, guessed from the declared MIME type or from the file's magic bytes when the string has no data: prefix.

Why are the images in my HTML report broken?

Almost always because the <img> tags point at relative paths — ./charts/fig1.png — and only the .html file was sent. The markup arrives, the files do not. Inlining each image as a data URI makes the document self-contained, which is why a single-file export renders anywhere. Publishing the report instead uploads the referenced assets alongside it, which keeps the file small and does the same job.

How much bigger does Base64 make a file?

About 33% — three bytes become four characters, plus padding. A 300 KB screenshot is roughly 400 KB of text in your markup. Gzip claws some of that back on the wire but not in the file itself, so inlining is a good trade for icons and small charts and a bad one for photographs.

Should I inline images or upload them?

Inline anything small and structural — icons, sparklines, a logo, a 20 KB chart — so the document cannot break. Upload anything large or repeated: a data URI cannot be cached separately, so a 2 MB photo inlined in a report is re-downloaded in full on every visit. Comma keeps referenced assets next to the report for exactly this reason.

Does this work with SVG?

Yes. SVG is text, so it encodes like anything else and the data URI works in <img src> and CSS url(). Worth knowing: an inlined SVG loaded through <img> cannot run scripts or load external resources, which is usually what you want for a chart you were handed.

Is my image uploaded anywhere?

No. The file is read locally with FileReader and never sent. It only leaves your machine if you click “Get a shareable link” and publish it as a report.

Related: HTML viewer · HTML escape · HTML formatter · all free tools · fix a report with broken assets