Image ⇄ Base64

Turn an image into a data URI, raw Base64, a CSS url() rule or an <img> tag — and paste Base64 back to preview and download the original file.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up

Drop an image here or click to choose — PNG, JPG, SVG, GIF, WebP, ICO

Choose an image to encode it.

—Original

—Encoded

—Overhead

—Dimensions

Output

Wrap long lines

Data URIs above ~10 KB are usually better as a separate file — browsers cannot cache an inlined image.

How to convert an image to Base64

Drop an image into the box — it is read locally with a FileReader, never uploaded.
Pick the snippet you need: a plain data URI, raw Base64, a CSS url() rule, an <img> tag or Markdown, then copy it.
To go the other way, switch to Base64 → Image, paste the string and download the decoded file.

FAQ

Why is the Base64 bigger than my file?

Base64 encodes three bytes as four characters, so it always adds about 33%, plus the data-URI prefix. The overhead figure above shows the exact increase.

When should I inline an image?

Small, always-needed assets — icons, 1×1 spacers, tiny logos — save a request. Anything over roughly 10 KB is better as a real file, because an inlined image cannot be cached separately and bloats every page that includes it.

Does it work with SVG?

Yes. SVG encodes fine as Base64, though a URL-encoded data URI is usually smaller for SVG; both work in CSS url().