Base64 Image Encoder & Decoder
Turn an image into a data URI — or a data URI back into an image
How it works
Drop, pick or paste an image and it's read locally and Base64-encoded into a data URI (data:image/png;base64,…). Switch the output between the bare data URI, an HTML <img> tag with width and height, a CSS background-image rule and Markdown. Optionally re-encode first — convert to WebP or JPG with a quality slider, or cap the width — to shrink the result before embedding; the size readout shows the image bytes, the Base64 length and the ~33% overhead. SVG files also get a URL-encoded data URI, which is usually smaller and stays readable. The decoder accepts a data URI, raw Base64 (padded or not, Base64URL, wrapped lines) or a pasted CSS url() / <img src> fragment, detects the real format from the file signature, previews it and downloads it with the right extension.
Questions
How do I convert an image to Base64?
Drop the file into the tool (or paste it from the clipboard). The data URI appears immediately with Copy and Download buttons, plus HTML, CSS and Markdown variants.
When should I inline an image as Base64?
For tiny assets — icons, small logos, placeholders — where saving an HTTP request matters. Base64 adds about 33% to the size and can't be cached separately, so above roughly 50 KB a normal image file is usually faster.
How do I use a Base64 image in CSS or HTML?
Pick the CSS tab for background-image: url("data:image/png;base64,…") or the HTML tab for <img src="data:…">. Both are copied ready to paste.
Can it decode Base64 back to an image?
Yes. Paste any data URI or bare Base64 string; the tool sniffs the format (PNG, JPEG, GIF, WebP, AVIF, BMP, ICO, TIFF, SVG), shows a preview with dimensions and downloads the file. It also flags when the declared MIME type doesn't match the bytes.
Is my image uploaded?
No. Reading, re-encoding and Base64 conversion all run in your browser; nothing is sent to a server.