Image to Base64

Encode images as Base64 data URIs

A Base64 data URI turns an image into a plain-text string you can paste directly into your HTML or CSS. The browser decodes it on the fly, so the image displays without a separate file request — handy for tiny icons, email templates and self-contained single-file pages.

This tool reads your file locally and outputs the full data: URI, plus ready-made <img> and CSS background-image snippets you can copy with one click. Nothing is uploaded — the encoding is done entirely in your browser.

When (and when not) to inline

Inlining removes an HTTP request, which can speed up small, critical images. But Base64 is about 33% larger than the binary file and can't be cached separately, so avoid it for large photos or images reused across many pages. As a rule of thumb, inline icons under a few kilobytes and keep bigger images as normal files.

How to use the output

The data URI keeps the file’s original type, for example data:image/png;base64, followed by the encoded bytes, and the status line shows how many kilobytes of text it produced. Use the three copy buttons depending on where it goes: the plain URI for a src or href value, the <img> tag for HTML (add a meaningful alt text afterwards), or the CSS line for a stylesheet.

Practical caveats

• A long Base64 string makes your HTML or CSS file bigger and slower to read, and it is downloaded again with every page that contains it. Gzip or Brotli recovers part of the overhead, but the image data is already compressed, so the saving is limited.
• If your site uses a Content Security Policy, img-src must allow data: URIs.
• Many email clients block or strip data URIs, so test before relying on them in newsletters.
• Compress or resize the image first; a smaller source produces a much shorter string.

Good candidates for inlining

Small icons, tiny placeholder images, loading spinners, simple logos and images in single-file HTML demos are the best fit. Photos, hero banners and any image shown on many pages are better served as separate files so the browser can cache them. The encoding happens in your browser and the text you copy never leaves your device until you paste it somewhere yourself.