Convert images to complete data URL format for direct HTML/CSS embedding.
Image to Data URL turns the exact bytes of a selected image into a complete data: URL that can be placed in an HTML attribute or CSS url() value. It Base64-encodes the file and adds the image media type plus the data URL prefix, so the result is more than a bare Base64 string. The common surprise is size: Base64 expands binary data by roughly one third before the prefix is added. The conversion changes representation, not image dimensions, pixels, quality, or file format.
A concrete input and expected output from the current implementation.
Input
Upload pixel.gif as image/gif, containing exactly these 34 bytes in hexadecimal: 47 49 46 38 39 61 01 00 01 00 80 00 00 00 00 00 FF FF FF 2C 00 00 00 00 01 00 01 00 00 02 01 4C 00 3B
Expected output
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==
Those 34 GIF bytes encode to the 48-character Base64 payload shown. Adding the image/gif media type and ;base64 marker produces the complete data URL.
A Base64 image data URL has the form data:<media-type>;base64,<payload>. For a GIF, the prefix is data:image/gif;base64,. Everything after the comma encodes the original file bytes as ASCII characters. Trailing equals signs are Base64 padding and belong to the payload. The entire string, including the prefix and comma, is the usable URL.
The generated string represents the stored image file, including its existing compression and metadata, rather than a new description of its pixels. Decoding the Base64 portion recovers the original bytes when the media-type prefix is excluded. Since data URL conversion does not reduce the source file, a large PNG or JPEG produces an even larger text value.
Yes. A complete result can be assigned to an img element's src attribute or placed inside CSS url(), provided that context accepts data URLs. Quote it as required by the surrounding HTML or CSS. For large images, a normal file URL is usually easier to maintain, and a site's Content Security Policy may disallow data: images.
No. Encoding the file as a data URL does not resize, redraw, or recompress its pixels. This tool performs the conversion entirely in the browser, so the selected image is not uploaded. The resulting string still contains the complete image data, however, so anyone who can read that string can recover and view the image.
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.