Images
Image to Base64
Image to data URI and back again, ready to paste into your code.
Base64 lets you embed an image straight into code: an icon inside a stylesheet, a logo in an HTML email, a small illustration in an SVG — no extra server request needed. This tool works in both directions. Drop an image and get its full data URI (data:image/png;base64,…), with the output size displayed and a one-click copy button. Or paste a data URI you found in existing code: the image appears immediately and can be downloaded as a regular file. Conversion is instant and happens entirely in your browser — neither your images nor your code ever leave your device.
How does it work?
- Drop an image to get its Base64 data URI, with the size displayed.
- Copy the result in one click, ready for your CSS or HTML.
- Or paste an existing data URI: the image shows up and downloads in a click.
Frequently asked questions
What is a Base64 image used for?
Embedding the image directly in code: icons in CSS, images in HTML emails, favicons, assets inside an SVG or JSON payload. The image loads with the document itself, with no extra network request.
Does Base64 make files bigger?
Yes, by about 33% compared to the binary file, and the result can't be cached separately by the browser. It's a good fit for small images (a few KB) reused in code, and counter-productive for photos.
Which image formats are supported?
Any format your browser can read: PNG, JPG, WebP, GIF, SVG, AVIF… The generated data URI keeps the original MIME type, and decoding accepts any valid image data URI.