Images & PDF

Image to Base64 Data URI Converter

Convert any image to a Base64 data URI for inlining in CSS, HTML or JSON — and decode a data URI back into a downloadable image. Runs entirely in your browser.

🔒 100% private. Images are encoded in your browser and never uploaded.
Drop images here, click to choose, or Ctrl+V to paste PNG, JPEG, WebP, GIF, SVG, AVIF, ICO or BMP · several at once · up to 10 MB each
Developer / raw response

What is this tool?

This image to Base64 converter turns pictures into data URIs you can paste straight into CSS, HTML, Markdown or JSON, and turns a data URI back into an image file. Drop several images at once and each gets its own card with the output, its dimensions, type, original and encoded size, and a gzip estimate. You can shrink images before encoding, and SVG is URL-encoded to keep it short. The decoder accepts raw Base64, data URIs, CSS url() values, img tags and JSON, and detects the real image type. Everything runs in your browser, so nothing is uploaded.

How to Use

  1. Open the Image → Base64 tab, then drop one or more images, click the box to choose them, or paste with Ctrl+V.
  2. Pick an Output format: Data URI, Raw Base64 only, CSS background-image, HTML img tag, Markdown image or JSON string. SVG files are URL-encoded by default, which is usually shorter.
  3. Optionally tick Shrink images before encoding to resize and recompress them; each card shows the original, optimized and encoded sizes.
  4. Copy or download each result from its card, or use Copy all.
  5. To go the other way, switch to Base64 → Image and paste a string, data URI, CSS url() or img tag. Download the image in its own format, or as PNG or JPG.

Frequently Asked Questions

Why is the Base64 text larger than my image file?

Base64 uses 4 text characters for every 3 bytes of data, so the output is about 33% larger, plus the data:image prefix. Each card shows the exact size, and roughly what it costs once your CSS or HTML is gzipped.

Is there a file size limit?

Yes. Images over 10 MB are rejected because the resulting text is too large to inline usefully. Inlining works best for small images such as icons and logos. Only the start of very long output is shown on the page; Copy and Download always give the full text.

Why is my SVG not Base64?

SVG is text, so a URL-encoded data URI (data:image/svg+xml,...) is usually 20 to 30% shorter than Base64 and works in CSS and HTML. Untick the SVG option if you need Base64.

Can I decode Base64 that has no data:image prefix?

Yes. The tool reads the first bytes to detect PNG, JPEG, GIF, WebP, SVG, AVIF, BMP, ICO, HEIC and TIFF, so the download gets the right extension. Quotes, url(), img tags, JSON wrappers, line breaks and URL-safe Base64 are handled too.

Other tools

There are more calculators, converters and editors on Wivrix. If something is missing, tell us.