When should I use a Base64 data URI instead of a file?

For very small assets — icons, tiny placeholders, anything under a few kilobytes — where saving a network round trip beats the roughly 33% size penalty. Larger images should stay as normal files so they can be cached independently.

Does Base64 encoding make images bigger?

Yes, by about a third. Base64 represents three bytes of binary data using four text characters. That overhead is why inlining only pays off for small files.

Is my image uploaded when I convert it?

No. Encoding happens entirely in your browser, so the file never leaves your device.

floow.design

Image to Base64

Turn an image into a data URI you can paste straight into CSS, HTML or JSON.

Encode freeSign up to copy the data URINo usage limits

Drop an image here, or click to chooseProcessed in your browser — nothing is uploaded

Output as

Add an image to get its data URI.

Drop in an image and get back a Base64 data URI, ready to inline anywhere a URL is accepted. The encoding happens locally — the file never leaves your machine.

Handy for small icons, embedded placeholders, and any asset that has to travel inside a single file with no network request behind it.

What a Base64 data URI actually is

Base64 re-encodes binary data using only characters that are safe inside text. A data URI wraps that in a prefix declaring the media type, which lets a browser treat the whole string as if it were a file at a URL. The trade is size for round trips: the encoded string is roughly a third larger than the original bytes, but it arrives with the document instead of needing its own request.

When inlining helps and when it hurts

Removing a network round trip is worth real milliseconds for a tiny icon on a slow mobile connection. But an inlined asset cannot be cached separately from the file it lives in, so it is re-downloaded every time that file changes. The rule of thumb: inline assets under a few kilobytes, and leave anything larger as a normal request.

SVG is often the better inline format

An inlined SVG is smaller than the same icon as a Base64 PNG, stays sharp at every pixel density, and can be recoloured with CSS. If your asset is line art, convert it to an SVG data URI or drop the markup in directly rather than encoding a raster.

How to use the image to base64

Drop in the image you want to inline — small icons and placeholders are the best candidates.
Pick the output wrapper: a raw data URI, a CSS background-image rule, or an HTML img tag.
Check the overhead figure — Base64 adds roughly a third to the original file size.
If the file is over about 8 KB, reconsider: a normal cached request is usually faster.
Copy the data URI and paste it into your stylesheet, markup or JSON payload.

Use it with

WebP Converter — Convert PNG and JPEG to WebP, or WebP back out, with a quality slider and a live size comparison.
SVG to PNG Converter — Rasterise any SVG at 1x, 2x and 3x, with a transparent or solid background.
App Icon Generator — Upload one square icon and get every iOS and Android size, packaged and ready to drop into your project.

Frequently asked questions

When should I use a Base64 data URI instead of a file?: For very small assets — icons, tiny placeholders, anything under a few kilobytes — where saving a network round trip beats the roughly 33% size penalty. Larger images should stay as normal files so they can be cached independently.
Does Base64 encoding make images bigger?: Yes, by about a third. Base64 represents three bytes of binary data using four text characters. That overhead is why inlining only pays off for small files.
Is my image uploaded when I convert it?: No. Encoding happens entirely in your browser, so the file never leaves your device.