Is my image uploaded anywhere?

No. The file is read by the browser’s File API and encoded by JavaScript in the page; nothing is sent to a server. Once the page has loaded, it works with the network disconnected.

Why is the Base64 bigger than the image?

Base64 writes every three bytes as four characters, so it is about a third larger, plus up to two = signs of padding and the data:image/png;base64, prefix. Gzip or Brotli on the page wins some of that back, but not all of it.

Should I use data URIs for images?

For small ones — icons and tiny placeholders of a few kilobytes at most — where saving a request is worth more than caching. A larger image is better as a file: it is cached on its own, loads in parallel, and does not hold up the stylesheet.

How do I convert Base64 back to an image?

Switch to Base64 → Image and paste either the full data URI or the Base64 on its own. The type is detected from the bytes, the image is previewed, and Download saves it with the right extension.

Which image formats are supported?

PNG, JPEG, GIF, WebP, AVIF, SVG, BMP, ICO, TIFF and HEIC are recognised. JPEG XL, JPEG 2000, Photoshop and camera raw files are not. TIFF and HEIC encode correctly, but of the major browsers only Safari displays them.

Encoding & Conversion

Image to Base64 Converter — and Base64 to Image

Choose, drop or paste an image to get its data URI with ready-made CSS and HTML, or paste Base64 to see the image and download it. The file never leaves your browser.

Choose an image

or drop one here, or paste a screenshot. The file is read in your browser and never uploaded.

This tool runs entirely in your browser. Your input is never uploaded, stored or logged.

How it works

A data URI puts a whole file inside a URL: data:, the media type, ;base64, and the bytes as Base64 text (RFC 2397). The media type is the part converters most often get wrong, because they take it from the file name. Here it is read from the bytes, using the signatures in the WHATWG MIME Sniffing standard — 89 50 4E 47 0D 0A 1A 0A for PNG, FF D8 FF for JPEG — so a JPEG renamed to .png still gets image/jpeg, and the mismatch is pointed out. Width and height come from the header (PNG’s IHDR chunk, JPEG’s frame header, WebP’s VP8, VP8L or VP8X chunk) without decoding a pixel; AVIF and HEIC keep theirs several boxes deep, so they are left blank rather than guessed. The file is read by the browser and never uploaded, which matters when a screenshot shows a customer’s details.

Inlining is a trade, and above a few kilobytes usually a poor one. Base64 writes every three bytes as four characters, so the text is a third larger than the file before the prefix is added. More importantly, an inlined image cannot be cached on its own: it is downloaded again every time the page or stylesheet that holds it changes, and inside a stylesheet it delays rendering until the whole file has arrived. Build tools draw the same line — Vite inlines assets only below 4 KiB by default — and this tool warns above it. Small icons and placeholders are where a data URI earns its keep.

SVG is already text, so it does not need Base64. Percent-encoding only what would break it — %, #, double quotes, &, angle brackets, backslashes, control characters and non-ASCII — is usually shorter, and both forms are offered with their lengths. Two mistakes cause most blank SVGs: a raw # in a colour such as fill="#fff", which a URL reads as the start of its fragment, cutting off the rest; and a missing xmlns="http://www.w3.org/2000/svg", which inline SVG can do without but an SVG loaded as an image cannot. Decoding accepts a data URI or bare Base64 with line breaks, the URL-safe alphabet or no padding, and when the bytes are not an image it says what they are: a PDF, a ZIP, plain text, Base64 encoded twice. The preview is built only from bytes recognised as an image, inside an img element, where an SVG’s scripts cannot run.

Common problems

Every example below is run against this tool in our test suite, so what it says here is what the tool actually does.

This decodes to a PDF document, not an image.

JVBERi0xLjcK

Why:: The Base64 is valid, but the bytes are another kind of file. Base64 carries any bytes at all, so nothing in the text says it is an image — only the first few decoded bytes do.
Fix:: Check where the string came from: an API field or an email attachment often holds a PDF or a ZIP. The message names what the bytes actually are.

Not valid base64: the length is incomplete.

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFC

Why:: Base64 is written in groups of four characters, and a length one past a whole group cannot come from any input. The string was cut off — by a log line limit, a terminal, or a copy that stopped at a line break.
Fix:: Copy the value again in full. A string cut at a group boundary does decode, and is then flagged as a truncated image instead.

The data URI shows a broken image, but decodes here.

Why:: An SVG declared as anything but image/svg+xml, or Base64 in the URL-safe - and _ alphabet. Browsers recognise PNG, JPEG, GIF and WebP from their bytes whatever the declared type, but never SVG, and they decode data URIs with the standard alphabet only.
Fix:: Use the rebuilt data URI from Base64 → Image, which carries the real type and the standard alphabet. Each problem is named in the warnings.

An SVG data URI renders as nothing.

Why:: Either the root <svg> has no xmlns="http://www.w3.org/2000/svg" — optional for SVG inline in HTML, required for SVG loaded as an image — or a raw # in a colour has cut the URI short, because # starts the fragment of a URL.
Fix:: Add the xmlns attribute and encode # as %23. Both are flagged here, and the URL-encoded output escapes # for you.

Refused to load the image because it violates the Content Security Policy directive "img-src".

Why:: data: is a scheme of its own, so a policy of img-src 'self' does not allow it. The URI is fine; the page is refusing it, and a CSS background image falls under the same directive.
Fix:: Add data: to img-src. Only images need it — never add data: to script-src.

Frequently asked questions

Is my image uploaded anywhere?: No. The file is read by the browser’s File API and encoded by JavaScript in the page; nothing is sent to a server. Once the page has loaded, it works with the network disconnected.
Why is the Base64 bigger than the image?: Base64 writes every three bytes as four characters, so it is about a third larger, plus up to two = signs of padding and the data:image/png;base64, prefix. Gzip or Brotli on the page wins some of that back, but not all of it.
Should I use data URIs for images?: For small ones — icons and tiny placeholders of a few kilobytes at most — where saving a request is worth more than caching. A larger image is better as a file: it is cached on its own, loads in parallel, and does not hold up the stylesheet.
How do I convert Base64 back to an image?: Switch to Base64 → Image and paste either the full data URI or the Base64 on its own. The type is detected from the bytes, the image is previewed, and Download saves it with the right extension.
Which image formats are supported?: PNG, JPEG, GIF, WebP, AVIF, SVG, BMP, ICO, TIFF and HEIC are recognised. JPEG XL, JPEG 2000, Photoshop and camera raw files are not. TIFF and HEIC encode correctly, but of the major browsers only Safari displays them.

Last updated 28 September 2026