Image ↔ Base64
Convert images to Base64 Data URI for inline CSS/HTML, or decode Base64 back to a viewable image. Supports drag-and-drop, preview, copy as CSS/HTML/JSON, and re-encode to PNG/JPEG/WebP.
Drop an image here or click to browse
PNG · JPEG · WebP · GIF · SVG · BMP · ICO — up to ~10 MB
About this tool
Image ↔ Base64 converts an image file into a Base64 Data URI you can paste directly into HTML, CSS, or JSON — and converts a Base64 string back into a viewable, downloadable image.
Example: a small logo dropped into the encoder produces data:image/png;base64,iVBORw0KGgo… which you can use as <img src="data:…"> or background-image: url("data:…") with no separate file request. In the other direction, paste a Data URI to preview and download it as a real file.
Common uses: embedding small icons inline to cut HTTP requests, copying an image into an email template, inspecting a Base64 string from an API response, or re-encoding a PNG to a smaller WebP before inlining.
FAQ
When should I inline an image as Base64? ›
Only for small assets — icons, logos, or sprites under roughly 4 KB. Base64 expands the file by about 33%, and very large Data URIs bloat HTML/CSS and block parsing, so keep big images as separate files.
What is the difference between Data URI and Raw Base64? ›
A Data URI includes the "data:image/png;base64," prefix so a browser knows how to render it directly. Raw Base64 is just the encoded bytes with no prefix — useful when the MIME type is known separately, for example inside a JSON API payload.
Can I convert a PNG to JPEG or WebP here? ›
Yes. Enable the Re-encode option, pick a target format and quality, and optionally set a max width. The output Data URI is regenerated in the new format.
Why does my decoded image look broken? ›
The pasted string may be missing the data-URI prefix, contain line breaks, or be truncated. The decoder strips whitespace and guesses the MIME type from the Base64 magic bytes, but a corrupted string cannot be recovered.
Can I convert plain text to a Data URI too? ›
Yes — for text content like HTML snippets, CSS, JavaScript, JSON, or Markdown, use the Data URI Generator. It supports text MIME types with both Base64 and percent-encoding options, while this tool handles binary image files.