Image to BASE64 Converter

Restoring selected file...

A Base64 data URL packages an image’s media type and encoded bytes into one text value such as data:image/png;base64,.... Choose an image up to 20 MiB and this converter creates that value locally in your browser. It shows the original file details and the approximate length of the generated data URL before you copy it.

How to base64-encode an image

  1. 1

    Choose an image

    Select one image file up to 20 MiB.

  2. 2

    Encode locally

    Your browser reads the file and creates a complete Base64 data URL without uploading it.

  3. 3

    Review the result

    Check the media type, original file details and approximate data URL length.

  4. 4

    Copy the data URL

    Copy the complete `data:image/...;base64,...` value to your clipboard.

When to inline, when to link

Base64 embedding saves an HTTP request at the cost of a 33% size increase, worth it for some assets, wasteful for others.

Size math

Original size Base64 size Extra bytes
1 KB 1.36 KB 360 B
10 KB 13.6 KB 3.6 KB
100 KB 136 KB 36 KB
1 MB 1.36 MB 360 KB

Decision guide

Use case Inline or external
Icon under 2 KB (SVG logo, sprite) Inline
Cursor image in CSS (cursor: url()) Inline
Small self-contained HTML or CSS demo Inline
Icon bundled into a JavaScript payload Inline
Hero image, > 50 KB External
Anything that could be cached separately External

Data URI format

data:[<mediatype>][;base64],<data>

Examples:

  • data:image/png;base64,iVBORw0KGgo..., PNG
  • data:image/svg+xml;utf8,<svg>...</svg>, SVG, often better inline without base64
  • data:image/jpeg;base64,/9j/4AAQS..., JPG

Tips

  • SVG is frequently better as url() with utf8 encoding instead of base64; shorter, readable.
  • Encoding does not inspect or sanitize the image. Only embed files you trust, especially SVG, which can contain active or external content.
  • Big images inside JSON payloads block parsing if very large; consider multipart or external references.
  • CSS background-image with base64 inlines cleanly but defeats caching across pages.

Frequently Asked Questions

Base64 encodes 3 bytes of input as 4 characters, so the output is always ~33% larger than the input. A 10 KB image produces a string of about 13,600 characters. Long is normal.

This converter accepts one image up to 20 MiB. That is a processing limit, not a recommendation for inlining: data URLs are usually best kept small because Base64 adds roughly one third to the source size and prevents separate caching.

No. Base64 encoding runs in your browser. The image never leaves your device.

Not in this encoder. Use the separate Base64 to Image tool when you need to turn a data URL or raw Base64 string back into a downloadable image.

Related Tools