tigtools

Image to Base64

Turn a PNG, JPEG, WebP, GIF, SVG or ICO file into Base64 text you can embed in HTML, CSS or JSON, or decode Base64 back into an image. The file never leaves your browser.

Runs in your browser No sign-up

Direction

or drop it here (up to 10 MB). The file stays on your device.

How to use it

  1. Choose Image → Base64 and pick an image file, or choose Base64 → Image to go the other way.
  2. Select the output you need: data URL, plain Base64, an HTML img tag, a CSS background-image rule or Markdown.
  3. Copy the result and paste it into your code, email template or JSON.
  4. To decode, paste a data URL or plain Base64; the image is previewed and can be downloaded.

How it works

Base64 represents binary data with 64 printable characters, so an image can be written directly inside text formats. A data URL adds the media type in front, for example data:image/png;base64, followed by the encoded bytes. Browsers accept data URLs anywhere an image URL is allowed: the src of an img tag, a CSS url(), or an SVG image reference.

The encoded text is always about a third larger than the original file (4 characters for every 3 bytes). Inlining small icons and placeholders can save a separate network request, but inlined data cannot be cached on its own and is downloaded again with every page or stylesheet that contains it, so it rarely pays off above a few kilobytes. Many email clients block or strip data URL images, so test before using them in newsletters.

The file is encoded byte for byte: nothing is recompressed, and metadata inside the file (such as EXIF) is kept. When decoding, the tool accepts a full data URL, plain Base64, URL-safe Base64 and text copied together with a CSS url(…) wrapper. The image type is detected from the decoded bytes rather than trusted from the label.

Examples

Small icon in a stylesheet

A 600-byte PNG icon becomes an 800-character Base64 string. Using the CSS output gives a background-image rule you can paste into a class without hosting a separate file.

Image from an API response

An API returns a JSON field such as "iVBORw0KGgoAAAANSUhEUg…". Paste it into Base64 → Image to see the picture, check its size and download it as a PNG.

SVG logo in HTML

Encoding an SVG gives a data:image/svg+xml;base64 URL that works in an img tag. For SVG, the uncompressed SVG markup itself is often shorter than Base64, so consider inlining the SVG directly.

Frequently asked questions

Why is the Base64 version bigger than my image?

Base64 uses 4 text characters to store 3 bytes, adding about 33% plus a little for the data URL prefix. Gzip or Brotli compression on a web server reduces the difference but does not remove it.

Does encoding change or compress the image?

No. The exact bytes of the file are encoded, including any metadata. To make the string shorter, compress or resize the image first.

What is the difference between a data URL and plain Base64?

Plain Base64 is just the encoded bytes. A data URL adds a prefix such as data:image/jpeg;base64, which tells the browser what kind of file it is, so it can be used directly as an image source.

Is there a size limit?

Files up to 10 MB can be encoded here. Very long strings can make text fields and editors slow, and data URLs that large are not practical on websites.

Privacy

Encoding and decoding happen in your browser. Your image and the Base64 text are not uploaded, stored or included in analytics.