Drag an image, get a Base64 data URL. Everything stays in your browser.
Drag an image here, or
PNG, JPG, WebP, SVG. Up to 5 MB.
This image to Base64 converter turns a PNG, JPG, WebP, or SVG file into a Base64 data URL you can paste straight into HTML, CSS, or JSON. Drop an image onto the page and the encoded string appears immediately, along with the file name, size, dimensions, and MIME type so you can confirm you grabbed the right file. Conversion happens entirely in your browser with the FileReader API — the image is never uploaded to a server.
Base64 embedding is useful when you want an image to travel inside the document instead of as a separate HTTP request: small icons in a stylesheet, logos in HTML emails, placeholder images in prototypes, or fixtures in test code and API payloads. Because the data URL contains the whole image, the result works offline and survives copy-paste between projects without broken paths.
You can switch between the full data URL (with the data:image/png;base64, prefix) and the raw Base64 string, depending on what the destination expects. One-click buttons also copy the output pre-wrapped as a CSS background-image rule or an HTML img tag, which saves you from hand-assembling the syntax. Files up to 5 MB are supported, though Base64 is best reserved for small assets — the encoding makes the data roughly a third larger than the original file.
Drag a PNG, JPG, WebP, or SVG onto the drop zone, or click Choose image to browse for a file. Images up to 5 MB are accepted.
A preview appears next to the filename, size, dimensions, and MIME type so you can verify the right image was loaded.
Use the Data URL tab for the full string with the data: prefix, or Raw Base64 for just the encoded payload.
Click Copy for the plain output, or use Copy as CSS background or Copy as HTML img to get a ready-to-paste snippet.
No. The file is read locally in your browser with the FileReader API and the Base64 string is generated on your device. Nothing is transmitted over the network.
A data URL embeds a file directly in text using the form data:image/png;base64, followed by the Base64-encoded bytes. Browsers can render it anywhere a normal image URL is accepted, such as an img src or a CSS background-image.
Yes. Base64 represents every 3 bytes of binary data as 4 text characters, so the encoded output is roughly 33 percent larger than the original file. That is why Base64 embedding is best for small images like icons and logos.
No. Base64 is a reversible text encoding, not encryption — anyone can decode it instantly. It provides no confidentiality and should never be used to protect sensitive data.
Use Base64 for small assets where avoiding an extra HTTP request matters, such as inline icons, email images, or self-contained HTML files. For large photos or frequently cached assets, a regular image file served separately is usually faster.
Any image type your browser can read, including PNG, JPG, WebP, GIF, and SVG, up to 5 MB per file.
ReSlug shortens any URL with click analytics. Free plan includes custom domains.