When should I inline an image?

For very small images (under a few KB) that appear above the fold, inlining can speed up rendering by avoiding the extra HTTP request. For larger images, the encoding overhead (about 33%) outweighs the saved request.

What formats are supported?

PNG, JPEG, SVG, WebP, AVIF, and GIF. SVG inlines especially well because it stays text-based, so the encoding overhead is minimal.

Is the data URI safe to use in CSS?

Yes. Wrap it in url() with quotes around the data URI itself. The output Toova produces is already URL-safe and works directly in background-image, mask-image, and any property that accepts a URL.

Can I decode a data URI back to an image?

Yes. Paste a data URI and Toova decodes it into the original image, ready to download. Useful for extracting inlined images from HTML or CSS files.

Is my image sent anywhere?

No. Encoding happens entirely in your browser.

Image to Base64 Converter — PNG, JPG, WebP to Data URI

Convert any image to a Base64 data URI in your browser, ready to embed inline in HTML, CSS, or JSON. Toova handles every common format, generates valid data URIs, and never uploads your image — useful for small icons, email templates, and self-contained documents.

When to inline an image

Small images (icons under a few KB) often render faster as inline data URIs than as separate HTTP requests, because they skip the round trip. Email templates frequently inline images because many mail clients block external loading by default. Self-contained HTML documents (offline guides, downloadable reports) need everything in one file. Toova converts any image to a Base64 data URI you can paste straight into src, background-image, or a JSON field.

Format and size considerations

Base64 encoding adds about 33% to the file size, so inlining is only a win for small images. Beyond about 5-10 KB, the separate HTTP request is usually faster than the bloated inline payload. Toova surfaces the original size, the encoded size, and the percentage overhead so you can decide. Every common format (PNG, JPEG, SVG, WebP, GIF) is supported.

Local-only

The image is read and encoded entirely in your browser. The file never gets uploaded, and there is no logging of the content. That matters when the image is an unreleased mockup, a customer photo, or any proprietary asset. The Network tab will stay empty during encoding, and the page works offline after first load.

Frequently Asked Questions

When should I inline an image?: For very small images (under a few KB) that appear above the fold, inlining can speed up rendering by avoiding the extra HTTP request. For larger images, the encoding overhead (about 33%) outweighs the saved request.
What formats are supported?: PNG, JPEG, SVG, WebP, AVIF, and GIF. SVG inlines especially well because it stays text-based, so the encoding overhead is minimal.
Is the data URI safe to use in CSS?: Yes. Wrap it in url() with quotes around the data URI itself. The output Toova produces is already URL-safe and works directly in background-image, mask-image, and any property that accepts a URL.
Can I decode a data URI back to an image?: Yes. Paste a data URI and Toova decodes it into the original image, ready to download. Useful for extracting inlined images from HTML or CSS files.
Is my image sent anywhere?: No. Encoding happens entirely in your browser.