Image to Base64 Converter
Convert images to Base64 data URIs and back again. Encode any image to ready-to-use HTML and CSS, or decode a Base64 string into a downloadable image. Fast, free, and 100% in your browser — nothing is ever uploaded.
Mode
Drop an image here or click to upload
PNG, JPG, SVG, WebP, GIF — converted locally, never uploaded
How to convert an image to Base64
- Drag and drop an image, or click to choose a file.
- The image is encoded instantly as a Base64 data URI.
- Copy the raw data URI, or the ready-made HTML or CSS snippet.
How to convert Base64 back to an image
- Switch to the Base64 → Image mode.
- Paste a Base64 string or full data URI.
- Preview the decoded image and download it as a file.
What is a Base64 data URI?
A data URI embeds a file directly inside your code as a text string, so the browser doesn't need a separate request to load it. This is ideal for small icons and SVGs where one fewer round-trip improves performance. Keep in mind Base64 adds roughly 33% to the file size, so reserve it for small assets.
Building a UI around your assets? Generate backgrounds with the CSS gradient generator and lay everything out with the CSS grid & flexbox generator.
Frequently asked questions
How do I convert an image to Base64?
Drag an image into the box or click to upload. The tool instantly encodes it as a Base64 data URI and gives you ready-to-paste HTML and CSS snippets.
Can I convert Base64 back to an image?
Yes. Switch to 'Base64 → Image' mode, paste a Base64 string or full data URI, and the tool renders a preview you can download as a PNG, JPG, SVG, or WebP file.
Are my images uploaded to a server?
No. The conversion happens entirely in your browser using the FileReader API — your images never leave your device.
When should I use a Base64 data URI?
Base64 inlining is great for small images, icons, and SVGs you want to embed directly in HTML or CSS to avoid an extra network request. For large images, a regular file is usually more efficient because Base64 increases size by about 33%.
Which image formats are supported?
Any browser-readable image works, including PNG, JPG, SVG, WebP, and GIF.
Need a whole screen, not just a snippet?Describe an app screen and MakeUI generates editable UI you can export to Figma or code.
Try MakeUI