Image to Base64
Drop an image, get Base64, a data URI and ready HTML and CSS snippets, with the MIME type verified from the actual bytes and honest guidance about when inlining helps. All in your browser.
File to Base64
Drag a file here or browse
Any file type · up to 50 MB · converted locally in bounded chunks, the file never leaves your browser
Base64 to file
Paste Base64 or a full data: URI. The decoded size is estimated before anything runs, the type is verified against the actual bytes, and you can download the result.
Strict Base64 validator (RFC 4648)
Checks alphabet, padding, length and canonical pad bits. Valid, canonical, normalized and malformed are four different verdicts, and this validator tells you which one you have.
Base64 ↔ hex
Bounded at 2 MB of data per direction. Bytes with no valid UTF-8 meaning are fine here: hex is the binary-safe view.
From image to paste-ready code
The output you usually want is not the Base64 itself but the thing wrapped around it: a data URI for a src attribute, an img tag with correct dimensions so the layout does not shift, or a background-image rule for CSS. All three are generated here with proper escaping of the file name and MIME string, and the dimensions are read from the decoded image, not guessed. Shrink the image first with the Image Resizer or convert it to WebP with the Image Converter, then inline the small result: order matters, and inlining an unoptimized original is the most common data URI mistake.
Image to Base64 FAQ
How do I convert an image to Base64?
Drop the image on the File tab above or browse for it. You get the raw Base64, a complete data URI with the MIME type verified from the actual file bytes, an HTML img tag with the real width and height filled in, and a CSS background-image rule, each with its own copy button. The conversion happens locally; the image never leaves your browser.
When is inlining an image as Base64 a good idea?
When the image is tiny and the extra request costs more than the bytes: icons around a kilobyte, a small logo in an HTML email where clients block remote images, or a handful of UI glyphs in a style sheet. The 33 percent size penalty barely matters at that scale and you remove a round trip. As a rule of thumb, past a few kilobytes the math flips.
Why does this tool hide the embed snippets for large images?
Because inlining a large image is a performance mistake this tool refuses to encourage. Base64 output is 33 percent heavier than the file, cannot be cached separately from the page, blocks the parser while it downloads, and is invisible to lazy loading. Above 2 MB of output you still get the Base64 itself via download, but the data URI and snippet buttons disappear on purpose.
Which image formats work?
Anything your browser can hold: PNG, JPEG, GIF, WebP and AVIF are recognized by signature, previewed, and get correct MIME types in the data URI; HEIC is identified by its ISO brand. SVG is handled as what it really is, XML text: it converts fine, but it is never rendered as a live preview here, because untrusted SVG is an active document that can contain scripts.
Does the declared file type matter, or the actual bytes?
The bytes. A file renamed from .pdf to .png still starts with %PDF, and a data URI built from the wrong MIME type breaks or misleads whatever consumes it. This tool reads the file signature, shows the detected type next to what your system declared, and builds the data URI from the verified type, so the snippet you copy tells the truth.
More free tools: Base64 to Image · Image Converter · Image Resizer · Full Base64 Workbench