Image to Base64 Encoder
Turn an image into a Base64 data URI, with ready-to-paste HTML and CSS. Nothing is uploaded — the file is read on your device.
Image to Base64
A data URI embeds a file directly in text as data:<type>;base64,<data>. Inlining a small image this way removes a network request and lets HTML or CSS carry the picture on its own, which is handy for email templates, single-file demos and tiny icons.
How it works
- The file is read locally and encoded as Base64, wrapped in a data URI with its MIME type.
- You get the raw URI, an
<img>tag and a CSS rule for the same image. - The encoded text is roughly a third larger than the binary, so inlining suits small images.
- This is an image encoder; for plain text use the the text Base64 encoder.
Frequently asked questions
What does this tool do?
It turns a local image file into a Base64 data URI you can paste into HTML or CSS, and shows the ready-made img tag and CSS rule.
Is my image uploaded?
No. The file is read with the browser's FileReader and encoded on your device; nothing is sent to a server.
Which image formats are supported?
PNG, JPG, GIF, WEBP, SVG, BMP, ICO, TIFF, AVIF and HEIC are recognised by their extension or MIME type.
Is this different from the text Base64 encoder?
Yes. This page takes an image file and gives you a data URI plus HTML/CSS snippets; a text Base64 encoder converts text, not image files.
Should I inline large images?
Data URIs are convenient for small icons and critical images, but they are about a third larger than the binary and cannot be cached separately, so keep them small.
Does the data URI keep the original quality?
Yes. The bytes are encoded as-is; no re-compression happens, though the data URI text is larger than the file.
Related: the the text Base64 encoder, image compressor, image resizer, or browse every browser-only tool on the all tools page.