Image to Base64
Image Tools
Convert any image to a Base64 data URL — ready to embed directly in HTML or CSS. Also decodes data URLs back to a downloadable file.
Runs entirely in your browserAbout Image to Base64
A `data:` URL is a tiny self-contained representation of a file inlined directly into your markup. Instead of `<img src="/icons/check.png">`, you can write `<img src="data:image/png;base64,iVBORw0KGgo...">`, and the image renders without a separate HTTP request. This trick is the right call for tiny single-use images (a 200-byte icon, an inline email-template asset), where the network round-trip costs more than the inlined bytes. It's the wrong call for repeated assets that would benefit from HTTP caching.
This converter uses the browser's native `FileReader.readAsDataURL` — no library, no upload. Drop an image and you get three copy-ready snippets: the raw data URL, an `<img>` HTML tag with width/height set, and a CSS `background-image` declaration. We also show the size bloat (Base64 adds ~33% overhead by design — every 3 input bytes become 4 output characters). The decode tab takes a data URL and turns it back into a downloadable file. Everything happens in your browser.
How to use
- 1
Pick a direction
Image → Base64 to encode a file; Base64 → Image to decode a data URL back to a downloadable image.
- 2
Drop your image
Drag and drop a PNG, JPG, SVG, GIF, or WebP into the drop zone, or click to pick.
- 3
Copy the snippet that matches your context
Three blocks appear: raw data URL (for any custom use), `<img>` HTML tag, and CSS `background-image`. Use the Copy button next to each.
- 4
Decode if needed
Paste a data URL into the Base64 → Image tab to preview and download it as a file.
Examples
Small SVG inlined
A 40-byte SVG icon becomes a ~140-character data URL — perfect for inlining.
Output
<img src="data:image/svg+xml;base64,PHN2Zy..." alt="icon" width="24" height="24">CSS background-image
Output
background-image: url("data:image/png;base64,iVBORw0K...");Frequently asked questions
When should I inline an image as Base64?+
When the image is tiny (under ~2KB), used in exactly one place, and the round-trip cost of a separate HTTP request would dominate the byte cost. Common examples: SVG icons, email-template assets (where HTTP requests are blocked), single-use marketing images.
When should I NOT inline?+
When the image appears on many pages — the browser can cache a regular file URL across navigations, but an inlined data URL is fetched fresh every time as part of the HTML. Large images (>10KB) also pay a heavy bloat tax and slow initial page parse.
Why is the Base64 ~33% larger than the original?+
Base64 encodes 3 input bytes into 4 output characters using a 64-character alphabet (A–Z, a–z, 0–9, +, /). That's 4/3 = ~1.33× the byte count by design. There's no way around it; it's the cost of using a 64-character alphabet to represent arbitrary binary data.
Are there size limits on data URLs?+
Browsers generally support data URLs up to several megabytes, but performance degrades fast above ~100KB. Some HTTP headers (Set-Cookie, Referer) have strict size limits. As a rule of thumb: keep data URLs under 10KB.
Should I inline SVG as Base64 or as XML?+
Inline as raw XML (`<svg>...</svg>`) when you want to style it with CSS, animate parts, or react to events. Inline as Base64 in a data URL when you want to drop it into `<img src>` or `background-image` without the SVG affecting your DOM tree.
Is my image uploaded?+
No. Encoding uses the browser's FileReader API and runs entirely on your device.
Related tools
Compress Image Online
Compress image online — shrink JPG, PNG, and WebP by up to 90% with a live quality slider. 100% browser-based, no upload, no signup, photos never leave you.
JPG to PNG Converter
Free JPG to PNG converter — change JPG or JPEG to lossless PNG in your browser. 100% client-side, no upload, no signup, no watermark, your images stay private.
PNG to JPG Converter
Free PNG to JPG converter — change PNG to JPG with a quality slider and background fill, in-browser. No upload, no signup, no watermark, images stay private.
WebP Converter
Free WebP converter — convert JPG and PNG to WebP, or WebP back to PNG/JPG, in your browser. No upload, no signup, no watermark; images never leave your device.
Resize Image Online
Resize image online — set exact pixel dimensions or scale by percent, lock aspect ratio, pick a format. 100% browser-based, no upload, no signup, no watermark.
Crop Image Online
Crop image online — free or preset aspect ratios (1:1, 4:3, 16:9, 3:2) with a live preview. 100% browser-based, no upload, no signup, no watermark.