Image to Base64
Encode images as Base64 data URIs.
Drop an image here, or click to browse
Encoded locally — your image never leaves your device
About the Image to Base64
Convert an image into a Base64 data URI for inline embedding in HTML or CSS. Drop in a file and copy the encoded string — processed locally, so your image never leaves your device.
How to use it
- 1Drop in or select an image.
- 2Copy the generated Base64 data URI.
- 3Paste it into your HTML `img src` or CSS `background`.
The trade-off with data URIs
Encoding an image as a Base64 data URI lets you paste it directly into your HTML or CSS instead of linking to a separate file. The upside is one fewer network request, which can speed up the first paint for small, critical assets like an icon or a tiny background pattern. The downside is that Base64 inflates the size by roughly 33% and the data can't be cached separately or reused across pages, so it's the wrong choice for large or repeated images. As a rule of thumb, inline only small assets; keep everything else as a normal file.
Common uses
- Embedding a small icon directly in CSS to save an HTTP request.
- Inlining a tiny logo or pattern into a self-contained HTML email or file.
- Pasting an image into a single-file prototype with no external assets.
Frequently asked questions
- When should I inline an image as Base64?
- For small icons or assets where avoiding an extra request helps; large images are usually better served as files.
- Does inlining make the image bigger?
- Base64 encoding adds about a third to the size, so an inlined image is larger than the original file. That's fine for tiny assets but wasteful for big ones.