Image to Base64 Converter
Turn any image into a base64 data URI for embedding in HTML or CSS. Files are read locally — never uploaded anywhere.
Need an image inside a single HTML file, an email template, or a CSS file with no external requests? Pick the image and get a data:image/…;base64,… URI ready to paste into <img src> or url(). The file is read with the browser's FileReader API — it never leaves your machine — and you'll get a warning before generating a giant URI from a large file.
Produces a data:image/…;base64,… URI you can paste straight into an <img src="…"> tag or a CSS url(…).
How to use this calculator
- Click the file picker and choose an image (max 5 MB).
- Preview the image and heed the size warning for files over 1 MB.
- Copy the data URI and paste it into an <img src="…"> attribute or a CSS url(…).
Worked example
A small PNG converts to a string beginning with data:image/png;base64, followed by the base64 payload — a tiny icon becomes a few hundred characters of text you can paste straight into your HTML. The 5 MB cap and 1 MB warning exist because base64 inflates files by about a third.
Frequently Asked Questions
What is a data URI?
A way to embed file content directly in a URL: data:image/png;base64,iVBORw0KGgo… You can paste it into an <img src> attribute or a CSS url() and the image renders with no separate file and no extra HTTP request. It's ideal for small icons, email templates, and single-file HTML pages.
Why is the output about 33% bigger than my file?
Base64 represents 3 bytes as 4 text characters, so it inflates any file by a third. A 1 MB image becomes roughly 1.4 MB of text. That's why the tool warns on files over 1 MB and caps at 5 MB — data URIs suit small assets, not photo galleries.
Is my image uploaded anywhere?
No. The browser's FileReader API reads the file locally on your machine and the conversion runs entirely in the page. Nothing is sent to any server, which makes this safe even for sensitive images.
Which image formats work?
Any image/* type your browser can decode: PNG, JPEG, GIF, WebP, SVG, AVIF, BMP, ICO. The output MIME type is taken from the file itself, so the data URI's media type stays correct automatically.
When should I NOT use a data URI?
For large images, or images reused across pages. Browsers can't cache a data URI separately from the page containing it, so every page view re-downloads the full payload. Above roughly 50–100 KB, a regular hosted image file is usually the better engineering call.