Encode images to Base64 data URI strings for embedding in HTML/CSS.
Select an image file and the converter returns one self-contained data URI containing the file's media type and Base64-encoded bytes. The complete string can be used in places that accept URLs, including an HTML img src value or a CSS url() value. Conversion happens in the browser, so the selected image is not uploaded. The common surprise is size: Base64 is an encoding, not compression, and its payload is usually about one-third larger than the original binary file, plus the data URI prefix.
A concrete input and expected output from the current implementation.
Input
Upload blank.svg with these exact UTF-8 contents and no trailing newline: <svg xmlns="http://www.w3.org/2000/svg"/>
Expected output
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciLz4=
The SVG produces a 56-character Base64 payload. The final = pads the last two-byte group, while image/svg+xml identifies the decoded file as SVG.
The returned string contains data:, an image media type such as image/png or image/svg+xml, and ;base64, followed by the encoded payload. A browser uses the media type to interpret the decoded image bytes. Copying only the payload can satisfy fields that request raw Base64, but that portion alone is not a complete data URI.
Base64 maps each group of three image-file bytes to four printable characters. When the byte count is not divisible by three, the payload ends with one or two = padding characters. Encoding does not change the image's dimensions, colors, or format. Decoding the payload reproduces the bytes represented by the URI rather than creating a different image.
Yes, when that location accepts a URL. Use the full data URI as an img src value or inside CSS url(). Do not remove the data: prefix for those uses. A site's Content Security Policy can still reject the image if its applicable directive does not permit the data: scheme.
No. Base64 preserves the represented file bytes but expands them into printable characters. For n input bytes, a padded Base64 payload contains 4 x ceil(n / 3) characters, before the data URI prefix. Resize, recompress, or change the source image format first if reducing transfer or document size is the goal.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.