--- url: "https://imagifyconvert.com/tools/base64" --- # 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. Rendered sample · image/svg+xml · original file: 209 bytesComplete 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 ``` 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](https://imagifyconvert.com/tools/compress) 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 uses ` image/png `, JPG uses ` image/jpeg `, and SVG uses ` image/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-src ` rule 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. ## Related tools [Image Compressor Compress JPG, PNG, and WebP images directly in your browser.](https://imagifyconvert.com/tools/compress) [Metadata Viewer Inspect EXIF metadata and strip it for privacy before sharing photos.](https://imagifyconvert.com/tools/metadata) [Favicon Generator Generate favicon files, apple-touch icons, and manifest snippets.](https://imagifyconvert.com/tools/favicon-generator) --- [Interactive page](https://imagifyconvert.com/tools/base64) · [Site guide](https://imagifyconvert.com/llms.txt) JavaScript is required to operate the tools. File processing runs in your browser; this Markdown page describes the interface and guidance.