Base64 Image Encoder
Turn an image file into a Base64 data URL you can paste straight into HTML or CSS, or decode a data URL back into a viewable image. Runs in your browser.
What the size numbers are telling you
Base64 expands binary data by about a third - six bits of payload become eight bits of text - and the third figure reports exactly that expansion against your source file. It matters because inlining an image this way puts the encoded text directly into your HTML or CSS: a 60 KB photo becomes roughly 80 KB of markup that must be downloaded before the first byte of rendering happens. The tool shows both numbers so the trade is a decision rather than a surprise in a Lighthouse report.
The output carries a data:image/...;base64, header, which is what makes it self-describing - the browser infers the format instead of sniffing a file extension. That is why the same string works in an <img src>, a CSS background-image, or a markdown image reference without a separate asset request.
Usage example
You need a tiny logo in an email template where external images are blocked by default. Encode the PNG here, paste the data URL into the template's src, and the logo renders with no network request at all - the size rows tell you whether the inlined version is small enough to justify it (for a logo, it usually is; for a hero photo, it usually is not).
The decode direction is the diagnostic one: when a data URL shows up broken in someone else's markup, paste it here - if the preview renders, the string is intact and the fault is in the surrounding HTML; if the state row reports invalid Base64, the string was truncated somewhere in transit. Once the asset itself is settled, the HTML entity encoder is the tool for the markup around it, and the JSON formatter cleans up payloads that carry a data URL inside a field.
Frequently asked questions
Should I inline every image this way?
No. Inlining removes an HTTP request but adds bytes to the critical path - right for one small icon or a logo in an email, wrong for photographs or anything above roughly 20 KB. The size and expansion rows are there to make that call visible.
Why does my Base64 string not work as a URL on its own?
It is not a URL, it is the payload of a data URL. The data:image/png;base64, prefix has to stay attached; a bare Base64 string pasted into an src will not resolve.
Is there a length limit?
Not for encoding or decoding here - the whole job happens in the tab. The limits you may hit are downstream: some email clients and CSS parsers reject data URLs above a few kilobytes.
Related tools
Base64 Encoder
Encode and decode Base64 for text and UTF-8 strings, with URL-safe output.
Color Picker From Image
Upload an image and click anywhere on it to read the exact pixel colour as HEX and RGB, with a running palette of every colour you pick.
HTML Entity Encoder
Escape HTML special characters into entities before they go into markup, or decode a run of entities back into readable text. Live, both directions, in your browser.