Binary—
Characters—
Overhead—
Inline—
Turn an image into the exact string you are going to paste — a data URI, a CSS background rule, an img tag, a JSON payload, or Markdown — or paste a data URI back and get the picture as a file. The encoding overhead is measured as you go, and the tool tells you whether inlining this particular image is worth it.
Step by step
01Pick a direction
Image → Base64 encodes a file you drop in. Base64 → Image decodes a string you paste, previews it, and hands it back as a downloadable file with the right extension.
02Choose the shape you are pasting into
Not the encoding — the wrapper around it. CSS gives a background-image rule, HTML an img tag, JSON an object carrying the MIME type, Markdown an image link, Raw the bare Base64 for somewhere none of those fit.
03Read the overhead, then decide
The ledger puts the encoded length next to the original file size and the percentage cost. That number, not the convenience, is what should decide whether this image goes inline or stays a linked file.
04Wrap for email, then copy or save
Turn on 76-character wrapping if the string is going into a mail body — MIME requires it and browsers ignore it. Copy takes the whole string even when the preview is truncated; Save writes it to a .txt.
Worked example
The same numbers the tool reports while you work, for a small PNG that is a good candidate for inlining. Every figure below is arithmetic you can check, not an estimate.
Given
Output shape: CSS · abbreviated in the middle
.menu-toggle {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAAD…AAAASUVORK5CYII=");
background-size: 24px 24px;
}2,412 bytes divide into 804 groups of three, so the encoding is exactly 3,216 characters with no padding — add the 22-character data: prefix and the rule carries 3,238. Eight hundred extra bytes to delete a request that fired on every page is a trade worth making. Run the same sum on a 200 KB photograph and it buys you 66 KB of waste.
Before you inline
Inline what repeats, link what is heavy
A data URI trades one HTTP request for a third more bytes that can never be cached on their own. That is a good trade for a 2 KB icon on every page, and a bad one for a 200 KB hero the browser would have cached once and reused. Roughly 8 KB is where it flips — the tool marks which side your image is on.
The 33% is fixed, so shrink before you encode
Base64 spends four characters on every three bytes, and no amount of minification recovers them. The only lever is the source file: re-encoding a PNG to WebP, or dropping a photo's quality to 80, changes the string length far more than anything you do afterwards.
The prefix is a contract, and browsers hold you to it
data:image/png;base64, tells the browser how to read the bytes that follow. Label a JPEG as PNG and you get an empty frame with no error — the most common reason a data URI that looks fine renders nothing. Encoding here reads the type from the file rather than guessing.
A broken string is arithmetic, not luck
Valid Base64 uses one 64-character alphabet and always has a length that is a multiple of four, padded with = or ==. A string that fails either test lost characters in transit — a truncated copy, a line-wrapped log, a cell that clipped. Decoding names which test failed instead of showing you nothing.
Email clients disagree about data URIs
Gmail and Apple Mail generally render them; Outlook blocks them outright. For a mass mailing, a hosted image with real alt text is the safer default. If you do embed, MIME wants the Base64 wrapped at 76 characters — the same string then still works in a stylesheet, because CSS ignores the newlines.
An inlined image invalidates its container
Because the bytes live inside the HTML or CSS, changing the image changes that file — busting its cache for every visitor, not just the ones who needed the new picture. Assets that change on their own schedule are better off as separate files.
Nothing is uploaded, which is the point for some files
Encoding and decoding run through your browser's FileReader and canvas. A signature, an ID scan, or an internal diagram you are inlining into a document never leaves the machine, and the share link carries only the direction, output shape, and wrap setting.
The judgement call
The only question that matters, answered for the cases people actually arrive with. The size rule is a good default; these are the situations where it is not the whole story.
A 1–3 KB icon on every page
Inline
A request saved on every navigation, for bytes small enough that the 33% is noise. The classic winning case.
A logo in an HTML email signature
Inline
Most clients render it and nothing has to be hosted. Wrap at 76 characters, and keep a linked fallback for Outlook.
A blur-up placeholder
Inline
It has to arrive with the markup to do its job at all. Keep it under about 1 KB — it is a hint, not a picture.
An SVG icon
Neither
Paste the SVG markup itself. It is smaller than its own Base64, and it can be styled with CSS once it is in the DOM.
A 40 KB illustration on one page
Link
Thirteen extra kilobytes in a file that cannot be cached separately, to save a single request that happens once.
Any photograph
Link
Base64 defeats caching, CDN resizing, and responsive srcset in one move, and the overhead runs to hundreds of kilobytes.
An asset that changes on its own schedule
Link
Editing the image edits the file carrying it, busting that file's cache for every visitor — including the ones who never see the image.
Reference
FAQ
Drop the file anywhere on the page. The encoded string appears immediately in whichever output shape you selected — data URI, CSS, HTML, JSON, Markdown, or raw. Copy it, or save it as a text file. Every image format your browser can read works as input, including SVG, GIF, and AVIF.
Small, ubiquitous assets: icons, a logo in an email signature, a placeholder shipped inside a stylesheet. Inlining removes an HTTP request, which matters most for images that appear on every page. Avoid it for photographs and anything large — the Base64 form is a third bigger, it cannot be cached separately, and it is re-sent with every copy of the document.
Base64 represents each group of three bytes as four printable characters, a fixed 33% expansion, plus a character or two of padding. That is the price of moving binary data through channels that only accept text — HTML, CSS, JSON, and email bodies all qualify.
Switch to Base64 → Image and paste the string. A full data URI is used as-is; a bare blob is assumed to be PNG. The picture is previewed straight away and the Download button saves it with the right extension. If the string is malformed, the tool names the problem instead of showing an empty frame.
It depends on the client. Some render data URIs in img tags, while others — Outlook most notably — block them, so a linked image with good alt text is the safer choice for a mass mailing. If you do embed, turn on 76-character wrapping, which MIME requires.
Only by removing a request, and only when the image is small. You trade a round trip for a third more bytes inside a file that can no longer be cached independently — worth it for a 2 KB icon on every page, a loss for a 200 KB hero that a browser would otherwise cache once.
No. The file is read by your browser's FileReader and converted locally, which is exactly what you want when the thing you are inlining is confidential. Nothing is transmitted or stored, and the share link carries only the direction, output shape, and wrap setting.
Encoding and decoding both run in your browser. Your image is never uploaded, and share links carry only the output preferences.
Keep going
Image compressor
Shrink the file before encoding — Base64 magnifies every byte you did not remove.
Format converter
Convert to WebP first for a much shorter encoded string.
Text Base64 encoder
The same encoding for plain text, with URL-safe options.
QR code generator
Generate a code, then inline it in an email template.