AnyFormat

00 Utility

Image to Base64

Drop an image. Get a data URI, a CSS rule and an <img> tag.

Drop files or a folder here

or choose from your device · paste with ⌘V / Ctrl+V

.png .jpg .jpeg .gif .webp .avif .bmp .ico .svg

03Options 1

0 for one line, which is what CSS and HTML want.

  • No upload The conversion runs in this tab. Your file never travels — not to us, and not to the advertising.
  • No sign-up, no email, no daily cap There is no account system to sign up to.
  • No size limit we invented Only your device's memory — about ~2 GB on a desktop browser, ~400 MB on a phone.
  • Turn your Wi-Fi off and convert anyway The conversion needs nothing but this page. Ads will not load without a connection; your file will still convert. That is the whole claim, and it takes five seconds to check.

Drop an image and get its Base64 data URI, plus the CSS and HTML you would paste it into. Because it runs locally, this is safe for an image you would not upload — a screenshot with customer data in it, an ID photo, an internal diagram.

When inlining an image is worth it

Inlining removes a network request, which used to matter a great deal. Under HTTP/2 and HTTP/3 an extra request is cheap, so the calculation has changed.

Inline when: the image is under about 4 KB, it is needed to render the first screen, and it is unlikely to change. Small icons and a logo qualify.

Do not inline when: the image is large, reused across pages, or changes independently of the CSS. A data URI cannot be cached separately, so a 200 KB inlined image is re-downloaded with every stylesheet change, and it grows by a third in the encoding.

The size penalty is exactly 33%

Base64 turns three bytes into four characters, so the string is always 4/3 the original size before any prefix. Gzip claws a little of that back — Base64 of already-compressed image data compresses poorly, typically recovering only a few per cent. The tool shows both numbers so the decision is arithmetic rather than a guess.

SVG usually should not be Base64 at all

SVG is text. Base64 makes it a third bigger for no benefit and destroys its compressibility. For SVG, URL-encode the markup instead and put it straight in the url() — the result is smaller than the Base64 and still valid CSS. Better still, inline the <svg> element in your HTML, where it can be styled.

Other names for this

Also searched as “png to base64”, “jpg to base64”, “image to data uri”.

Questions

Why is the Base64 bigger than my image?
Base64 encodes three bytes as four characters, so the string is always about 33% larger. That is inherent to the encoding.
Can I convert several images at once?
Yes. Drop as many as you like; each gets its own data URI and snippets.
Should I do this for a photograph?
Almost never. Photographs are large, and a data URI cannot be cached separately from the file that contains it.
Does my text leave the browser?
No. Everything runs as JavaScript in this tab — there is no server involved and no request is made. Open the Network panel and watch, or turn your Wi-Fi off and keep using the tool.