Convert images to Base64 Data URIs with ready HTML and CSS snippets, or decode them back, right in your browser.
Base64 Image Encoder / Decoder Online
Convert images to Base64 Data URIs with ready HTML and CSS snippets, or decode them back, right in your browser.
The Base64 Image Encoder / Decoder runs entirely in your browser. Images you drop and Data URIs you paste are processed on your device and are never uploaded to ArrayKit.
The Base64 Image Encoder turns any image into a Base64 Data URI you can paste straight into HTML or CSS. Drop a PNG, JPEG, WebP, SVG or GIF and it instantly shows the Data URI plus production-ready snippets — an <img> tag with editable alt text and a CSS background-image rule — each with one-click copy. It also reports the MIME type, file size, pixel dimensions and string length, so you know exactly what you are embedding. Switch to decode mode to paste a Data URI, preview the image, and download it with the correct file extension. It is built for front-end developers, email and template authors, and anyone inlining small icons to save a request. Everything runs locally in your browser, so your images stay on your device.
Features
Drag and drop or click to encode PNG, JPEG, WebP, SVG and GIF into a Base64 Data URI
One-click copy of the raw Data URI, a ready HTML <img> tag, and a CSS background-image rule
Editable alt text that drops straight into the generated <img> snippet for accessibility
Shows the MIME type, file size, pixel dimensions and Data URI length at a glance
Decode mode pastes a Data URI to preview the image and download it with the right extension
Warns when an image is too large to inline efficiently as Base64
Handles SVG and GIF as well as raster photos, with sensible download file extensions
Runs entirely in your browser, so images are never uploaded to a server
How to use the Base64 Image Encoder / Decoder
Keep the Image → Base64 tab selected and drop an image onto the drop zone
Copy the Base64 Data URI, the HTML <img> tag, or the CSS background-image rule
Optionally type alt text to bake it into the <img> snippet
Switch to Base64 → Image, paste a Data URI, then preview and download the image
A PNG becomes an inline <img> tag that loads with no extra network request.
Common errors & troubleshooting
Pasting a Data URI shows 'The Data URI payload is not valid Base64.' — Copy the whole string starting at data:image/… and including ';base64,', and remove any stray quotes or line breaks your editor wrapped in.
The decoded image will not preview. — Check that the MIME type matches the data — a PNG payload labelled image/jpeg will not render. Re-encode the original file to get a correct Data URI.
My HTML or CSS file ballooned after inlining an image. — Base64 adds about 33% overhead and inlined images are not cached separately. Inline only small icons and link larger images as normal files.
An SVG Data URI from another tool looks different. — Some tools percent-encode SVGs instead of Base64. This encoder always Base64-encodes; both are valid Data URIs but are not byte-for-byte interchangeable.
Frequently asked questions
What is a Base64 image Data URI?
A Data URI embeds an image directly inside a string like data:image/png;base64,XXXX. The image bytes are Base64-encoded, so you can drop the whole picture into an HTML src or CSS url() with no separate file or request.
Which image formats can I encode?
Any image your browser can read — PNG, JPEG, WebP, GIF, SVG, BMP, AVIF and ICO all work. The decoder reads the MIME type from the Data URI and offers a matching download extension.
Should I inline images as Base64?
Inlining suits small, frequently reused assets like icons or email images where avoiding a request helps. For larger images it usually hurts, because Base64 adds about a third to the size and the data cannot be cached on its own.
Can I decode a Data URI back to an image file?
Yes. Switch to Base64 → Image, paste the data:image/…;base64, string, and the tool previews the picture and lets you download it with the correct file extension.
Are my images uploaded when I encode them?
No. The encoder reads the file with the browser's FileReader and builds the Data URI on your device. Nothing is sent to ArrayKit or any server.
Why is the Base64 string bigger than my image?
Base64 represents three bytes with four characters, so the encoded text is roughly 33% larger than the original binary, plus the short data:…;base64, prefix. That overhead is normal and expected.