VoriTools

Encode an image as a Base64 data URL

Choose an image to encode its existing bytes. Base64 embeds data as text; it does not compress the image and usually increases the encoded size.

Runs locally in your browser

How to turn an image file into a Base64 data URL

The workbench runs in two directions: choose an image and the file’s bytes come back as a data:image/…;base64,… URL, or paste such a URL (or a bare Base64 payload) and the page shows what it decodes to.

Everything happens in this tab with the browser’s own FileReader and image decoder; the file is not uploaded. Nothing here compresses, resizes or strips metadata from a picture — that needs an image editor.

  1. Press Select image and pick a file. The box fills with a data:image/…;base64,… URL that starts with the detected media type, and the preview underneath shows the picture.
  2. Press Copy to take the whole data URL into CSS (background-image:url("data:…")), HTML (<img src="data:…">) or a JSON payload.
  3. To inspect something you received, paste the data URL or the bare Base64 payload into the box and press Preview pasted image. The page reads the leading bytes (PNG, JPEG, GIF, WebP, BMP, ICO or SVG), adds the missing prefix and renders the picture.
  4. Press Wrap in an img tag when the box should hold a ready-to-paste <img src="…" alt="…" /> element instead of the raw data URL.
  5. Press Clear to empty the box, the preview and the file picker before the next image. A payload that is truncated, not Base64 or not an image says so instead of leaving a broken picture behind.

What Base64 changes, and what it does not solve

What Base64 does to an image

Base64 maps every three bytes onto four printable characters, so the same bytes survive text channels that would mangle or truncate binary data: HTML, CSS, JSON, XML or an e-mail body. Nothing is compressed — the encoded text is roughly a third longer than the file — and a data URL is decoded by the browser while the page is parsed, never cached as a file of its own.

It is not encryption either: anyone who has the page or the e-mail can decode the payload back to the original bytes with any Base64 decoder, so a data URL must not carry anything you would not publish.

When a data URL pays off

A small logo, bullet icon or background texture that would otherwise cost one HTTP request per page can travel inside the stylesheet instead. That removes a round trip and guarantees the image is there before the first paint.

The trade-offs grow with the file: the markup becomes unreadable, the HTML compresses less efficiently, and no browser can cache the image without the page. Keep data URLs for assets well under 10 KB, and leave photographs, sprite sheets and anything reused across pages as separate files.

Checking a payload you did not produce

Pasted Base64 usually arrives without its media type. This page reads the leading bytes of the decoded data — the PNG, JPEG, GIF, WebP, BMP or ICO signature, or the <svg root of an SVG document — and writes the matching data:image/…;base64, prefix, so a bare payload stops being a broken image.

If the bytes match no known format, or the Base64 alphabet and padding are wrong, or the browser cannot render the decoded data, the status line says which of those happened. Try a small file whose picture you know first, and decode anything that ships in a product with a second tool as well.

Recent tools: