How to convert an image to Base64
- Drop an image onto the box, click to choose one, or paste it from the clipboard with Ctrl+V.
- Pick the output format: data URI, raw Base64, HTML, CSS, Markdown or JSON.
- Click Copy and paste the code into your HTML, CSS, email template or API request.
When should you embed images as Base64?
Inline Base64 images save an HTTP request, which is useful for small icons, email signatures, single-file HTML documents and API payloads. Because Base64 is about 33% larger than the original file and cannot be cached separately, keep normal image files for photos and anything larger than a few kilobytes.
Output formats explained
- Data URI –
data:image/png;base64,…forsrcattributes and CSS. - Base64 only – the raw string for APIs and databases.
- HTML / CSS / Markdown – complete snippets you can paste directly.
- JSON – file name, MIME type and data in one object.
Frequently asked questions
Does converting to Base64 make the image bigger?
Yes, by about one third. A 30 KB PNG becomes roughly 40 KB of Base64 text. Compress or resize the image first if size matters.
Which image formats can I convert?
Any format your browser can open: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF and more. The correct MIME type is added to the data URI automatically.
How do I use a Base64 image in CSS?
Choose the CSS format and paste the result into your rule, for example .logo { background-image: url("data:image/png;base64,…"); }.