Refract

Image to Base64 converter

Turn images into Base64 data URIs ready for CSS, HTML or Markdown, or paste Base64 to get the image back. Everything happens in your browser.

Runs in your browser · files stay on your device

Settings

Output













How to use the image to base64 converter


  1. Add your images. Drop one or more images onto the box, click to choose them, or paste a copied image. A small sample icon is loaded so you can see the output straight away.
  2. Choose the output. Pick a plain data URI, a CSS background rule, an HTML img tag, Markdown, or the raw Base64 text on its own.
  3. Copy it. Click an image in the list to show its code, then press Copy. With several images, Copy all puts every snippet on your clipboard, labelled by file name.
  4. Decoding instead?. Switch to Base64 → image, paste the text, and Refract detects the format, shows a preview and lets you download the file.


What is a Base64 data URI?
Base64 is a way of writing binary data, such as an image, using only letters, numbers and a few symbols. Wrapped in a data URI (data:image/png;base64,…), the whole image can sit inside your CSS or HTML instead of being a separate file, so the browser doesn’t need an extra request to fetch it.
When inlining helps, and when it hurts
Inlining makes sense for very small images: icons, a tiny logo, a loading placeholder or an image in an HTML email. For anything larger it usually slows pages down. Base64 is about 33% bigger than the original file, it can’t be cached on its own, and a large data URI inside a stylesheet holds up rendering until the whole file has downloaded. As a rough rule, keep inlined images under 10 KB.
SVG is a special case
SVG files are text, so they don’t need Base64 at all. URL-encoding an SVG usually produces a shorter string than Base64. Use the SVG to CSS converter for that, and run the SVG optimiser first to make it as small as possible.


Frequently asked questions


Are my images uploaded?
No. Images are read and encoded by your own browser. Nothing is sent to Refract or anywhere else.
Why is the Base64 bigger than my image?
Base64 uses four characters to represent every three bytes, so the encoded text is about a third larger than the file. That overhead is the cost of embedding the image as text.
Can I use Base64 images in emails?
Some email apps block or strip data URIs, particularly Gmail and some versions of Outlook. Hosted images or attachments with a Content-ID are more reliable for email.
Which image formats work?
Any format your browser can read: JPG, PNG, GIF, WebP, AVIF, SVG, BMP and ICO. The decoder detects the format from the file’s contents, so it works even when the data URI has no type.