Skip to content

Image to Base64 Converter – Data URI Generator

Drop in an image to get it as Base64 text or a ready-to-paste data URI, HTML tag, CSS rule or Markdown image. The image is read on your device and never uploaded.

Runs entirely in your browser. Nothing you paste is sent anywhere.

How to convert an image to Base64

  1. Add an image by dragging it onto the box, or tap to choose a file from your phone or computer.
  2. Choose the output: Data URI, Base64 only, HTML <img>, CSS background or Markdown. For SVG files, decide whether to keep URL-encoding switched on.
  3. Check the preview and sizes. A preview shows the image decoded from the result, and a line shows the original size, the encoded size and how much larger it is.
  4. Copy or download the text with the copy button or as a .txt file.

Features

  • Five ready-to-paste outputs: data URI, raw Base64, an HTML <img> tag, a CSS background-image rule and a Markdown image.
  • URL-encoded SVG as a smaller alternative to Base64 for vector images.
  • Size comparison showing the original file size, the encoded size and the percentage increase.
  • Live preview rendered from the generated data, on a checkerboard so transparency is visible.
  • Wide format support: PNG, JPG, WebP, GIF, SVG, AVIF, ICO and BMP.
  • Exact encoding, with no resizing or quality loss.
  • Size advice when an image is over about 10 KB.

Why use Fileora's image to Base64 converter

Logos, screenshots and design assets are often unreleased or private. Fileora reads and encodes the file in your browser, so the image never leaves your device. It's free, needs no sign-up, and works on a phone, where you can pick an image straight from your gallery.

When inlining an image helps

A data URI puts the image inside your HTML, CSS or JSON instead of in a separate file. That saves a network request, which can help for:

  • Small icons and simple shapes, especially SVG, used in CSS.
  • HTML emails and single-file documents that must work without external files.
  • Placeholders, such as a tiny blurred preview shown while the full image loads.
  • Tests, demos and code snippets that should run without extra assets.
  • APIs that accept images as Base64 inside a JSON body.

When it hurts

Base64 text is about a third bigger than the image it represents. Inlined images are downloaded again every time the page or stylesheet changes, because they can't be cached on their own. They also sit in the critical path: a large image inside your CSS delays the whole stylesheet, and with it the first paint of your page. As a rule of thumb, keep inlined images under about 10 KB and serve everything else as a normal file.

To get an image under that size first, shrink it with the image compressor or convert it to WebP with the image converter. If you need the exact colour of an icon in CSS, the colour converter gives you HEX, RGB, HSL and OKLCH.

Frequently asked questions

How do I convert an image to Base64?

Drag an image onto the box or tap it to choose one. The encoded text appears straight away as a data URI. Choose another output, such as Base64 only, HTML, CSS background or Markdown, then copy it or download it as a .txt file.

What is the difference between a data URI and Base64 only?

Base64 only is the encoded image data on its own, which is what most APIs and JSON fields expect. A data URI adds a short prefix such as data:image/png;base64, in front, which tells a browser what kind of file it is. Use the data URI anywhere a browser expects an image address, such as an img src or a CSS url().

Why is the Base64 text bigger than my image?

Base64 uses 4 text characters to represent every 3 bytes of the file, so the result is about 33% larger than the original. The tool shows the image size, the encoded size and the percentage increase so you can decide whether inlining is worth it.

Why is my SVG not Base64 encoded?

SVG files are text, so they can be put in a data URI with URL-encoding instead of Base64, which is usually smaller. This option is switched on by default for SVG files. Switch off Use URL-encoding for SVG if a tool you are using needs Base64.

Which image types are supported?

PNG, JPG, WebP, GIF, SVG, AVIF, ICO and BMP. The file is encoded exactly as it is, without resizing or re-compressing, so the image quality doesn't change.

Should I inline large images as Base64?

Usually not. Images over about 10 KB are better served as normal files: the encoded text is larger, it can't be cached separately from your HTML or CSS, and it delays the rest of the page. The tool shows a reminder when your image is over that size.

Related tools

Can't find the tool you need, or something isn't working?

Tell us which tool you'd like next or what went wrong. We read every message, and requests decide what we build next.

Request a toolReport a problem

Opens your email app. Please don't attach private files.