Convert an image to a Base64 string or data URI, or paste Base64 to preview the image and download it. Handles PNG, JPG, GIF, WebP and SVG; nothing is uploaded.
If this tool isn’t working as expected, please take a screenshot of the error and report the problem here so we can investigate and improve it.
Two directions on one page. Image → Base64 reads a PNG, JPG, GIF, WebP or SVG file in your browser and gives you three copy-ready outputs: the full data URI (data:image/png;base64,...), the bare Base64 string and an <img> tag.
Base64 → Image works as a Base64 image decoder: it takes a data URI or a raw Base64 string, works out the real image type from its bytes, shows a preview with its dimensions and size, and lets you download it with the right file extension. Neither direction uploads anything.
A data URI avoids a separate image request, but it can't be cached on its own - it is re-downloaded with whatever page or stylesheet contains it - and the Base64 text is larger than the file. That trade favors small icons and works against photographs.
Upload or drop an image to encode it, or open the Base64 → Image tab and paste a string or data URI to decode it.
Image → Base64 gives you the encoded text; Base64 → Image gives you a preview and a file.
Copy the data URI, the bare Base64 string or an img tag - or download the decoded image.
The preview shows what the data really contains, with its type, size and dimensions when decoding.
Encode a small PNG or SVG icon, copy the data URI and use it as background-image: url("data:..."). There's no dedicated CSS copy button, so add the url() wrapper yourself.
Copy the Base64 string only for an API that expects image data as a string field. Some APIs also want the data: prefix, so check its documentation.
Paste the Base64 value into Base64 → Image, check the detected type and download the file.
The decoder names the detected type, tells you when the bytes aren't a recognised image, and notes when a data URI's declared type disagrees with its bytes.
Uploaded File
A 1×1 pixel PNG (68 bytes)Data URL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=data: + the file's MIME type + ;base64, + the encoded data. This 68-byte file becomes 92 characters of Base64, and the page shows that as +35.3%.
Base64 → Image input (no prefix needed)
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=Result
Type: image/png
Size: 68 bytes
Dimensions: 1 × 1 px
Download .pngWith or without the data:image/png;base64, prefix, the decoder reads the first bytes to find the type, so a wrong or missing prefix doesn't matter for PNG, JPEG, GIF, WebP and SVG.
Very large images are accepted, but the string can be millions of characters long and make the tab slow.
There's no resizing, compression or format conversion first. Shrink a large image with the Image Compressor before encoding it.
PNG, JPEG, GIF, WebP and SVG are detected automatically. A data URI that declares another image type, such as image/bmp, is accepted if your browser can display it.
These cover embedding the result, how much larger Base64 gets, and decoding a string back into a file.
In HTML, use the data URI as the image source: <img src="data:image/png;base64,..." alt="">. The HTML img Tag button copies exactly that. In CSS, wrap it in url(): background-image: url("data:image/png;base64,..."). The MIME type in the prefix has to match the file, such as image/jpeg for JPG, image/svg+xml for SVG or image/webp for WebP.
About a third: every 3 bytes of the file become 4 characters of text. The page shows the original size and the Base64 size for your file, with the percentage difference, and the data: prefix adds a few more characters.
Open the Base64 → Image tab, paste the string - with or without its data:image/...;base64, prefix - and choose Decode image. The page detects PNG, JPEG, GIF, WebP and SVG from the bytes, shows a preview with its size and dimensions, and offers a download with the matching extension, such as .png for a PNG. If it says the data isn't a recognised image, the string may have been cut short, or it may encode something other than an image.
Usually there's no need. An SVG is already text, so you can paste it into your HTML as an inline <svg> element, or use it in CSS as a percent-encoded data URI, which is usually shorter than Base64. This page produces Base64 for an SVG the same way it does for any other image.
Leave your email so we can prioritize similar tools and updates.