The Image to base64 converter turns a picture into a Base64 string and immediately gives ready-to-use variants: plain Base64, a Data URI, an <img> tag and a CSS background-image rule. This lets you embed the image directly in HTML, CSS or an email without a separate file.
How it works
The file is read in the browser, its bytes are Base64-encoded and the type is prepended: data:image/png;base64,iVBORw0KGgo.... The browser treats such a string as a normal image.
Usage example
- HTML:
<img src="data:image/svg+xml;base64,PHN2Zy8+"> - CSS:
background-image: url("data:image/png;base64,...")
When to inline an image
- Small icons and sprites (up to 2–5 KB) — saves a separate HTTP request.
- HTML emails — inline images show without loading external resources (but some mail clients, e.g. Gmail, do not show data: URIs — test it).
- CSS — background icons, cursors, small decorative elements next to the styles.
- Single-file pages, reports and prototypes that must be shared as one file.
When not to
- Large images and photos — Base64 is ~33% heavier than the file and the page loads slower.
- Caching — a separate file is cached by the browser once, while an inlined one is downloaded again with every changed HTML or CSS.
- One image on many pages — a separate file is better: it loads once.
- An inlined image blocks parsing of the CSS/HTML until all the text is loaded, and it cannot be lazy-loaded.
Good to know
- For SVG, URL encoding is often better than Base64:
data:image/svg+xml,%3Csvg...is shorter. - Loading by URL works only if the image server allows CORS; otherwise download the file and upload it.
- The type (image/png, image/jpeg, image/gif, image/webp, image/svg+xml) is detected from the file automatically.
How to use the page
- Enter the image URL and press "Load" — or drag the file onto the drop area or choose it.
- Copy the variant you need: Base64, Data URI, image tag or CSS background.