tenuko*

Image to Base64

Turn any image into a Base64 data URI with ready-to-paste HTML and CSS snippets - converted locally, never uploaded.

Click to choose an image or drop it here

PNG, JPG, WebP, GIF, SVG or BMP - encoded locally on your device

Embed images straight into your code

A Base64 data URI packs an entire image into a single line of text that a browser can render on its own, with no separate file to fetch. Paste it into an <img src>, a CSS background-image, an email template or an SVG, and the picture travels with the markup. This tool reads your file with the browser FileReader API and hands you the data URI plus ready-made HTML and CSS snippets, each with one-click copy. Nothing is uploaded.

When inlining helps - and when it hurts

Inlining removes one network request, which is a real win for tiny, frequently used assets like icons, spinners or a subtle background pattern. But Base64 is about 33% larger than the original binary, and an inlined image cannot be cached separately from the page or reused across pages. As a rule of thumb, inline assets under roughly 5 to 10 KB and link to anything bigger. This tool warns you when your encoded string crosses 1 MB, where inlining is almost always the wrong call.

Keep the payload small first

Because the encoded text inherits your file size plus a third, it pays to shrink the image before encoding. Run it through the image compressor or the image resizer first, or convert a photo to WebP with the image converter to cut the byte count. For favicons and app icons specifically, the favicon generator produces every size you need in one go.

Frequently asked questions

What is a Base64 data URI?
It is a way to embed a file directly inside text as a long string, prefixed with something like data:image/png;base64,. A browser can render it without a separate network request, so the image travels inside your HTML or CSS instead of as its own file.
When should I inline an image as Base64?
Only for small assets - tiny icons, a 1px background, an SVG sprite. Inlining saves an HTTP request. For anything larger than a few kilobytes it backfires, because Base64 adds about 33% to the size and the data cannot be cached separately from the page.
Why is the Base64 string bigger than my image?
Base64 encodes every 3 bytes of binary data as 4 text characters, so the encoded version is roughly 33% larger than the original file. That overhead is the price of turning binary into safe, copy-pasteable text.
Can I use a Base64 image in CSS?
Yes. Use it as background-image: url(data:image/png;base64,...). This tool gives you a ready-made CSS snippet alongside the HTML img tag, both with one-click copy.
Is my image uploaded to encode it?
No. The conversion uses the browser FileReader API and runs entirely on your device. Your image is never sent anywhere.

Related tools

Image Resizer

Resize images to exact pixels or percentages right in your browser. Keep aspect ratio, choose quality and download instantly - no upload.

Image Compressor

Compress images to a fraction of their size with a quality slider and live before/after preview. Everything happens locally - nothing is uploaded.

Image Converter

Convert images between PNG, JPG and WebP formats instantly and privately in your browser, with quality control and batch support.

SVG to PNG

Convert SVG files or pasted SVG code to PNG at any resolution - 1x to 4x or exact pixel dimensions. Rendered locally, never uploaded.