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
Image Compressor
Compress JPEG, PNG, and WebP images locally with quality control.
JPG to PNG Converter
Convert JPG images to PNG with optional transparent backgrounds.
PNG to JPG Converter
Convert PNG images to JPG with a configurable background fill.
WebP Converter
Convert images to and from WebP with quality control.
Image Resize
Resize images to exact dimensions or by scale percentage.
Image Crop
Crop images with free or preset aspect ratios (1:1, 4:3, 16:9).