Image to Base64
Turn a picture into a data URI you can paste directly into CSS, HTML or a JSON payload — no hosting, no extra HTTP request.
How to use the image to base64
- Choose an image file.
- Read the size comparison between the original and the encoded string.
- Copy it plain, as an img tag, or as a CSS background rule.
How it works
Base64 encoding inflates a file by roughly a third, so inlining is a trade. It removes an HTTP request, which is worth it for small icons and single-use images, but a large inlined photo blocks the stylesheet or document it sits in and cannot be cached separately.
The practical rule is to inline below a few kilobytes and link anything larger. SVG icons and tiny placeholders are the clearest wins.
Common questions
Why is the encoded version bigger?
Base64 uses four characters for every three bytes, which is about 33% overhead — unavoidable for any binary-to-text encoding.
When should I inline an image?
For small, single-use assets. Anything reused across pages is better as a separate cached file.