English
العربية
Deutsch
Español
Français
Italiano
Português
Русский
Türkçe
Tiếng Việt
Image to Base64
Turn any image into a Base64 data URI you can paste into code.
A Base64 data URI lets you embed an image directly inside your HTML, CSS or JSON instead of linking to a separate file. The picture stops being a separate download and becomes part of the text.
When embedding an image is genuinely a good idea
Every image on a page is an extra HTTP request. For a handful of tiny assets — an icon, a 1 px gradient, a small logo in an email signature — that request can cost more than the bytes themselves. Inlining them removes the round trip entirely and guarantees the image appears at the same moment as the markup.
The catch is that Base64 inflates the data by about a third, and inlined images cannot be cached separately by the browser. So this is a technique for small assets, not a general strategy. Anything above roughly 5 KB is almost always better served as a normal file.
Converting an image to Base64
- Select your image file above.
- Wait a moment while it is encoded.
- Copy the output. It will start with something like
data:image/png;base64,. - Paste it into your CSS
url(), an HTMLsrcattribute, or a JSON field. - Check it renders before you commit the change.
Where you will use the output
- CSS backgrounds — paste the data URI straight into
background-image: url(...). - Inline HTML images — use it as the
srcof an<img>tag with no separate file. - Email templates — some clients block linked images but render inline ones, though support varies.
- JSON and APIs — send an image inside a JSON payload where binary data is not allowed.
- Single-file documents — build a self-contained HTML page with no external dependencies.
Rules of thumb worth following
- Keep it under about 5 KB. Beyond that, a normal image file wins.
- Never inline the same image in twenty places — the browser cannot deduplicate it.
- Remember the 33% size penalty when you are measuring page weight.
- Consider an SVG instead for icons; it is often smaller than the Base64 of a PNG.
- Do not inline anything you might want to swap out later without a redeploy.
Base64 image questions
What is a data URI?
It is a URL that contains the data itself rather than pointing at a location. The prefix declares the MIME type and the encoding, and everything after the comma is the file content in Base64.
Why is the Base64 version bigger than my image?
Base64 encodes every three bytes as four characters, so the output is about 33% larger. That overhead is the price of representing binary data as plain text.
Is this bad for page speed?
For small assets it helps, because you remove an HTTP request. For large ones it hurts, because the data cannot be cached independently and it blocks the parsing of your stylesheet or markup.
Can I Base64 encode an SVG?
You can, but SVG is already text. Embedding it directly, or URL-encoding it, produces a smaller result than Base64.
Is my image uploaded anywhere?
Yes. Your image is sent to the server to be converted, but it is not stored.
