Image to Base64

Drop an image and get a data URI, ready-to-paste CSS rule or <img> tag — the file never leaves your device.

Encoders & DecodersRuns in your browserFree, no sign-up

Options

Output as

Drop an image

Drop an image here

PNG, JPEG, SVG, WebP, GIF or AVIF

Base64 output

Output appears here as you type.

Ctrl + Enter to run

About the Image to Base64

Converting an image to a data URL embeds it directly in your HTML or CSS, removing one network request. That is occasionally worth it for a tiny icon on a critical path, and rarely worth it otherwise, because the encoded form is about a third larger and cannot be cached separately from the document it sits in.

The size shown after conversion is the number to judge by. Under a couple of kilobytes, inlining is defensible; past that you are making every page load carry the image whether or not it is displayed, and a normal `<img>` with proper caching wins comfortably.

Frequently asked questions

Is my image uploaded anywhere?

No. The file is read by the browser's FileReader API and encoded locally — it is never sent over the network. That is the main reason to use an in-browser converter for anything that is not already public.

Should I inline images as Base64?

Only small ones. Base64 inflates a file by roughly 33%, and inlined data cannot be cached separately, so a large inlined image is re-downloaded with every HTML or CSS change. The usual guidance is to inline below about 2–4 KB — icons and tiny placeholders — and serve everything larger as a normal file.

Which formats work?

Any image your browser can read: PNG, JPEG, WebP, AVIF, GIF and SVG. SVG is a special case worth knowing — because it is text, it usually compresses better as URL-encoded SVG than as Base64.