ENCODERS & TEXT
Image to Base64 — Free Data URL Encoder Online
Convert an image to a Base64 data: URL you can paste straight into CSS, HTML, or JSON. Runs in your browser — the image is never uploaded anywhere.
I tuoi file non lasciano mai il tuo dispositivo.
Turn a PNG, JPG, GIF, WebP, or SVG into a Base64 data URL — a single long string that carries the whole image inline. Drop the file in and you get back a ready-to-use `data:image/...;base64,...` value you can paste into a stylesheet, an <img> tag, or a JSON payload, with no separate file to host.
Everything runs in your browser: the file is read with the FileReader API and encoded on your own machine, so a logo, an icon, or a private mockup is never sent to a server, and it works offline once the page has loaded.
The size trade-off you're making
Base64 is not free. It represents every three bytes of binary data as four text characters, so the encoded string is about 33% larger than the source file — a 30 KB icon comes out around 40 KB of text. That overhead is inherent to the encoding and is the whole reason inlining is a judgement call, not a default.
The trade is an extra HTTP request avoided (the image ships inside the HTML or CSS) against a bigger, non-cacheable payload. For a handful of tiny, reused assets that's usually a win; for large photos it isn't, because an inlined image is re-downloaded with every document that contains it instead of being cached once and reused.
MIME prefix by format
| File | Data URL prefix |
|---|---|
| PNG | data:image/png;base64,… |
| JPG / JPEG | data:image/jpeg;base64,… |
| GIF | data:image/gif;base64,… |
| WebP | data:image/webp;base64,… |
| SVG | data:image/svg+xml;base64,… |
The tool detects the file type and writes the correct prefix for you — the prefix is what tells the browser how to decode the string.
Frequently asked questions
- When is inlining actually worth it?
- For very small, frequently used assets — icons, a tiny logo, a 1px gradient — where saving an HTTP request outweighs the ~33% size penalty and the loss of caching. For anything large or shared across many pages, a normal file link wins because the file caches once and is reused.
- Is my image uploaded to your server?
- No. The file is read and encoded entirely in your browser with the FileReader API. Nothing is transmitted, which is why it's safe on unreleased artwork or internal graphics.
- Should I Base64 an SVG or URL-encode it?
- Both work as a data URL. For SVG specifically, URL-encoding often produces a smaller and more readable result than Base64 because SVG is already text; Base64 is the safe universal default when you don't want to think about it.