Image to Base64 — Data-URI Encoder

How to use

1. Choose an image with the file picker - PNG, JPEG, GIF, WebP and SVG all convert, and nothing leaves your device.
2. The tool reads the file locally and builds a data-URI string with the correct MIME type.
3. Compare the original size with the Base64 size (+%) readout - expect roughly a third more bytes.
4. Copy the CSS url() snippet for stylesheets, or the HTML img snippet for markup, using the copy buttons.
5. Paste the string wherever an image path would normally go.
6. If the size increase is too large for your use case, keep the image as a separate file instead.

About this tool

Small icons and logos travel best inline. This encoder produces the data-URI (with correct MIME), shows the size-inflation honestly, and says when NOT to use it (big images).

Embedding small images inline solves three annoying problems at once: fewer HTTP requests for critical icons, no broken-image icons when a relative path changes, and single-file HTML that can be emailed or archived without an assets folder. This encoder does the conversion entirely in your browser - choose a file and a FileReader builds the data URI with the correct MIME type, ready in two flavors: a CSS background-image rule and an HTML img tag. The size readout shows the honest cost, because Base64 inflates files by about a third, and the percentage is calculated from your actual file.

The technique rewards restraint. Icons, tiny logos and placeholders in the one-to-ten kilobyte range are ideal candidates; a two-megabyte photograph turned into a data URI bloats every page load and defeats browser caching. Use the percentage readout as your decision line: if the inflation costs more than the request it saves, keep the image as a separate file. SVG converts happily because it is text-safe, and the copy buttons hand you exactly the snippet for stylesheets or markup. Note that data URIs are not a security boundary - never paste strings from sources you do not trust into your pages.

FAQ

Rate this tool

Your rating stays in this browser (local storage) — nothing is sent to any server.