Image to Base64
Drop any picture into this image to Base64 converter to get a data URI and ready-to-paste snippets for HTML, CSS and JavaScript. Inline images save HTTP requests for small icons, and they are essential for single-file HTML, e-mail templates and offline apps.
How to convert Image to Base64 online
- Select an image file or paste an image URL.
- Pick the output: data URI,
<img>, CSS background, favicon, JSON and more. - Click Encode image to Base64.
- Preview the image and copy the code.
More Image to Base64 converters
Output formats
Choose how the result should be wrapped. The converter can return:
- txt: only the Base64 string, ready to paste into code, a database field or an API request.
- uri: a complete
data:URI that you can paste in a browser address bar or use anywhere a URL is accepted. - html img: an
<img>tag with the data URI insrc. - css background image: a CSS rule using
background-image: url(data:...). - html favicon: a
<link rel="icon">tag for an inline favicon. - html hyperlink: an
<a>link that downloads or opens the embedded file. - html iframe: an
<iframe>that renders the content inline. - javascript image: JavaScript that creates an
Imageobject. - javascript popup: JavaScript that opens the content in a new window.
- json: a JSON object with the file name, MIME type and data.
- xml: an XML element with the data inside a CDATA section.
When should you inline images as Base64?
Inline small images (under roughly 5–10 KB) such as icons, logos and placeholders to save requests. Avoid inlining large photos: they make HTML/CSS heavier, cannot be cached separately and delay rendering. For a detailed discussion see data URIs explained.
Frequently asked questions
How do I convert an image to Base64?
Choose your image, select "Data URI" or "<img>" as the output, and click "Encode image to Base64". Copy the result into your HTML or CSS.
Which image formats are supported?
Any format your browser can read: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, TIFF and more.
How do I use a Base64 image in HTML?
Put the data URI in the src attribute: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">.
Comments (0)
Questions, ideas or a bug in “Image to Base64”? Leave a comment, rate the tool, or reply to others.
No comments yet. Be the first to share your feedback!