Turn an image into a Base64 data URI you can paste straight into CSS, an HTML img tag, or a JSON payload. Drop a file in and copy the encoded string — the original format and any transparency are kept exactly, because the file is read byte-for-byte rather than redrawn. It never leaves your browser.
How it works
The browser reads your file with the FileReader API and returns a data URI: a short prefix naming the media type, then the file’s bytes encoded in Base64. Because Base64 uses only safe text characters, the whole image can live inside a stylesheet or markup with no separate request. The encoding is exact — the same format, quality and metadata as the source file, since nothing is re-rendered.
Base64 makes data roughly 33% larger than the raw bytes, so this is best for small assets — icons, logos, tiny background textures — where saving an HTTP request is worth the size. For large photos an inline data URI bloats your CSS or HTML and hurts caching, so a normal file reference is usually better. The size readout shows both the decoded byte size and the character count so you can judge.
Practical examples
Inlining an icon in CSS
A 1 KB SVG or PNG icon becomes a data URI you paste into background-image: url(...). The icon loads with the stylesheet, saving a separate request.
Embedding a logo in an HTML email
Email clients often block linked images. Encode a small logo to Base64 and drop it into the img src so it always shows without an external fetch.
Seeding test data in JSON
You need a sample image inside an API fixture. Encode a tiny placeholder and paste the data URI as a string value in your JSON.
Frequently asked questions
What is a data URI?
It is a way to embed a file directly in text. The string starts with something like data:image/png;base64, followed by the image encoded as Base64. Browsers treat it exactly like a linked image, but it needs no separate download.
Where can I paste the result?
Anywhere a URL or string is accepted: a CSS background-image, an HTML img src, a JSON or JavaScript string, or an SVG href. The data URI is self-contained.
Why is the Base64 bigger than my file?
Base64 represents three bytes with four text characters, so it is about 33% larger than the original. That overhead is the trade-off for being able to embed binary data as plain text.
When should I not use Base64 images?
For large images or anything reused across pages. Inlining a big photo bloats your HTML or CSS and prevents the browser from caching the image separately. Data URIs shine for small, page-specific assets.
Is the image quality or format changed?
No. The file is read as-is and encoded byte-for-byte, so the format, quality and any metadata are identical to your original. This is not a converter — it wraps the exact file.
Which image types are supported?
Any image your browser can read — PNG, JPG, WebP, GIF, SVG, and more. The media type in the prefix is taken from the file itself.
Does it keep transparency?
Yes. Because nothing is redrawn, transparent PNG, WebP and SVG images stay transparent exactly as they were.
How do I turn a data URI back into a file?
Use the companion Base64 to Image tool: paste the data URI and download it as a normal image file.
Are my images uploaded to a server?
No. Encoding happens entirely in your browser with the FileReader API. The file never leaves your device, and it works offline once the page has loaded.
Related tools
Base64 to Image
Decode a Base64 string or data URI back into an image, preview it, and download the file — all in your browser. Nothing is uploaded.
Image tools
Base64 Encoder and Decoder
Encode text to Base64 or decode it back, UTF-8 safe and URL-safe tolerant. Runs entirely in your browser.
Developer tools
PNG to WebP Converter
Convert PNG to much smaller WebP in your browser, keeping transparency — adjustable quality, batch, no uploads.
Image tools
Grayscale Image
Turn JPG, PNG and WebP images black and white in your browser, with an intensity slider for partial desaturation. Free and fully local.
Image tools
Flip Image
Mirror JPG, PNG and WebP images horizontally or vertically in your browser and download the result. Fully local — nothing is uploaded.
Image tools
Resize Image
Resize JPG, PNG and WebP images to exact pixel dimensions in your browser — lock the aspect ratio or set width and height freely. Nothing is uploaded.
Image tools