Image to Base64 converter
Turn an image into a Base64 string or data URI, ready to paste into HTML, CSS, JSON or email templates.
Loading tool…
What is an image Base64 string?
Base64 is a way of writing binary data, like an image, as plain text. A data URI puts that text after a short header, such as data:image/png;base64,…, so the image can be embedded directly in HTML, CSS, JSON or an email without a separate file.
Embedding is best for small images such as icons and logos, because Base64 text is about 33% larger than the original file. Everything happens in your browser, so your images are never uploaded.
How it works
Add an image
Select, drop or paste any image, including SVG and ICO.
Pick a format
Choose plain Base64, a data URI, an HTML img tag or a CSS background.
Copy it
Copy the code in one click, or download it as a text file.
Guide
- Base64 images and data URIs explained
What a Base64 image and data URI are, how to use them in HTML, CSS and email, when embedding is a bad idea, and how to convert Base64 back into an image file.
Questions
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 tool gives you the complete tag to copy.
How do I use a Base64 image in CSS?
Use it as a URL: background-image: url("data:image/png;base64,…"). The tool gives you the complete rule.
Why is the Base64 text bigger than my image?
Base64 uses 4 characters for every 3 bytes, so it's about 33% larger. Use it for small images only, and keep large photos as normal files.
Can I turn Base64 back into an image?
Yes, use our Base64 to image converter.