Convert images to Base64 data URIs — 100% in your browser
Processing uses browser-native Canvas and File APIs, so output can vary slightly between browsers. All processing runs locally in your browser.
An image file is a stream of binary bytes. Base64 re-encodes those bytes using only 64 printable characters (A–Z a–z 0–9 + /), so the result can live inside HTML, CSS or JSON where raw binary cannot. Every 3 input bytes become 4 characters (3×8 = 24 bits → 4×6 bits). Because the alphabet holds 64 symbols, the string grows by about 33% over the raw file. The data: URI simply prefixes the MIME type (data:image/png;base64,) so a browser can decode it back into a real image.
Bytes 0x48 0x69 0x21 are the text 'Hi!'. Split into 6-bit groups, each maps to one alphabet symbol: S, G, k, h. 'data:image/png;base64,…' tells the browser which decoder to run on the string.
A 200 KB PNG you want to ship without a separate network request.
Convert images to Base64 DataURL. Supports JPG, PNG, WebP, GIF, SVG. Copy or download. Free, 100% browser-based, no upload.
This converter encodes images into Base64 data URLs — the self-contained strings like data:image/png;base64,iVBOR... that embed images directly in HTML, CSS, and JSON with no separate file request. It accepts JPG, PNG, WebP, GIF, and SVG, shows the encoded length and size overhead versus the original file, and outputs the full data URL or just the Base64 payload. CSS-ready and HTML-ready snippets let you paste the right wrapper for background-image versus <img> tags without editing by hand.
Web developers inline small icons and logos to eliminate HTTP requests on performance-critical pages. Email designers embed images that survive clients which block external hosting. Frontend engineers embed assets inside single-file components and JSON configurations. Anyone building PDF or DOCX generators that require inline images converts here first. The size-overhead readout keeps decisions honest: encoding inflates files by about 33%, so it guides the inline-versus-file choice per image.
(1) Upload or drop an image — JPG, PNG, WebP, GIF, or SVG. (2) The tool reads the binary, encodes it to Base64, and assembles the data URL with the correct MIME type. (3) Read the output panel: data URL, raw Base64, byte counts for original and encoded, and the inflation percentage. (4) Copy as a data URL, as CSS background syntax, or as an <img> tag, or download the text. Everything encodes locally — the image never uploads, which is the point for unreleased assets.
Inlining wins for small, render-blocking-critical assets: icons, logos, and placeholders under roughly 5–10 KB, where eliminating a network round-trip matters more than bytes saved. It is also the only option when a document must be truly single-file — standalone HTML reports, email templates for clients that block remote images, and embedded JSON payloads. The costs are real beyond the 33% size inflation: Base64 images cannot be cached separately, so every page load carries them again; they cannot be lazy-loaded; and large inlined strings bloat CSS and HTML in ways that slow parsing. Modern best practice leans on HTTP/2 multiplexing and CDNs instead, reaching for inlining only for the critical few images. SVG gets a special case — as vector text it is usually better inlined as raw SVG markup rather than Base64, keeping it stylable and scriptable.
Base64 Data URLs embed image data directly in HTML, CSS, or JSON as text—no separate HTTP request needed. This reduces server round-trips for small images (icons, logos), enables self-contained HTML emails, and simplifies API payloads. However, Base64 encoding increases file size by ~33%, so use it only for images under 50KB.
JPG, PNG, WebP, GIF, and SVG. The tool outputs a complete Data URL string (data:image/png;base64,...) that you can paste directly into HTML <img> src attributes, CSS background-image properties, or JSON API fields. You can also download the encoded string as a text file.
What do you call a crab that plays baseball?
No paywalls, no signups, no data sold. Built by a solo developer who believes useful tools should be accessible to everyone.
☕Support me on Ko-fi— keep tools free100% of proceeds go towards hosting & building more free tools.