EN
PT
ES
Base64 Image Encoder & Decoder
Convert images to base64 data URLs and back. Drop a file or paste a data URL — never leaves your browser.
What is a base64 data URL?
A data URL packs a small file directly into a string of the form data:<mime>;base64,<payload>. Browsers treat it like any other URL — you can drop one into <img src>, a CSS background-image, or an email signature. Base64 expands the original bytes by ~33%, so it's best for tiny assets (icons, sprites, small avatars). For anything bigger you usually want a regular image file behind a CDN.
How to use this tool
In Encode mode, drop or pick an image and copy whichever flavour you need: full data URL, raw base64 (no prefix) or a ready-made <img> tag. In Decode mode, paste any data URL or raw base64 string and the image renders back in the preview — handy when you find one in someone else's CSS or an exported HTML email and want to see what it actually is. Switch modes with the chip at the top.
When (and when not) to inline images
Good fits: tiny logos and icons that ship in the same HTML/CSS file, signature graphics in transactional emails, embedding an asset in a single-file HTML demo. Bad fits: hero images, photo galleries, anything reused across pages — base64 disables HTTP caching for that asset, blocks parallel image loading, bloats your HTML/CSS payload and hurts Largest Contentful Paint. Rule of thumb: under ~2 KB encoded is usually fine; above that, prefer a normal file.
Common MIME types
The MIME type after data: tells the browser how to decode the payload — getting it wrong (e.g. shipping a JPG as image/png) breaks the image silently in some browsers.
| Format | MIME type | Notes |
|---|---|---|
| PNG | image/png | Lossless, supports transparency. Best for icons and UI. |
| JPG / JPEG | image/jpeg | Lossy. Best for photos. No transparency. |
| WebP | image/webp | Smaller than PNG/JPG; supported by all modern browsers. |
| GIF | image/gif | Animated, 256-colour. Heavier than WebP/MP4 for video. |
| SVG | image/svg+xml | Vector. Prefer URL-encoded over base64 in CSS. |
Frequently asked questions
Does the image leave my browser?
FileReader directly into a data URL string in JavaScript. There is no upload, no server hop, no analytics call carrying the image. You can drag-drop and disconnect from the network — it still works.Why is the base64 string so much longer than the file?
data:<mime>;base64, prefix.Can I embed an SVG without base64?
data:image/svg+xml;utf8,<svg…>) and stay much smaller than the base64 form. This tool gives you the base64 version for compatibility; for production CSS, prefer the URL-encoded variant.Will inline images be cached by the browser?
Can I decode an arbitrary base64 string?
data: prefix, the tool tries to detect the image type from the magic bytes (PNG, JPG, GIF, WebP, SVG). If detection fails, you'll get an "invalid" error and can prepend a data:image/png;base64, prefix manually.Why does my data URL include line breaks?
<img src> but a few systems don't. This tool always emits the base64 as a single line; if you paste a wrapped string in decode mode, we strip the whitespace before decoding.