Image to Base64

Base64 turns the bytes of an image into plain text, so the image can live inside an HTML attribute, a CSS rule or a JSON field instead of a separate file. Drop a PNG, JPG, WebP, BMP, TIFF or AVIF image here and you get a ready-to-paste data URI such as data:image/png;base64,iVBORw0KGgo.... Paste a data URI in the second box and you get the original image back. Encoding and decoding run in your browser through Rust compiled to WebAssembly, and the image is never uploaded.

How to convert an image to Base64

1. Drop an image on the drop zone, click to browse, or select several files at once.
2. The tool reads the file signature to detect the real format (it does not trust the extension) and builds the matching data URI with the right MIME type: image/png, image/jpeg, image/webp, image/bmp, image/tiff or image/avif.
3. The full data URI appears in the output box with its size next to the original file size. Click the copy button to put it on your clipboard.
4. With several files, the first one is displayed and a Download all (.zip) button saves one .txt file per image, each containing its data URI.

The image bytes are encoded exactly as they are: no resizing, no recompression, no quality loss. Decoding the string gives back a file identical to the one you dropped.

What a data URI looks like

A data URI has three parts: the data: scheme, the MIME type followed by ;base64, and after the comma the encoded bytes. Base64 uses 64 safe characters (A to Z, a to z, 0 to 9, + and /, with = as padding), which is why the result can be pasted anywhere text is accepted. The output from this tool is a single line with no line breaks, ready for HTML, CSS or JSON.

Copy-ready snippets

• HTML image: <img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Logo">. Keep the width, height and alt attributes as you would for a normal image.
• CSS background: .icon { background-image: url("data:image/png;base64,iVBORw0KGgo..."); }. Useful for small decorative icons inside a stylesheet.
• JSON payload: {"avatar": "data:image/webp;base64,UklGR..."}. Common for APIs that accept images as text fields. Some APIs expect only the part after the comma, in which case delete the data:...;base64, prefix.

When to inline an image as Base64

• Small icons and logos: a few-kilobyte icon embedded in HTML or CSS saves a separate request, and the overhead stays small.
• Self-contained files: a single HTML report, prototype, documentation page or demo that must work offline with no image folder next to it.
• APIs and config: JSON or YAML payloads that only accept text, test fixtures, or seeding a database field that stores images as strings.
• Email templates: possible, but support is uneven. Several major email clients block or strip data URI images, so test in the clients your audience uses. Hosted images or CID attachments are usually more reliable.

When not to use Base64

Base64 is about 33% larger than the binary file, because every 3 bytes become 4 characters. The tool shows both sizes so you can see the cost before you commit. Avoid inlining large photos, hero images or anything over a few dozen kilobytes: they bloat the HTML or CSS, delay rendering of the whole document, and cannot be cached separately by the browser. An image reused on many pages is better as a normal file, which the browser downloads once. Also check your Content Security Policy: if img-src does not allow data:, inlined images will not display.

To keep the string short, compress or resize the image first with the image compressor, or convert it to WebP or AVIF with the image converter.

Decode Base64 back to an image

Paste a full data URI or just the raw Base64 string in the decode box and click Decode to Image. Anything before the first comma is ignored, so both forms work. The tool detects the image format from the decoded bytes, shows a preview with the format and size, and offers a download with the correct extension. If the pasted string was wrapped over several lines, remove the line breaks first. If the decoded data is not a PNG, JPG, WebP, BMP, TIFF or AVIF image, you get an error instead of a broken file.

Private by design

Many online converters upload your image to encode it. Here everything happens in your browser tab: no request carries the image or the pasted string to a server, which you can confirm in the Network tab of your developer tools. That matters for screenshots of dashboards, scanned documents, unreleased designs or Base64 strings copied from internal APIs and logs. One more point: because the original bytes are kept as they are, any EXIF metadata in a photo (camera model, GPS location) is also inside the Base64 string. Remove it first with the EXIF viewer and remover before you publish an inlined photo.

FAQ

Does converting to Base64 reduce image quality?

No. Base64 is an encoding, not compression. The bytes are copied as they are, and decoding returns the exact same file.

Why is my Base64 string bigger than the image?

Base64 represents 3 bytes with 4 text characters, so the output is about a third larger than the original, plus the short data: prefix.

Can I convert SVG or GIF to Base64 here?

This tool accepts PNG, JPG, WebP, BMP, TIFF and AVIF. For an SVG, rasterize it with the SVG to PNG converter first, or encode the SVG text directly with the Base64 encoder and decoder.

How do I get the Base64 without the data URI prefix?

Copy the output and delete everything up to and including the comma after base64. What remains is the raw Base64 string.

Is my image uploaded?

No. Encoding and decoding run locally with WebAssembly. Nothing is sent, logged or stored.