CleanorTools
Base64

Image to Base64

Details

How to use Image to Base64

What the tool does, how to run it, and what to expect from the result.

How to convert an image to Base64

The tool reads a raster image locally and returns both the raw Base64 payload and a ready-to-paste data URL. Nothing is uploaded and nothing is recompressed, so the string is exactly 33 percent larger than the file you fed in.

Before you paste it anywhere, check the size. Inlining is a real optimization under about 5 KB and a real regression above it.

  • Upload a PNG, JPG, WebP, GIF, or BMP.
  • Compress or shrink it first if it is more than a few kilobytes, since Base64 will add another third.
  • Encode it, then read the resulting size.
  • Copy the data URL for CSS or an img src, or the raw Base64 for JSON.
  • Paste it into the stylesheet, template, or payload that needs it.

About this image to Base64 converter

Base64 lets you embed an image directly in CSS, HTML, or JSON without a separate file. This tool reads your image locally and returns both the raw Base64 and a ready-to-paste data URL.

Tips

Getting a better result out of Image to Base64

Specific settings and thresholds, not general advice.

  • Base64 inflates a file by about a third, so a 40 KB image becomes roughly a 54 KB string. Inlining only pays below about 5 KB, where the string is small enough that saving the HTTP request is worth the extra bytes.
  • A data URL cannot be cached separately from the document that carries it. Inline an image in a CSS file and it is re-downloaded with every cache miss on that CSS, and every page that embeds it carries the full payload again.
  • An inlined image cannot be lazy-loaded and blocks nothing but also defers nothing. If the image is below the fold, inlining it makes the initial payload larger for no benefit, which is the opposite of what you were trying to do.
  • The encoder accepts PNG, JPG, WebP, GIF, and BMP. SVG is not accepted, which is a shame because SVG is the one format where inlining genuinely pays. For SVG, paste the markup directly instead of encoding it.
  • The output has no line breaks. A very large base64 string pasted into a source file will produce a single line tens of thousands of characters long, which will upset some linters, diff tools, and code review interfaces.
Limits

What Image to Base64 does not do

The honest boundary, so you do not lose time finding it yourself.

  • It does not compress the image first. Encode a bloated PNG and you get a bloated string.
  • SVG is not supported. Only PNG, JPG, WebP, GIF, and BMP raster files.
  • One file at a time. There is no batch mode.
  • No line wrapping and no MIME-safe chunking of the output.
Reference

Terms used on this page

Short, plain-language definitions for the formats and settings above.

Web & SEOBase64 encodingBase64 is a way to represent binary data — like an image or file — using only printable text characters. It lets you embed a file directly inside HTML, CSS, or JSON as a data URI, at the cost of making the data about a third larger than the original.General
At a glance

Who Image to Base64 is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Developers and marketers embedding images as Base64 in CSS, HTML, or JSON.

Ideal for

Encoding a browser-safe image into a copy-ready Base64 string or data URL.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

Is my image uploaded?

No. The image is read and encoded locally in your browser, so it never leaves your device.

What formats are supported?

PNG, JPG, WebP, GIF, and BMP images can be encoded to Base64.

How much bigger does Base64 make the file?

About 33 percent, because every 3 bytes become 4 characters. A 40 KB PNG becomes roughly 54 KB of text, plus the data URL prefix. That overhead is why inlining is only sensible for very small images.

When should I actually inline an image?

When it is under about 5 KB, appears on the critical path, and is used on one page. Icons and tiny sprites qualify. A hero photo does not: it will be 33 percent heavier, uncacheable on its own, and unable to be lazy-loaded.

What is the difference between the raw Base64 and the data URL?

The raw Base64 is the encoded bytes on their own. The data URL prefixes it with data:image/png;base64, so a browser knows how to interpret it. Use the data URL in CSS or an img src, and the raw string when you are putting it into JSON or a template that adds the prefix itself.

Can I encode an SVG?

Not here, since the encoder takes raster formats only. SVG is the one case where inlining reliably pays, and the better approach is to paste the SVG markup straight into your HTML rather than base64-encoding it, which is both smaller and stylable.

Is the image uploaded?

No. The file is read with a local FileReader and the base64 string is produced in the browser, so the image never leaves your device.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

IMG
UtilityBase64

Base64 to Image

Base64 to image

Decode a Base64 string or data URL back into an image, preview it, and download it locally.

B64
UtilityBase64

Image Base64 Converter

Image ↔ Base64

Encode one image to Base64 or decode a Base64 payload back into an image directly in the browser.

B64
UtilityBase64

Base64 Encode

Encode text to Base64

Encode text into a Base64 string. Free, in your browser, nothing is uploaded.

B64
UtilityBase64

Base64 Decode

Decode Base64 to text

Decode a Base64 string back into readable text. Free, in your browser, nothing is uploaded.

JSON
UtilityData

CSV to JSON

Convert CSV to JSON

Convert header-based CSV into flat JSON rows locally with a readable output.

CSV
UtilityData

JSON to CSV

Convert flat JSON to CSV

Convert flat JSON rows into CSV locally and reject nested structures with a clear message.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon
Get it on the App StoreGet it on Google PlayAll platforms & pricing