Skip to content
ImgWrench

Image to Base64 Converter

Drop an image to get its Base64, a data URI, and ready-to-paste HTML and CSS, right in your browser.

Everything happens on your device. Nothing is uploaded.

Specs

EncodesPNG, JPG, GIF, WebP, AVIF, BMP, ICO and SVG
You getData URI, bare Base64, an HTML <img> tag and a CSS background
MIME typeRead from the file's bytes, so a renamed file still gets the right one
SizeBase64 is about a third larger than the image

Specs last verified: 2026-10-24

ImgWrench's image to Base64 converter turns any PNG, JPG, GIF, WebP, AVIF, BMP, ICO or SVG into Base64 text. You get four ready-to-use versions: a data URI, bare Base64, an HTML <img> tag and a CSS background-image rule, each with a copy button.

How to convert an image to Base64

  1. Drop an image into the tool above, paste one with ⌘V or Ctrl+V, or click to choose a file.
  2. Copy the version you need: data URI, Base64, HTML or CSS.
  3. Or download it as a .txt file if it's too long to paste comfortably.

Data URI, HTML and CSS

A data URI is the Base64 with its type in front, such as data:image/png;base64,. Browsers treat it like an image URL, so it works anywhere a URL does: the src of an <img>, a CSS url(), or a favicon <link>. ImgWrench reads the image type from the file's own bytes, so the prefix is right even if the file extension isn't.

When Base64 helps, and when it doesn't

  • Good for small images. Icons and tiny backgrounds inlined in CSS or HTML save a separate request.
  • Bad for large images. Base64 is about a third larger, and an inlined image is downloaded again with every page or stylesheet that contains it.
  • SVG is often smaller as text. For simple vector icons, compare the Base64 size with the SVG file itself.

Why ImgWrench

  • Four formats at once. Data URI, Base64, HTML and CSS, ready to copy.
  • Works both ways. Paste Base64 in the other tab to get the image back.
  • Private by design. Your images never leave your device.

Frequently asked questions

How do I convert an image to Base64?

Drop, paste or choose an image in the tool above. Its Base64 appears straight away in four versions: a data URI, bare Base64, an HTML <img> tag and a CSS background-image rule, each with a copy button. If the value is too long to paste comfortably, download it as a .txt file instead.

How do I convert a PNG or SVG to Base64?

The same way as any other image: drop the PNG or SVG into the tool and copy the version you need. ImgWrench reads the type from the file's bytes, so the data URI starts with the right prefix even if the file extension is wrong. For simple vector icons, compare the Base64 size with the SVG file itself, because SVG is often smaller as text.

What's the difference between Base64 and a data URI?

Base64 is just the encoded text. A data URI puts a type such as data:image/png;base64, in front of it, so browsers treat it like an image URL. That means you can use it anywhere a URL works: the src of an <img>, a CSS url(), or a favicon <link>. ImgWrench gives you both, plus HTML and CSS snippets.

Why is the Base64 bigger than my image?

Base64 turns every 3 bytes into 4 characters, so the text is about a third larger than the file. That's the cost of storing image data as plain text you can paste into HTML or CSS. It's also why Base64 suits small images like icons, while large images are usually better kept as separate files.

When should I inline an image as Base64?

For small images, like icons and tiny backgrounds in a stylesheet, inlining saves a separate request. For large images it's usually worse: Base64 is about a third larger, the image can't be cached on its own, and it's downloaded again with every page or stylesheet that contains it. For simple SVG icons, compare the sizes first.

Can I turn Base64 back into an image?

Yes. Switch to the Base64 → Image tab, or use the Base64 to image converter, and paste the text or the full data URI. The image appears straight away, and you can download it with the right file extension. Bare Base64 works too, because the image type is read from the data itself.

Is my image uploaded anywhere?

No. Encoding happens entirely in your browser, so nothing you drop or paste is sent to a server and your images never leave your device. The Base64 text is created locally. You can check this yourself: open your browser's network tab while you use the tool, and you'll see that no image data is sent anywhere.