Image to Base64

What the file becomes

The reader is asked for a data URL. For a PNG, the string starts with data:image/png;base64, and the rest is the standard Base64 alphabet of the file bytes. JPEG, GIF, and WebP follow the same shape with their own media type. An SVG is accepted when the browser reports a type that starts with image/, commonly image/svg+xml. The page does not recompress, resize, or strip metadata. The payload is the file you dropped, encoded. A 70-byte file stays 70 bytes in the decoded payload. The size line is not the length of the Base64 text. It is the file size divided by 1024, fixed to one decimal, then the letters KB. Seventy bytes display as 0.1 KB. A 1024-byte file displays as 1.0 KB.

Base64 only is a split on the first comma. Everything after that comma is the panel. If a data URI ever contained another comma, only the first split would apply. The Data URI block above it is the full string, wrapped so a long payload can be selected. The preview uses that same data URI as the image address. The media-type line is the portion before the first semicolon, with the data: prefix removed, so a PNG shows image/png.

The drop area, the preview, and the two results

The dashed area says Drag & drop an image, or click to browse, and Drop image here while a drag is over it. Clicking opens the file chooser. A successful read clears the error line. A read that fails prints Failed to read file. Choosing a file whose type does not start with image/ prints Please select an image file. and does not replace the previous data URI, preview, or copy value. The error sits above the old result. Drop a valid image to replace it.

There is no quality slider, no max-width, and no button that copies only the payload. Copy output follows the data URI. If you need the payload in the clipboard, select the Base64 only panel. Download output is not on this card. The page does not remember the file after a reload.

When a data URI is the thing to paste

Use this page when a stylesheet or a document wants a data URI, or when you want to inspect the payload of a picture you already have on disk. Text that is not a file belongs on Base64 encode / decode, which reads the text box rather than a file picker and does not build a data:image prefix. A hex color is the color converter. A set of related hues is the color palette. Neither of those reads a file.

The byte length of a pasted string, as opposed to an image file, is the byte size calculator. This page will not tell you the UTF-8 size of the data URI. It tells you the source file size in the one-decimal KB line.

Files the page refuses, and what Copy output actually copies

A PDF, a text file, or any other type that does not start with image/ is refused before the reader runs. The picker hint lists PNG, JPG, GIF, SVG, and WebP, and the check itself is the image/ prefix, so another image type the browser labels that way is also read. The page does not convert SVG into PNG. It encodes the bytes it was given. A huge image is still read locally, and the resulting string can be large. There is no warning threshold.

Only one file is taken from a drop. The rest are ignored. The preview is a square crop of the image in the layout, with the file name beside it. That crop is display only. The payload still contains the whole file. Copy output after a success is the data URI. Copy output before any success reports that there is nothing to copy.

Rules and limitations

One file is read as a data URL when its type starts with image/. The Data URI panel is that string. Base64 only is the substring after the first comma. The size line is file bytes divided by 1024, to one decimal, labeled KB.

Copy output copies the data URI. A non-image file shows Please select an image file. and keeps the previous success. There is no resize, no recompress, no download, and no saved file.

Common problems

If an error appeared and the old preview stayed, the new file was not an image. Drop an image file to replace the previous result.

If the clipboard has a data: prefix and you wanted only the payload, Copy output used the data URI. Select the Base64 only panel for the part after the comma.

Frequently asked questions

About this tool

Maintained by Toolbench. For large or deeply nested files, split the input into smaller batches and verify representative results before using them in an import or application. Report reproducible problems through Contact.