Image to base64
A picture you can paste into a stylesheet.
Drop files here
or click to choose from your deviceAccepted: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG, ICO
Up to 3 files per runUp to 20 MB per file5 runs per dayRemove limits with Pro✓ Works offline
Your files stay on your device
This tool runs entirely in your browser. Nothing is uploaded, nothing is stored, and you can even turn off your internet connection before you start.
Example
Example: a 1.1 kB favicon inlined into a single-file HTML report
A test report is one HTML file that people open from an email attachment or a shared drive, so it cannot point to an icon file beside it. favicon-32.png weighs 1,124 bytes. Give me: The data URI, then paste the result into the href of the report’s link rel="icon" tag.
- 1,124 bytes make 375 groups of three (the last one padded), and each group becomes four characters: 1,500 characters of base64, a third more than the file.
- The data URI puts data:image/png;base64, in front: 1,522 characters in all.
- The size note under the result reads: 1.1 kB became 1.5 kB.
| Give me | The result starts with | Characters |
|---|---|---|
| The data URI | data:image/png;base64, | 1,522 |
| A CSS background-image rule | background-image: url("data:image/png;base64, | 1,548 |
| An img tag | <img src="data:image/png;base64, | 1,551 |
| Just the base64, no prefix | the base64 itself | 1,500 |
The icon shows in the browser tab wherever the report is opened, byte for byte the original PNG. A 45 kB team photo in the same report would become 60 kB of text on every load; past 8 kB the size note is shown as a warning, and a separate file is the better choice.
How it works
- Add the picture. PNG, JPEG, GIF, WebP, AVIF, SVG, BMP and ICO all work.
- Choose what you want around it — a bare data URI, a CSS rule, or an img tag.
- Copy the result.
- Check the size note. Inlining saves a request, and stops being worth it sooner than people expect.
Frequently asked questions
- Does it re-encode or compress the picture?
- No. The file’s bytes are read and encoded as they are, so an optimised PNG stays optimised and an animated GIF stays animated. A tool that “helpfully” re-encoded would quietly change an icon’s colours.
- How much larger does it get?
- About a third. Base64 turns three bytes into four, plus the prefix. That is the trade for saving an HTTP request.
- When is inlining actually worth it?
- For something small that is needed immediately — an icon, a 1×1 spacer, a small logo in a single-file HTML page. Past a couple of kilobytes the extra bytes on every page load usually cost more than the request saved, and a cached file wins. The size note under the result says how much bigger it got, and becomes a warning above 8 kB.
- Can I inline an SVG this way?
- You can, and often you should not: an SVG is text, so it can go straight into the HTML where CSS can style it. Base64 is for when it has to be a single opaque string.
- Will a base64 image show in an email?
- Often not. Many email programs and webmail services do not display images written as data URIs, so the recipient sees a broken image or nothing at all. For an email, attach the picture or link to it on a website instead.
- Can I encode several pictures at once?
- Yes. They come out one after another in base64.txt, each under a comment line with its name and its size in and out, such as /* logo.png — 1.5 kB in, 2.0 kB out */, so you can copy each block where it belongs. The free plan takes 3 files per run.
- Is anything uploaded?
- No. It all happens in your browser.