# Image to Base64

Turn an image into base64 or a data URL you can paste into CSS, HTML or JSON. Free, and the image is never uploaded.

Canonical page: https://filetity.com/image-to-base64

## Capabilities

- Free: Yes, with no watermark and no page limit.
- Account required: No. There is no account system.
- Processed on device: Yes. The file is read by your browser and never uploaded. There is no server to send it to.
- Formats: PNG, JPG, GIF, WebP, AVIF, SVG, BMP and ICO in. Base64 text out, with or without the data: prefix.
- Limits: Base64 is about a third larger than the file, so a 1 MB image becomes roughly 1.33 MB of text. That is the format, and it is why inlining large images is usually a mistake.
- Mobile: Yes, on any modern mobile browser. Large files are limited by the memory the phone gives the browser.
- Offline: Yes, once the page has loaded. The tool keeps working with no network connection.

## Questions

### How much bigger does base64 make the file?

About a third. Three bytes become four characters, so a 300 KB image becomes roughly 400 KB of text. That cost is why inlining works well for a small icon and badly for a photograph, and the page shows both numbers so the decision is in front of you.

### When is inlining an image actually a good idea?

For something small that would otherwise cost a separate request: an icon, a tiny background, a logo in an email signature. For anything large it is worse than a normal file, because a data URL cannot be cached separately and has to be re-sent with every copy of the page or stylesheet that holds it.

### Do I want the data: prefix or just the payload?

CSS and HTML want the whole data URL, prefix included, since they are being given something to load. A JSON field or a database column usually wants the payload alone, because the consuming code adds its own prefix. Both are one click apart here.

### Is an SVG worth encoding this way?

Usually not. An SVG is already text, so it can be pasted straight into HTML, and base64 makes it a third larger for nothing. If you do need a data URL for one, URL-encoding it is smaller than base64, though base64 is the safer option when the SVG contains quotes and hashes.

### Is my image uploaded to encode it?

No. It is read off your disk by the browser and encoded in the tab. There is no request in the path, which is worth knowing when the thing you are inlining is a client logo or a screenshot from an internal system.

## Related tools

- [Base64 to Image](https://filetity.com/base64-to-image): Paste base64 or a data URL and get the picture back.
- [Base64 decode and encode](https://filetity.com/base64-decode): Decode base64 to text, or encode text to base64, without leaving the page.