Data URL / Base64 Image Converter

Convert images to Base64 data URLs and decode Base64 strings back to images.

How to Use Data URL / Base64 Image Converter

1

Upload a file

Select an image, font, or other file to convert.
2

Generate the data URL

Click convert to create the base64-encoded data URL string.
3

Copy the result

Click copy to grab the data URL for use in CSS or HTML.

Tested tool guide Tested browser tools Checked August 16, 2026

What Data URL / Base64 Image Converter does, with a checked example

Data URL / Base64 Image Converter switches between image bytes and a textual value such as data:image/png;base64,.... Select an image to obtain a copyable data URL, or paste Base64 image data to reconstruct and inspect the image. The selected file and pasted payload stay in the browser during conversion. The common surprise is size: Base64 is an encoding, not compression. Its payload is roughly one-third larger than the original binary data, with the data URL prefix adding more characters.

Worked example

A concrete input and expected output from the current implementation.

Input

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==

Expected output

A decoded GIF image with intrinsic dimensions of 1 by 1 pixel.

The prefix identifies the payload as a Base64-encoded GIF. After decoding, its GIF logical screen descriptor contains 01 00 for both width and height, which represents 1 pixel in each dimension.

How the result is produced

Encoding an image

Encoding reads the selected image as bytes, represents those bytes with Base64 characters, and prefixes the result with data:, the image media type, and ;base64,. For example, a GIF begins with data:image/gif;base64,. The prefix tells a consumer how to interpret the payload; it is not part of the Base64 alphabet.

Decoding a data URL

Decoding converts the Base64 payload back into its represented byte sequence and displays it as an image when the media type and bytes describe a supported image. Base64 padding may end in one or two equals signs. Decoding does not change resolution, repair damaged data, or convert the underlying image format merely because the result appears in an image preview.

Good uses

Converting a small logo or icon into a data URL for an HTML src attribute or CSS url() value.
Decoding a Base64 image from an API response to confirm that the payload contains the expected image.
Recovering an image from a saved data URL when only its textual representation remains.

Limits and checks

Base64 normally uses four encoded characters for every complete group of three source bytes. The resulting data URL is larger than the original image file.
The declared media type can disagree with the actual bytes. Adding a data:image/png prefix does not convert JPEG bytes into PNG data.
A data URL can be valid yet impractical because the receiving editor, browser feature, database field, or application may impose its own length limit.

Common questions

Is a data URL the same as raw Base64?

No. Raw Base64 contains only the encoded payload. A data URL also contains the data: scheme, a media type such as image/png, the ;base64 marker, and a comma. A field asking for raw Base64 may reject that prefix, while an HTML image source can use the complete data URL.

Will decoding restore the original image exactly?

If the Base64 payload is complete and valid, decoding reconstructs the bytes represented by that payload. Base64 decoding itself does not resize or recompress the image. The answer is no if the text was truncated, altered, decoded under the wrong character interpretation, or contains encoded data that is not actually an image.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.