Base64 Image Encoder & Decoder
Encode an image as a Base64 data URL for CSS, HTML, or JSON, then decode Base64 back into a previewable file. Everything runs in your browser, so your images never leave your device.
Base64 Image Encoder and Decoder
Encode image files to Base64 data URLs, inspect the payload size, or decode Base64 back into an image. Everything stays on your device.
Drop files or a folder here
Upload one image to generate a Base64 data URL and copy-ready snippets.
When a Base64 image encoder makes sense
Embedding images in CSS or HTML
Small icons, signatures, or one-off background images can be inlined as data:image/png;base64,... so they travel with the markup.
Passing images through text-only systems
Base64 is useful when an API, CMS field, or automation step only accepts text. A data URL avoids binary upload handling in quick prototypes and low-volume workflows.
Inspecting third-party payloads
If an API returns Base64, you can paste it here to validate the string, preview the image, and confirm its MIME type before you ship it downstream.
Private local conversions
Some online converters upload your file first. This one reads the image locally with browser APIs, so sensitive assets stay on your machine.
Examples you can actually copy
Both examples contain the complete payload for this original 16 × 16 SVG check icon. Copy the data URL into Decode above to inspect it, or paste the HTML into a local page.
Complete data URL for the decoder
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSI0IiBmaWxsPSIjMjU2M2ViIi8+PHBhdGggZD0ibTQgOCAzIDMgNS02IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=
Inline an icon in HTML
A complete example for a one-file browser demo. Width and height reserve the icon’s space; the alt text describes its meaning.
HTML image
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSI0IiBmaWxsPSIjMjU2M2ViIi8+PHBhdGggZD0ibTQgOCAzIDMgNS02IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=" width="16" height="16" alt="Completed" />
Set a CSS background image
Best for small decorative assets. For large photos, a normal file URL is usually faster to cache and easier to maintain.
CSS decoration
.hero-badge {
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSI0IiBmaWxsPSIjMjU2M2ViIi8+PHBhdGggZD0ibTQgOCAzIDMgNS02IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=");
background-repeat: no-repeat;
background-size: contain;
}Calculate the payload before embedding it
Standard padded Base64 length is 4 × ceil(original bytes / 3). Each character is one ASCII byte. This example is 4 × ceil(209 / 3) = 280 bytes, then data:image/svg+xml;base64, adds 26 bytes: 306 bytes total. That is 97 bytes more than the original SVG, before HTML/CSS markup or transport compression.
Base64 encodes the original file; it does not compress it or change its image format. For a photo or screenshot, compress the image before encoding, or use a regular file URL when caching and responsive sizes matter.
Recover a Base64 image that will not display
- Copy the full value, without JSON quotes, HTML markup, or ellipses. Missing bytes cannot be reconstructed by adding padding.
- For a data URL, keep the comma and
;base64. Match the MIME type to the source: PNG usesimage/png, JPG usesimage/jpeg, and SVG usesimage/svg+xml. - Decode and check the detected type and dimensions. The tool recognizes common image signatures; valid Base64 alone does not prove that the bytes contain a displayable image.
- If the local preview works but your website does not, inspect its Content Security Policy for an
img-srcrule that permits data URLs. Email clients may still strip them; test a hosted image or CID attachment there.
When not to use Base64
Large images and photos
Base64 adds overhead and bloats the surrounding HTML, CSS, or JSON. For larger assets, a normal file URL usually wins on performance and maintainability.
Assets reused across many pages
External files can be cached once and reused. Base64 duplicates the payload every time you paste it into a new document or template.
Teams that need readable diffs
Long Base64 strings are hard to review in pull requests. Keeping images as files makes version control and troubleshooting far easier.
Base64 vs file URLs
Choose Base64 when
- • You need one self-contained HTML, CSS, or JSON payload.
- • The asset is tiny and used in only one place.
- • You are working in a text-only channel or API response.
Choose image files when
- • The image is large or appears on multiple pages.
- • You want CDN delivery, browser caching, or responsive variants.
- • You care about smaller HTML and easier source control diffs.
Frequently asked questions
What is a Base64 image encoder?
A Base64 image encoder converts binary image bytes into text so the image can be embedded inside HTML, CSS, JSON, or API payloads as a data URL.
How much larger is Base64 than the original image?
For n original bytes, standard padded Base64 uses 4 × ceil(n / 3) characters. The data URL prefix adds more. Our 209-byte SVG example becomes 280 Base64 characters, or 306 bytes with its 26-character prefix, before markup or transport compression.
Can I use Base64 images in email?
Support depends on the email client and mail pipeline; some strip or block data URLs. Test the clients your recipients use. A hosted image or a CID attachment may be a better choice for email signatures and newsletters.
Why will my Base64 image not decode?
Paste the complete raw Base64 payload or a data URL with ;base64 and a comma. Do not include surrounding JSON quotes, an HTML tag, or an abbreviated string with ellipses. The decoder accepts whitespace and URL-safe characters, but it cannot recover missing image bytes. A valid Base64 string can still contain non-image data or a format the browser cannot display.
When should I avoid Base64 images?
Avoid Base64 for large images, shared assets that benefit from browser caching, or pages where HTML and CSS size matters more than saving a request.
Does this Base64 tool upload my images?
No. Encoding and decoding happen in your browser with local file APIs and in-memory processing, so your files never leave your device.