Free · no account · nothing leaves your device
Image to Base64 — paste any picture as text
Turn an image into a data URI or a raw Base64 string you can paste straight into CSS, HTML or JSON. Drop one in, copy the text out — encoded in your browser, never uploaded.
Drop images here to encode them
PNG, JPG, WebP, GIF, SVG — anything the browser can read. The file is read in your browser — this page has no upload endpoint at all.
Base64 output
What Base64 encoding actually does
Computers move images as bytes; a lot of the web moves text. Base64 is the bridge: it rewrites the raw bytes of your image using 64 safe characters — letters, digits, + and / — so the picture can live inside a CSS file, an HTML document, a JSON payload or an email template without breaking anything along the way. The result is called a data URI when it carries its own type header:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
Paste that anywhere a URL or a file path would go, and the image is simply there — no request, no separate file.
Where a data URI earns its keep
- Icons and logos in CSS.
background-image: url("data:image/svg+xml;base64,...")removes a network request and works in email templates that refuse external images. - Single-file builds. A demo, a code sample or an offline page that must carry its own images.
- JSON and XML payloads. APIs that accept images as Base64 strings instead of multipart uploads.
- Small placeholder graphics. Inline a 1 KB blur or pattern instead of a second round-trip.
The cost, stated plainly
Base64 encodes every three bytes as four characters, so the text is about 33% larger than the binary file. The browser also cannot cache a data URI separately, lazy-load it, or show it while the rest of the page streams in. The working rule: inline small, serve large. A 2 KB icon inlined is a win; a 200 KB photo inlined is a page-weight problem. If the photo is heavy before encoding, shrink it first with the main compressor and encode the smaller version.
Two ready-to-paste snippets
In CSS:
.logo { background-image: url("data:image/png;base64,...."); }
In HTML:
<img src="data:image/png;base64,...." alt="Logo">
Related tools
Shrink an image before you encode it with the main compressor; pin it to a specific format with PNG to JPG, JPG to WebP or HEIC to JPG; check what metadata it carries with the EXIF viewer. Every tool on this site runs in your browser, with no upload.
Frequently asked questions
What is Base64 encoding used for with images?
Base64 turns the raw bytes of an image into plain text, which lets the picture travel inside formats that only accept text: a data URI in CSS or HTML, a JSON payload, an XML file, an email template or a single-file build. The image stops being a separate file and becomes a string you can paste.
Is my image uploaded when I encode it here?
No. The file is read with the browser's own File API and encoded by JavaScript running on your device. This site has no upload endpoint at all — the network tab will show no request carrying your image.
Should I use the data URI or the raw Base64 string?
Use the data URI (the one starting with data:image/...) when pasting into HTML, CSS or anywhere the format must identify itself — it works as a drop-in image source. Use the raw string when the surrounding code already knows the type, such as a Base64 field in a JSON API or the src of an <img> tag that carries its own type attribute.
How much bigger does Base64 make the file?
Base64 encodes every three bytes as four characters, so the text is about 33% larger than the binary file — plus the data URI prefix. Gzip compression recovers part of that on a website, but a Base64 image is always heavier than the same image served as a file.
When is embedding an image as Base64 a bad idea?
For large photos: a Base64 image cannot be cached separately by the browser, cannot be lazy-loaded, and bloats the HTML or CSS that carries it. Data URIs shine for small graphics — icons, logos, placeholder patterns — and for single-file builds. Keep photographs as separate, cacheable files.
Can I encode several images at once?
Yes. Drop as many as you like and each gets its own output block with a copy button. Everything is encoded locally, in your browser, with no upload and no file-count limit.