Tools · Image · Image to Base64
Image to Base64
Turn an image into a Base64 data URI with ready-to-copy HTML and CSS snippets.
Add a file and run the tool.
Your file is ready.
Try a different file, or try again.
Settings
Choose a file, adjust the settings, then run the tool.
Runs fully in your browser. Nothing is uploaded.
How it works
Drop one or more images.
Copy the data URI, the <img> tag, or the CSS snippet you need.
Paste it wherever you're using it - your HTML, CSS, or email template.
Frequently asked questions
It's an image encoded as text and embedded directly in a data:image/...;base64,... string, so it can live inline in HTML, CSS, or JSON instead of being a separate file the browser has to fetch.
No, and it can't - encoding to Base64 is a single browser function (FileReader) that reads the file on your device. There's no server round trip to skip; there was never one to begin with.
Base64 encodes every 3 bytes as 4 text characters, so the encoded string is roughly a third larger than the original file. The tool shows both sizes so you know what to expect.
Not with this tool yet - we don't have a Base64-to-image converter built. This one only goes in the image-to-text direction.
Guides
A closer look at specific problems this tool solves.
Why Inlining a Small Image Beats Linking to a File
A tiny icon shouldn't need its own HTTP request. Here's what a data URI actually does, and when embedding an image as text beats linking to it as a file.
Read the guideHow to Embed an Image Directly in Your HTML, No File Needed
Drop an image, get a ready-to-paste snippet - no separate icon file to manage, no upload. Here's exactly how the encoding works and what each output actually gives you.
Read the guideData URI vs. Image File: When the Bigger String Is Still Worth It
A Base64 string is always bigger than the file it came from. Here's the actual math behind that, and how to decide whether the trade-off is worth it for a specific image.
Read the guide
Comments