Options
Drop an image and get it as base64 text you can paste straight into code: a data URL, a CSS background, an HTML <img> tag, Markdown, a JavaScript string, or JSON. Encode several images at once, shrink them first by converting to WebP or JPEG or resizing, and see exactly how much space the base64 version takes, including after gzip. SVGs are URL-encoded instead, which is smaller. Switch to Base64 to image to paste a data URL or base64 string, preview the image, and download it as a file. Everything happens in your browser.
How to convert an image to base64
- Drop one or more images on the left, click Choose images, or paste a screenshot with Ctrl+V.
- Pick the Output style you need, such as a data URL for an
srcattribute or CSS for a stylesheet. - Optionally set Convert to and Max size to make the image smaller before it's encoded.
- Click Copy, or Download to save it as a file. Switch to All to get every image at once.
Output styles
| Style | Example | Use it for |
|---|---|---|
| Data URL | data:image/png;base64,iVBORw0KG... | Any src or href, or a browser address bar |
| Base64 only | iVBORw0KGgoAAAANSUhEUg... | APIs and JSON fields that take raw base64, email attachments (with 76-character wrapping) |
| CSS | .logo { background-image: url("data:..."); } | Icons and small backgrounds in a stylesheet |
| HTML | <img src="data:..." alt="logo" width="64" height="64"> | Self-contained HTML pages and email templates |
| Markdown |  | README files and notes that must work offline |
| JavaScript | const logo = "data:..."; | Bundling images into scripts, canvas, or tests |
When to inline an image as base64
Base64 represents every 3 bytes as 4 characters, so an encoded image is about 33% larger than the file, and gzip only wins back part of that. An inlined image also can't be cached separately from the page or stylesheet it's in, and the browser can't start decoding it until the surrounding file has loaded.
That trade-off is worth it for small images where an extra request costs more than the extra bytes. The tool labels each result:
| Encoded size | Label | Advice |
|---|---|---|
| Up to 4 KB | Good for inlining | Icons, tiny logos, placeholder images |
| 4 to 20 KB | OK for small icons | Fine occasionally, but consider an SVG or a sprite |
| Over 20 KB | Too big to inline | Use a normal image file so it can be cached and lazy-loaded |
Inlining is also useful when a separate file isn't possible at all: HTML emails, single-file reports and documents, browser extensions, offline pages, and JSON APIs that accept image data.
SVG: URL-encoded vs. base64
SVG is text, so it can go into a data URL directly with only a few characters escaped, such as <, >, and #. That's usually smaller than base64, and much smaller after gzip, because the text stays compressible. The tool also strips comments and extra whitespace and switches double quotes to single quotes so the result fits inside url("..."). Turn off SVG as URL-encoded if something you're using requires base64.
Frequently asked questions
How do I use a base64 image in HTML?
Put the data URL in the src attribute: <img src="data:image/png;base64,..." alt="...">. Choose the HTML output style to get the full tag, with the image's width and height filled in to prevent layout shift.
How do I use a base64 image in CSS?
Use the data URL inside url(), for example background-image: url("data:image/png;base64,..."). The CSS output style creates a class named after the file, with the image's width and height.
Why is the base64 bigger than my image?
Base64 uses 4 text characters for every 3 bytes, adding about 33%. To offset it, convert to WebP or reduce the size with Max size before encoding. The status line shows the encoded size and the gzipped size, which is closer to what is actually sent over the network.
How do I convert base64 back to an image?
Switch to Base64 to image and paste the string. It accepts full data URLs, raw base64 with or without line breaks, URL-safe base64, and CSS url() values. The image is shown with its real type and size, and you can download it.
What if the data URL says the wrong image type?
The decoder checks the actual bytes, so a PNG labeled image/jpeg is still identified as PNG, saved with the right extension, and flagged so you can correct the data URL.
Are my images uploaded?
No. Images are read and encoded by your browser, and nothing is sent to a server.