ToolFeather
Image & MediaRuns in your browser

Convert an Image to Base64

Load a picture and get its Base64 data URL — perfect for inlining images in CSS or HTML — with a live preview and copy button.

Quick presets

Image to Base64

Options

Preview

–

Image bytes
–
–
Base64 text
–
–
Overhead
–
–
Gzipped text
–
–
Result
Inline images skip an HTTP request but can't be cached separately and make your HTML/CSS ~33% heavier — best for icons under about 4–10 KB.

Runs in your browser — nothing you enter is uploaded or stored.

ToolFeather · Data URL out
Scratchpad auto-saved
Stored in this browser (localStorage)

About the Image to Base64

A Base64 data URL packs an entire image into a text string that starts with data:image/…;base64,. Browsers treat that string as if it were a file, so you can embed a picture directly in your HTML or CSS instead of linking to a separate file — handy for tiny icons, email signatures, or self-contained pages.

Drop an image here and the tool reads it with FileReader and hands you the finished data URL, a live preview, and the size of both the original file and the encoded string. Copy the URL and paste it into an <img src>, a CSS background-image: url(...), or anywhere a URL is accepted.

Keep in mind that Base64 is about 33% larger than the raw file, so it is best for small images. Everything is encoded locally in your browser, so even confidential graphics never touch a server.

Examples

A 1KB icon → paste the data URL into CSS to remove one HTTP request.
A logo for an HTML email → inline it so it shows without hotlinking.
A small image for a single-file demo page → embed it so the page needs no assets.

Frequently asked questions

5 answers
What is a data URL?
It is a URL that contains the file's bytes inline, Base64-encoded, rather than pointing to a separate file. Browsers can render it directly.
Why is the Base64 bigger than my file?
Base64 encodes 3 bytes as 4 characters, so the text is roughly 33% larger than the original binary. It is a size cost for the convenience of inlining.
Should I inline large images?
No. Large data URLs bloat your HTML/CSS and cannot be cached separately. Base64 is best for small images and icons.
Is my image uploaded anywhere?
No. Encoding happens in your browser with FileReader, so the file never leaves your device.
Can I decode a data URL back to an image?
Yes — use the companion Base64-to-Image tool to paste a data URL and get the picture back.