Image to Base64
Get a data URI plus ready-to-paste HTML and CSS snippets.
Drop an image to Base64-encode
or click to browse, or paste with Ctrl/Cmd+V
Preview
Ready-to-paste snippets
About image-to-Base64 conversion
A Base64 data URI packs an entire image's bytes into a plain text string that can be embedded directly inside HTML or CSS — no separate file, no extra HTTP request. That's handy for tiny icons, inline email images, or self-contained single-file demos. The tradeoff: Base64 text runs about 33% larger than the original binary file, so it's not a substitute for a real image tag on anything but small assets.
How to convert an image to Base64
- Drop, browse to, or paste an image into the box above.
- Copy the raw data URI, or fill in alt text / a CSS selector and copy the ready-made snippet.
- Paste it straight into your HTML or CSS.
FAQ
Why is the Base64 text bigger than my original file?
Base64 encodes binary data using only 64 printable characters, which costs roughly 4 characters for every 3 original bytes — about a 33% size increase. It trades file size for the convenience of embedding.
When should I use a data URI instead of a normal image file?
Best for small, reused assets like icons or logos where saving an HTTP request matters more than the size overhead. For photos or anything large, a normal linked image (optionally run through the compressor first) is almost always better.
Does the data URI include the image type?
Yes — it starts with data:image/png;base64, (or jpeg/webp/etc.) so browsers know how to decode it automatically.
