🧬 Encode · Decode · Data URI

Image to Base64 Converter and Decoder

Turn an image into a Base64 data URI, CSS or HTML snippet, or paste Base64 to get the image file back. Made for developers and designers, and it runs in your browser.

  • ✓ Data URI, raw, CSS and HTML
  • ✓ Detects the real file type
  • ✓ Safe SVG preview
🧬

Drop an image to encode

or click to select — PNG, JPG, GIF, WebP, SVG, AVIF, ICO, BMP up to 25 MB

What is an image to Base64 converter?

Base64 is a way of writing binary data, such as a PNG or JPG, using only plain text characters. An image to Base64 converter reads your file and turns it into that text, usually wrapped in a data URI that starts with data:image/png;base64,. You can paste it straight into HTML, CSS, JSON or Markdown, and the image displays without a separate file.

This tool works both ways. Encode an image to get ready-to-paste snippets with sizes, or decode a Base64 string back into a real image file, with its type identified from the bytes. Nothing leaves your device, there is no sign-up, and the page keeps working offline once it has loaded.

How to convert an image to Base64 in 4 steps

  1. Choose a mode

    Encode turns an image into text; Decode turns text back into an image.

  2. Add your input

    Drop an image file, or paste a Base64 string or data URI.

  3. Check the result

    See the size increase, or the detected file type and dimensions.

  4. Copy or download

    Copy the snippet you need, or download the decoded file.

Supported formats

PNG / JPG / GIF / WebPinput · output

Encoded and decoded, with preview and dimensions.

SVGinput · output

Uses image/svg+xml; previewed safely as an image.

AVIF / ICO / BMPinput · output

Detected by signature; preview depends on your browser.

TIFF / HEICinput · output

Converted both ways, but most browsers cannot preview them.

Textoutput

Data URI, raw Base64, CSS and HTML, or a .txt file.

Images up to 25 MB can be encoded; a warning appears above about 1 MB. Very long results are shortened in the boxes, but Copy and .txt always use the full text.

How does it work?

The file is read as raw bytes in your browser. The first bytes, the file's “magic number”, reveal the real format, so the MIME type is correct even if the file name is wrong. The bytes are then encoded with the browser's built-in Base64 function. Decoding cleans whitespace and URL-safe characters, checks the alphabet and length, and rebuilds the original bytes.

🔒

Local only

Nothing is uploaded, so private screenshots stay private.

🧪

Real type check

PNG, JPG, GIF, WebP, AVIF, SVG and more are identified from their bytes.

🛡️

Safe SVG

SVG is only shown as an image, so scripts inside it never run.

When should you embed images as Base64?

Embedding saves a separate request because the image arrives inside the HTML or CSS that is already loading. That helps with very small, frequently used graphics: a 1 KB icon, a tiny loading spinner, a placeholder or a logo in a single-file HTML report.

For anything larger it usually hurts. Base64 text is about a third bigger than the original file. An embedded image cannot be cached on its own, so it is downloaded again whenever the page or stylesheet changes, and a large data URI in CSS delays the first render. As a rule of thumb, embed images of a few kilobytes and link to everything else. Shrink files first with the Image Compressor.

Base64 is also useful when an image has to travel through a text-only channel: a JSON API field, a configuration file, a test fixture or a single self-contained HTML page you want to send to someone.

Data URI, raw Base64, CSS or HTML?

  • Data URI is the full value, data:image/png;base64,…, which works anywhere a URL is expected.
  • Raw Base64 is just the encoded text, without a prefix. APIs and JSON fields often expect this, with the type sent separately.
  • CSS gives a ready background-image declaration.
  • HTML gives an <img> tag with width, height and your alt text.

Email is a special case: support for data URI images varies between email apps, and some webmail services do not display them. For newsletters, host the image and link to it instead.

For SVG icons, a URL-encoded data URI (data:image/svg+xml,%3Csvg…) is often smaller than Base64.

Decoding Base64 back to an image

Paste the string from a stylesheet, API response or log file into the Decode tab. You can paste a whole <img> tag or url("…") line, and the data URI is extracted for you. Line breaks are ignored, and URL-safe characters (- and _) and missing = padding are handled.

The tool then checks the first bytes to find the real format, because a data URI label can be wrong. The file downloads with the matching extension. If the data is cut off, the browser cannot draw it, and the tool tells you instead of producing a broken image.

Keep in mind that decoding only restores the bytes that were encoded. If someone shrank or recompressed the image before encoding it, the decoded file has that lower quality too. To change the decoded file's format afterwards, use the Image Converter.

Frequently asked questions

Open the Encode tab and drop your image onto the box. The data URI, raw Base64, CSS and HTML versions appear at once, each with a Copy button. You can also download the data URI as a .txt file, which is handy for very long strings.
Switch to the Decode tab and paste the Base64 text or data URI. The tool decodes it as soon as you paste, shows a preview with dimensions and detects the format. Click Download to save it as a PNG, JPG, GIF, WebP, SVG or other matching file.
Base64 uses four text characters to represent every three bytes of data, so the result is about 33% larger, plus a few padding characters. The data URI prefix adds a little more. Gzip or Brotli compression on your server recovers only part of that overhead.
A data URI is a URL that contains the file itself instead of pointing to it. It starts with data:, then the media type such as image/png, then ;base64, and the encoded data. Browsers treat it like a normal image address in HTML, CSS and JavaScript.
Only for very small images. It saves a network request, but the data grows by a third and cannot be cached separately. Modern HTTP/2 and HTTP/3 connections make extra requests cheap, so for most images a normal, compressed file in a modern format is faster.
Yes. SVG files are encoded with the image/svg+xml type and previewed safely as an image, so any scripts inside never run. For small SVG icons in CSS, a URL-encoded data URI is often shorter than Base64, and the decoder accepts both kinds.
The usual reasons are a string that was cut off when copying, extra characters such as quotes or code around it, or text that is not Base64 at all. The tool names the first invalid character and warns about wrong lengths. If it decodes but will not preview, the image data itself is probably incomplete.
No. Base64 is an encoding, not encryption. Anyone can turn the text back into the original image in seconds, exactly as this tool does. Do not rely on it to hide private pictures or documents; it only makes binary data safe to place in text formats.
You can encode images up to 25 MB, and the tool warns you above about 1 MB because such large strings are impractical in code. Very long results are shortened in the text boxes for speed, but the Copy buttons and the .txt download always contain the complete text.
No. Encoding and decoding both happen in your browser with built-in functions, and nothing is sent to a server. You can safely convert screenshots, signatures or internal graphics, and the page keeps working offline once it has loaded. Closing the tab clears everything.