EncodingFreeNo uploadNo sign-up
Image to Base64 Converter
Drop an image and copy it as a Base64 data URI, ready for HTML, CSS, JSON or email templates.
Runs in your browser. Your data is never sent to a server.
How to use the Image to Base64
Add images
Drop one or more images or paste one from the clipboard. PNG, JPG, SVG, WebP, GIF, ICO and AVIF work.
Choose the format
Data URI, plain Base64, a CSS background-image rule, an HTML img tag, Markdown or a JSON string.
Copy the code
Copy the result for each image. The size shown helps you decide whether embedding is worth it.
Why use this tool
Embedding a small image as Base64 saves an extra HTTP request and keeps everything in one file. It is handy for icons in CSS, logos in HTML email templates, images in JSON APIs, single-file HTML reports and placeholders in tests.
The converter reads the image in your browser and builds the data URI with the right MIME type, so a PNG becomes data:image/png;base64,… and an SVG data:image/svg+xml;base64,…. It also shows the encoded size, which is about a third larger than the original file.
Frequently asked questions
How do I convert an image to Base64?
Drop the image on the converter. The Base64 data URI appears right away; choose another output format if you need CSS, HTML or Markdown.
How do I use a Base64 image in HTML?
Put the data URI in the src attribute: <img src="data:image/png;base64,…" alt="…">. The HTML img option builds this tag for you.
How do I use a Base64 image in CSS?
Use it as a URL: background-image: url("data:image/png;base64,…"). Choose the CSS option to copy the full rule.
Why is the Base64 bigger than my image?
Base64 uses 4 characters for every 3 bytes, so the text is about 33% larger than the file. That is normal.
Are my files uploaded to a server?
No. formatmath converts files with code that runs inside your browser. Your files are never uploaded, stored or seen by us.
Is it free?
Yes. There is no watermark and no daily limit. An account is optional and only keeps a history of your conversions.